From cab5d3be3e47135a79322be25712aac0c14b8137 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 14 Apr 2023 09:11:25 +0300
Subject: [PATCH 01/35] Add left/right handling to flex panel wrapper

---
 .../components/ActivityBar/ActivityBar.vue    |  9 ++--
 client/src/components/Panels/FlexPanel.vue    | 50 +++++++++++++++++--
 2 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/client/src/components/ActivityBar/ActivityBar.vue b/client/src/components/ActivityBar/ActivityBar.vue
index 2df107d8850..c7854ed4fd4 100644
--- a/client/src/components/ActivityBar/ActivityBar.vue
+++ b/client/src/components/ActivityBar/ActivityBar.vue
@@ -2,6 +2,7 @@
 import { useUserStore } from "@/stores/userStore";
 import UploadItem from "./Items/UploadItem.vue";
 import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
+import FlexPanel from "@/components/Panels/FlexPanel.vue";
 import ActivityItem from "./ActivityItem";
 
 const userStore = useUserStore();
@@ -48,19 +49,15 @@ function onToggleSidebar(toggle) {
                     to="/user" />
             </b-nav>
         </div>
-        <div v-if="sidebarIsActive('search')" key="search" class="left-column">
+        <FlexPanel v-if="sidebarIsActive('search')" key="search" side="left" :collapsible="false">
             <ToolBox />
-        </div>
+        </FlexPanel>
     </div>
 </template>
 
 <style scoped lang="scss">
 @import "theme/blue.scss";
 
-.left-column {
-    width: 15rem;
-}
-
 .activity-bar {
     background: $panel-bg-color;
     width: 4rem;
diff --git a/client/src/components/Panels/FlexPanel.vue b/client/src/components/Panels/FlexPanel.vue
index 3387d363978..bf35f1ab8bf 100644
--- a/client/src/components/Panels/FlexPanel.vue
+++ b/client/src/components/Panels/FlexPanel.vue
@@ -11,7 +11,19 @@ library.add({
     faGripLinesVertical,
 });
 
+const props = defineProps({
+    collapsible: {
+        type: Boolean,
+        default: true,
+    },
+    side: {
+        type: String,
+        default: "right",
+    },
+});
+
 const draggable = ref();
+const root = ref();
 const rangeWidth = [200, 300, 600];
 const panelWidth = ref(rangeWidth[1]);
 const show = ref(true);
@@ -22,7 +34,16 @@ const { position, isDragging } = useDraggable(draggable, {
 });
 
 watch(position, () => {
-    const newWidth = window.innerWidth - position.value.x;
+    const rectRoot = root.value.getBoundingClientRect();
+    const rectDraggable = draggable.value.getBoundingClientRect();
+    let newWidth = null;
+    if (props.side === "right") {
+        const offset = rectRoot.x - rectDraggable.x;
+        newWidth = rectRoot.right - position.value.x - offset;
+    } else {
+        const offset = rectRoot.right - rectDraggable.x;
+        newWidth = position.value.x - rectRoot.left + offset;
+    }
     panelWidth.value = Math.max(rangeWidth[0], Math.min(rangeWidth[2], newWidth));
 });
 
@@ -36,11 +57,14 @@ function toggle() {
 </script>
 
 <template>
-    <div class="d-flex">
+    <div ref="root" class="d-flex">
         <div class="d-flex flex-column" :style="style">
             <slot v-if="show" />
             <div v-else class="flex-fill" />
-            <div class="flex-panel-footer d-flex px-2 p-1" :class="{ 'flex-panel-border': !show }">
+            <div
+                v-if="side === 'right'"
+                class="flex-panel-footer d-flex px-2 p-1"
+                :class="{ 'flex-panel-border': !show }">
                 <div v-if="show">
                     <font-awesome-icon icon="grip-lines-vertical" />
                     <div
@@ -52,12 +76,30 @@ function toggle() {
                         }" />
                 </div>
                 <div class="flex-fill" />
-                <div>
+                <div v-if="collapsible">
                     <font-awesome-icon v-if="show" class="cursor-pointer increase-area" icon="chevron-right" />
                     <font-awesome-icon v-else class="cursor-pointer increase-area" icon="chevron-left" />
                     <div class="interaction-area" @click="toggle" />
                 </div>
             </div>
+            <div v-else class="flex-panel-footer d-flex px-2 p-1" :class="{ 'flex-panel-border': !show }">
+                <div v-if="collapsible">
+                    <font-awesome-icon v-if="show" class="cursor-pointer increase-area" icon="chevron-left" />
+                    <font-awesome-icon v-else class="cursor-pointer increase-area" icon="chevron-right" />
+                    <div class="interaction-area" @click="toggle" />
+                </div>
+                <div class="flex-fill" />
+                <div v-if="show">
+                    <font-awesome-icon icon="grip-lines-vertical" />
+                    <div
+                        ref="draggable"
+                        class="interaction-area"
+                        :class="{
+                            'cursor-grab': !isDragging,
+                            'cursor-grabbing': isDragging,
+                        }" />
+                </div>
+            </div>
         </div>
     </div>
 </template>

From e283d9f23321f63224689ef73d9c6c32b09285ef Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 14 Apr 2023 09:25:37 +0300
Subject: [PATCH 02/35] Use last queue to throttle resizing of side panels

---
 client/src/components/Panels/FlexPanel.vue | 27 +++++++++++++---------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/client/src/components/Panels/FlexPanel.vue b/client/src/components/Panels/FlexPanel.vue
index bf35f1ab8bf..9f7c1faaa8b 100644
--- a/client/src/components/Panels/FlexPanel.vue
+++ b/client/src/components/Panels/FlexPanel.vue
@@ -4,6 +4,9 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { faChevronLeft, faChevronRight, faGripLinesVertical } from "@fortawesome/free-solid-svg-icons";
 import { useDraggable } from "@vueuse/core";
+import { LastQueue } from "utils/promise-queue";
+
+const lastQueue = new LastQueue(10);
 
 library.add({
     faChevronLeft,
@@ -34,17 +37,19 @@ const { position, isDragging } = useDraggable(draggable, {
 });
 
 watch(position, () => {
-    const rectRoot = root.value.getBoundingClientRect();
-    const rectDraggable = draggable.value.getBoundingClientRect();
-    let newWidth = null;
-    if (props.side === "right") {
-        const offset = rectRoot.x - rectDraggable.x;
-        newWidth = rectRoot.right - position.value.x - offset;
-    } else {
-        const offset = rectRoot.right - rectDraggable.x;
-        newWidth = position.value.x - rectRoot.left + offset;
-    }
-    panelWidth.value = Math.max(rangeWidth[0], Math.min(rangeWidth[2], newWidth));
+    lastQueue.enqueue(() => {
+        const rectRoot = root.value.getBoundingClientRect();
+        const rectDraggable = draggable.value.getBoundingClientRect();
+        let newWidth = null;
+        if (props.side === "right") {
+            const offset = rectRoot.x - rectDraggable.x;
+            newWidth = rectRoot.right - position.value.x - offset;
+        } else {
+            const offset = rectRoot.right - rectDraggable.x;
+            newWidth = position.value.x - rectRoot.left + offset;
+        }
+        panelWidth.value = Math.max(rangeWidth[0], Math.min(rangeWidth[2], newWidth));
+    });
 });
 
 const style = computed(() => {

From 31994b566d6ce2be84daad979142e8c89b2b3aa2 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Fri, 14 Apr 2023 15:57:28 +0300
Subject: [PATCH 03/35] Add overlay to avoid event grabbing from iframe

---
 client/src/components/Panels/FlexPanel.vue | 24 ++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/client/src/components/Panels/FlexPanel.vue b/client/src/components/Panels/FlexPanel.vue
index 9f7c1faaa8b..944975e0fa6 100644
--- a/client/src/components/Panels/FlexPanel.vue
+++ b/client/src/components/Panels/FlexPanel.vue
@@ -106,27 +106,35 @@ function toggle() {
                 </div>
             </div>
         </div>
+        <div v-if="isDragging" class="interaction-overlay" />
     </div>
 </template>
 
 <style>
 @import "theme/blue.scss";
-.interaction-area {
-    margin: -1.5rem;
-    padding: 1.5rem;
-    position: absolute;
-}
 .cursor-grab {
     cursor: grab;
 }
 .cursor-grabbing {
     cursor: grabbing;
 }
-.flex-panel-footer {
-    background: $panel-footer-bg-color;
-}
 .flex-panel-border {
     border: $border-default;
     border-top-left-radius: $border-radius-base;
 }
+.flex-panel-footer {
+    background: $panel-footer-bg-color;
+}
+.interaction-area {
+    margin: -1.5rem;
+    padding: 1.5rem;
+    position: absolute;
+    z-index: 1;
+}
+.interaction-overlay {
+    position: fixed;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
 </style>

From 5b9ae2485c97f069c412ae133d819fbc69b71489 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 17 Apr 2023 07:20:02 +0300
Subject: [PATCH 04/35] For consistency use left instead of x

---
 client/src/components/Panels/FlexPanel.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Panels/FlexPanel.vue b/client/src/components/Panels/FlexPanel.vue
index 944975e0fa6..011bdc0ef5f 100644
--- a/client/src/components/Panels/FlexPanel.vue
+++ b/client/src/components/Panels/FlexPanel.vue
@@ -42,10 +42,10 @@ watch(position, () => {
         const rectDraggable = draggable.value.getBoundingClientRect();
         let newWidth = null;
         if (props.side === "right") {
-            const offset = rectRoot.x - rectDraggable.x;
+            const offset = rectRoot.left - rectDraggable.left;
             newWidth = rectRoot.right - position.value.x - offset;
         } else {
-            const offset = rectRoot.right - rectDraggable.x;
+            const offset = rectRoot.right - rectDraggable.left;
             newWidth = position.value.x - rectRoot.left + offset;
         }
         panelWidth.value = Math.max(rangeWidth[0], Math.min(rangeWidth[2], newWidth));

From ecdd5039b63381bf21467c66b6aef33280c700ee Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 17 Apr 2023 07:23:25 +0300
Subject: [PATCH 05/35] Convert admin entry module to composition api

---
 client/src/entry/analysis/modules/Admin.vue | 44 ++++++++-------------
 1 file changed, 17 insertions(+), 27 deletions(-)

diff --git a/client/src/entry/analysis/modules/Admin.vue b/client/src/entry/analysis/modules/Admin.vue
index 452f4698540..1c5b33dce90 100644
--- a/client/src/entry/analysis/modules/Admin.vue
+++ b/client/src/entry/analysis/modules/Admin.vue
@@ -1,6 +1,22 @@
+<script setup>
+import { computed } from "vue";
+import { getGalaxyInstance } from "app";
+import AdminPanel from "@/components/admin/AdminPanel.vue";
+import SidePanel from "@/components/Panels/SidePanel.vue";
+
+const panelProperties = computed(() => {
+    const config = getGalaxyInstance().config;
+    return {
+        enableQuotas: config.enable_quotas,
+        isToolshedInstalled: config.tool_shed_urls && config.tool_shed_urls.length > 0,
+        versionMajor: config.version_major,
+    };
+});
+</script>
+
 <template>
     <div id="columns">
-        <SidePanel side="left" :current-panel="getAdminPanel()" :current-panel-properties="panelProperties" />
+        <SidePanel side="left" :current-panel="AdminPanel" :current-panel-properties="panelProperties" />
         <div id="center" class="center-style">
             <div class="center-container">
                 <div class="center-panel" style="display: block">
@@ -10,29 +26,3 @@
         </div>
     </div>
 </template>
-<script>
-import { getGalaxyInstance } from "app";
-import AdminPanel from "components/admin/AdminPanel";
-import SidePanel from "components/Panels/SidePanel";
-
-export default {
-    components: {
-        SidePanel,
-    },
-    computed: {
-        panelProperties() {
-            const config = getGalaxyInstance().config;
-            return {
-                enableQuotas: config.enable_quotas,
-                isToolshedInstalled: config.tool_shed_urls && config.tool_shed_urls.length > 0,
-                versionMajor: config.version_major,
-            };
-        },
-    },
-    methods: {
-        getAdminPanel() {
-            return AdminPanel;
-        },
-    },
-};
-</script>

From 051fb08dfc48a6833c6a95c3c48a997c71bc6354 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 17 Apr 2023 07:27:10 +0300
Subject: [PATCH 06/35] Use flex panel for admin entry module

---
 client/src/entry/analysis/modules/Admin.vue | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/client/src/entry/analysis/modules/Admin.vue b/client/src/entry/analysis/modules/Admin.vue
index 1c5b33dce90..48ba4ab8ad8 100644
--- a/client/src/entry/analysis/modules/Admin.vue
+++ b/client/src/entry/analysis/modules/Admin.vue
@@ -2,7 +2,7 @@
 import { computed } from "vue";
 import { getGalaxyInstance } from "app";
 import AdminPanel from "@/components/admin/AdminPanel.vue";
-import SidePanel from "@/components/Panels/SidePanel.vue";
+import FlexPanel from "@/components/Panels/FlexPanel.vue";
 
 const panelProperties = computed(() => {
     const config = getGalaxyInstance().config;
@@ -15,14 +15,12 @@ const panelProperties = computed(() => {
 </script>
 
 <template>
-    <div id="columns">
-        <SidePanel side="left" :current-panel="AdminPanel" :current-panel-properties="panelProperties" />
-        <div id="center" class="center-style">
-            <div class="center-container">
-                <div class="center-panel" style="display: block">
-                    <router-view :key="$route.fullPath" />
-                </div>
-            </div>
+    <div id="columns" class="d-flex">
+        <FlexPanel side="left">
+            <AdminPanel v-bind="panelProperties" />
+        </FlexPanel>
+        <div id="center" class="overflow-auto p-3 w-100">
+            <router-view :key="$route.fullPath" />
         </div>
     </div>
 </template>

From a14594fb723991bb84898036b9a3e52aa9a2e20b Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 17 Apr 2023 07:30:22 +0300
Subject: [PATCH 07/35] Use config composable instead of accessing global
 galaxy object in admin module

---
 client/src/entry/analysis/modules/Admin.vue | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/client/src/entry/analysis/modules/Admin.vue b/client/src/entry/analysis/modules/Admin.vue
index 48ba4ab8ad8..cec15a5ca87 100644
--- a/client/src/entry/analysis/modules/Admin.vue
+++ b/client/src/entry/analysis/modules/Admin.vue
@@ -1,15 +1,16 @@
 <script setup>
 import { computed } from "vue";
-import { getGalaxyInstance } from "app";
+import { useConfig } from "@/composables/config";
 import AdminPanel from "@/components/admin/AdminPanel.vue";
 import FlexPanel from "@/components/Panels/FlexPanel.vue";
 
+const { config } = useConfig();
+
 const panelProperties = computed(() => {
-    const config = getGalaxyInstance().config;
     return {
-        enableQuotas: config.enable_quotas,
-        isToolshedInstalled: config.tool_shed_urls && config.tool_shed_urls.length > 0,
-        versionMajor: config.version_major,
+        enableQuotas: config.value.enable_quotas,
+        isToolshedInstalled: config.value.tool_shed_urls && config.value.tool_shed_urls.length > 0,
+        versionMajor: config.value.version_major,
     };
 });
 </script>

From 2f42143e301cf7da91436b39e89b442945cee55f Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 17 Apr 2023 07:41:41 +0300
Subject: [PATCH 08/35] Remove legacy side panel from analysis view

---
 .../src/entry/analysis/modules/Analysis.vue   | 27 ++++++-------------
 1 file changed, 8 insertions(+), 19 deletions(-)

diff --git a/client/src/entry/analysis/modules/Analysis.vue b/client/src/entry/analysis/modules/Analysis.vue
index 9f128d047c5..b34046c6f91 100644
--- a/client/src/entry/analysis/modules/Analysis.vue
+++ b/client/src/entry/analysis/modules/Analysis.vue
@@ -1,14 +1,13 @@
 <script setup>
+import { computed, ref, onMounted, onUnmounted } from "vue";
+import { useRoute, useRouter } from "vue-router/composables";
+import { useUserStore } from "@/stores/userStore";
 import HistoryIndex from "@/components/History/Index.vue";
 import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
 import ToolBox from "@/components/Panels/ProviderAwareToolBox";
-import SidePanel from "@/components/Panels/SidePanel";
 import DragAndDropModal from "@/components/Upload/DragAndDropModal.vue";
 import FlexPanel from "@/components/Panels/FlexPanel.vue";
 import CenterFrame from "./CenterFrame.vue";
-import { useRoute, useRouter } from "vue-router/composables";
-import { computed, ref, onMounted, onUnmounted } from "vue";
-import { useUserStore } from "@/stores/userStore";
 
 const route = useRoute();
 const router = useRouter();
@@ -49,8 +48,11 @@ onUnmounted(() => {
 });
 </script>
 <template>
-    <div v-if="showActivityBar" id="columns" class="d-flex">
-        <ActivityBar v-if="showPanels" />
+    <div id="columns" class="d-flex">
+        <ActivityBar v-if="showPanels && showActivityBar" />
+        <FlexPanel v-if="showPanels && !showActivityBar" side="left">
+            <ToolBox />
+        </FlexPanel>
         <div id="center" class="overflow-auto p-3 w-100">
             <CenterFrame v-show="showCenter" id="galaxy_main" @load="onLoad" />
             <router-view v-show="!showCenter" :key="$route.fullPath" class="h-100" />
@@ -60,17 +62,4 @@ onUnmounted(() => {
         </FlexPanel>
         <DragAndDropModal />
     </div>
-    <div v-else id="columns">
-        <SidePanel v-if="showPanels" side="left" :current-panel="ToolBox" :current-panel-properties="{}" />
-        <div id="center" class="center-style">
-            <div class="center-container">
-                <CenterFrame v-show="showCenter" id="galaxy_main" @load="onLoad" />
-                <div v-show="!showCenter" class="center-panel" style="display: block">
-                    <router-view :key="$route.fullPath" class="h-100" />
-                </div>
-            </div>
-        </div>
-        <SidePanel v-if="showPanels" side="right" :current-panel="HistoryIndex" :current-panel-properties="{}" />
-        <DragAndDropModal />
-    </div>
 </template>

From 8a12dea7676e3c629042acc2852c57eb509a35ee Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 17 Apr 2023 07:45:33 +0300
Subject: [PATCH 09/35] Remove fixed custom style from markdown editor

---
 client/src/components/Markdown/MarkdownEditor.vue | 2 +-
 client/src/components/Workflow/Editor/Index.vue   | 3 ---
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/client/src/components/Markdown/MarkdownEditor.vue b/client/src/components/Markdown/MarkdownEditor.vue
index 1ea6f7429be..75b05602050 100644
--- a/client/src/components/Markdown/MarkdownEditor.vue
+++ b/client/src/components/Markdown/MarkdownEditor.vue
@@ -5,7 +5,7 @@
                 <MarkdownToolBox :steps="steps" @onInsert="onInsert" />
             </template>
         </SidePanel>
-        <div id="center" class="workflow-markdown-editor">
+        <div id="center">
             <div class="markdown-editor h-100">
                 <div class="unified-panel-header" unselectable="on">
                     <div class="unified-panel-header-inner">
diff --git a/client/src/components/Workflow/Editor/Index.vue b/client/src/components/Workflow/Editor/Index.vue
index f6ba4c59bd7..2480e858f06 100644
--- a/client/src/components/Workflow/Editor/Index.vue
+++ b/client/src/components/Workflow/Editor/Index.vue
@@ -732,9 +732,6 @@ export default {
 };
 </script>
 <style scoped>
-.workflow-markdown-editor {
-    right: 0px !important;
-}
 .reset-wheel {
     position: absolute;
     left: 1rem;

From 555bf2bb1800b30ec0d2c613daf253e0d9ff51b6 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 17 Apr 2023 08:29:32 +0300
Subject: [PATCH 10/35] Replace legacy side panel handler in markdown editor
 with flex-compatible side panel component

---
 .../components/Markdown/MarkdownEditor.vue    | 18 +++----
 .../PageEditor/PageEditorMarkdown.vue         | 50 ++++++++-----------
 client/src/components/Panels/ToolBox.vue      |  1 -
 3 files changed, 30 insertions(+), 39 deletions(-)

diff --git a/client/src/components/Markdown/MarkdownEditor.vue b/client/src/components/Markdown/MarkdownEditor.vue
index 75b05602050..569f1814865 100644
--- a/client/src/components/Markdown/MarkdownEditor.vue
+++ b/client/src/components/Markdown/MarkdownEditor.vue
@@ -1,11 +1,9 @@
 <template>
-    <div>
-        <SidePanel id="left" side="left">
-            <template v-slot:panel>
-                <MarkdownToolBox :steps="steps" @onInsert="onInsert" />
-            </template>
-        </SidePanel>
-        <div id="center">
+    <div id="columns" class="d-flex">
+        <FlexPanel id="left" side="left">
+            <MarkdownToolBox :steps="steps" @onInsert="onInsert" />
+        </FlexPanel>
+        <div id="center" class="overflow-auto w-100">
             <div class="markdown-editor h-100">
                 <div class="unified-panel-header" unselectable="on">
                     <div class="unified-panel-header-inner">
@@ -47,7 +45,7 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faQuestion } from "@fortawesome/free-solid-svg-icons";
 import MarkdownToolBox from "./MarkdownToolBox";
-import SidePanel from "components/Panels/SidePanel";
+import FlexPanel from "components/Panels/FlexPanel";
 import MarkdownHelp from "./MarkdownHelp";
 
 Vue.use(BootstrapVue);
@@ -59,7 +57,7 @@ const FENCE = "```";
 export default {
     components: {
         MarkdownToolBox,
-        SidePanel,
+        FlexPanel,
         FontAwesomeIcon,
         MarkdownHelp,
     },
@@ -74,7 +72,7 @@ export default {
         },
         steps: {
             type: Object,
-            required: true,
+            default: null,
         },
         title: {
             type: String,
diff --git a/client/src/components/PageEditor/PageEditorMarkdown.vue b/client/src/components/PageEditor/PageEditorMarkdown.vue
index d58787ffc13..c378fc1a93e 100644
--- a/client/src/components/PageEditor/PageEditorMarkdown.vue
+++ b/client/src/components/PageEditor/PageEditorMarkdown.vue
@@ -1,32 +1,26 @@
 <template>
-    <div id="columns">
-        <markdown-editor
-            :title="title"
-            :markdown-text="markdownText"
-            :markdown-config="contentData"
-            @onUpdate="onUpdate">
-            <template v-slot:buttons>
-                <b-button
-                    id="save-button"
-                    v-b-tooltip.hover.bottom
-                    title="Save"
-                    variant="link"
-                    role="button"
-                    @click="saveContent(false)">
-                    <font-awesome-icon icon="save" />
-                </b-button>
-                <b-button
-                    id="view-button"
-                    v-b-tooltip.hover.bottom
-                    title="Save & View"
-                    variant="link"
-                    role="button"
-                    @click="saveContent(true)">
-                    <font-awesome-icon icon="eye" />
-                </b-button>
-            </template>
-        </markdown-editor>
-    </div>
+    <markdown-editor :title="title" :markdown-text="markdownText" :markdown-config="contentData" @onUpdate="onUpdate">
+        <template v-slot:buttons>
+            <b-button
+                id="save-button"
+                v-b-tooltip.hover.bottom
+                title="Save"
+                variant="link"
+                role="button"
+                @click="saveContent(false)">
+                <font-awesome-icon icon="save" />
+            </b-button>
+            <b-button
+                id="view-button"
+                v-b-tooltip.hover.bottom
+                title="Save & View"
+                variant="link"
+                role="button"
+                @click="saveContent(true)">
+                <font-awesome-icon icon="eye" />
+            </b-button>
+        </template>
+    </markdown-editor>
 </template>
 
 <script>
diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index 8ecdecb2796..650de69982c 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -5,7 +5,6 @@
                 <nav class="d-flex justify-content-between mx-3 my-2">
                     <h2 v-if="!showAdvanced" id="toolbox-heading" v-localize class="m-1 h-sm">Tools</h2>
                     <h2 v-else id="toolbox-heading" v-localize class="m-1 h-sm">Advanced Tool Search</h2>
-
                     <div class="panel-header-buttons">
                         <b-button-group>
                             <favorites-button v-if="!showAdvanced" :query="query" @onFavorites="onQuery" />

From 2a0bb7f76ee0687513e41756aa14c8e839c2e364 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 17 Apr 2023 08:33:31 +0300
Subject: [PATCH 11/35] Move markdown editor node out of workflow editor
 nesting

---
 .../src/components/Workflow/Editor/Index.vue  | 40 +++++++++----------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/client/src/components/Workflow/Editor/Index.vue b/client/src/components/Workflow/Editor/Index.vue
index 2480e858f06..dc22adb113f 100644
--- a/client/src/components/Workflow/Editor/Index.vue
+++ b/client/src/components/Workflow/Editor/Index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div id="columns" class="workflow-client">
+    <div v-if="isCanvas" id="columns" class="workflow-client">
         <StateUpgradeModal :state-messages="stateMessages" />
         <StateUpgradeModal
             :state-messages="insertedStateMessages"
@@ -26,25 +26,6 @@
                 <b-form-textarea v-model="saveAsAnnotation" />
             </b-form-group>
         </b-modal>
-        <MarkdownEditor
-            v-if="!isCanvas"
-            :markdown-text="markdownText"
-            :markdown-config="markdownConfig"
-            :title="'Workflow Report: ' + name"
-            :steps="steps"
-            @onUpdate="onReportUpdate">
-            <template v-slot:buttons>
-                <b-button
-                    id="workflow-canvas-button"
-                    v-b-tooltip.hover.bottom
-                    title="Return to Workflow"
-                    variant="link"
-                    role="button"
-                    @click="onEdit">
-                    <span class="fa fa-times" />
-                </b-button>
-            </template>
-        </MarkdownEditor>
         <div v-show="isCanvas">
             <SidePanel id="left" side="left">
                 <template v-slot:panel>
@@ -162,6 +143,25 @@
             </SidePanel>
         </div>
     </div>
+    <MarkdownEditor
+        v-else
+        :markdown-text="markdownText"
+        :markdown-config="markdownConfig"
+        :title="'Workflow Report: ' + name"
+        :steps="steps"
+        @onUpdate="onReportUpdate">
+        <template v-slot:buttons>
+            <b-button
+                id="workflow-canvas-button"
+                v-b-tooltip.hover.bottom
+                title="Return to Workflow"
+                variant="link"
+                role="button"
+                @click="onEdit">
+                <span class="fa fa-times" />
+            </b-button>
+        </template>
+    </MarkdownEditor>
 </template>
 
 <script>

From fb074936dde00b14ad752737b71ecd18f9d8b170 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 17 Apr 2023 08:35:33 +0300
Subject: [PATCH 12/35] Remove redundant wrapper around workflow editor columns

---
 .../src/components/Workflow/Editor/Index.vue  | 226 +++++++++---------
 1 file changed, 112 insertions(+), 114 deletions(-)

diff --git a/client/src/components/Workflow/Editor/Index.vue b/client/src/components/Workflow/Editor/Index.vue
index dc22adb113f..02ac522bc8e 100644
--- a/client/src/components/Workflow/Editor/Index.vue
+++ b/client/src/components/Workflow/Editor/Index.vue
@@ -26,122 +26,120 @@
                 <b-form-textarea v-model="saveAsAnnotation" />
             </b-form-group>
         </b-modal>
-        <div v-show="isCanvas">
-            <SidePanel id="left" side="left">
-                <template v-slot:panel>
-                    <ProviderAwareToolBoxWorkflow
-                        :module-sections="moduleSections"
-                        :data-managers="dataManagers"
-                        :workflows="workflows"
-                        @onInsertTool="onInsertTool"
-                        @onInsertModule="onInsertModule"
-                        @onInsertWorkflow="onInsertWorkflow"
-                        @onInsertWorkflowSteps="onInsertWorkflowSteps" />
-                </template>
-            </SidePanel>
-            <div id="center" class="center-style workflow-center">
-                <div class="unified-panel-header" unselectable="on">
-                    <div class="unified-panel-header-inner">
-                        <span class="sr-only">Workflow Editor</span>
-                        {{ name }}
+        <SidePanel id="left" side="left">
+            <template v-slot:panel>
+                <ProviderAwareToolBoxWorkflow
+                    :module-sections="moduleSections"
+                    :data-managers="dataManagers"
+                    :workflows="workflows"
+                    @onInsertTool="onInsertTool"
+                    @onInsertModule="onInsertModule"
+                    @onInsertWorkflow="onInsertWorkflow"
+                    @onInsertWorkflowSteps="onInsertWorkflowSteps" />
+            </template>
+        </SidePanel>
+        <div id="center" class="center-style workflow-center">
+            <div class="unified-panel-header" unselectable="on">
+                <div class="unified-panel-header-inner">
+                    <span class="sr-only">Workflow Editor</span>
+                    {{ name }}
+                </div>
+            </div>
+            <workflow-graph
+                v-if="!datatypesMapperLoading"
+                :steps="steps"
+                :datatypes-mapper="datatypesMapper"
+                :highlight-id="highlightId"
+                :scroll-to-id="scrollToId"
+                @scrollTo="scrollToId = null"
+                @transform="(value) => (transform = value)"
+                @graph-offset="(value) => (graphOffset = value)"
+                @onUpdate="onUpdate"
+                @onClone="onClone"
+                @onCreate="onInsertTool"
+                @onChange="onChange"
+                @onConnect="onConnect"
+                @onRemove="onRemove"
+                @onUpdateStep="onUpdateStep"
+                @onUpdateStepPosition="onUpdateStepPosition">
+            </workflow-graph>
+        </div>
+        <SidePanel id="right" side="right">
+            <template v-slot:panel>
+                <div class="unified-panel workflow-panel">
+                    <div class="unified-panel-header" unselectable="on">
+                        <div class="unified-panel-header-inner">
+                            <WorkflowOptions
+                                :has-changes="hasChanges"
+                                :has-invalid-connections="hasInvalidConnections"
+                                @onSave="onSave"
+                                @onSaveAs="onSaveAs"
+                                @onRun="onRun"
+                                @onDownload="onDownload"
+                                @onReport="onReport"
+                                @onLayout="onLayout"
+                                @onEdit="onEdit"
+                                @onAttributes="onAttributes"
+                                @onLint="onLint"
+                                @onUpgrade="onUpgrade" />
+                        </div>
+                    </div>
+                    <div ref="right-panel" class="unified-panel-body workflow-right p-2">
+                        <div>
+                            <FormTool
+                                v-if="hasActiveNodeTool"
+                                :key="activeStep.id"
+                                :step="activeStep"
+                                :datatypes="datatypes"
+                                @onChangePostJobActions="onChangePostJobActions"
+                                @onAnnotation="onAnnotation"
+                                @onLabel="onLabel"
+                                @onUpdateStep="onUpdateStep"
+                                @onSetData="onSetData" />
+                            <FormDefault
+                                v-else-if="hasActiveNodeDefault"
+                                :step="activeStep"
+                                :datatypes="datatypes"
+                                @onAnnotation="onAnnotation"
+                                @onLabel="onLabel"
+                                @onEditSubworkflow="onEditSubworkflow"
+                                @onAttemptRefactor="onAttemptRefactor"
+                                @onUpdateStep="onUpdateStep"
+                                @onSetData="onSetData" />
+                            <WorkflowAttributes
+                                v-else-if="showAttributes"
+                                :id="id"
+                                :tags="tags"
+                                :parameters="parameters"
+                                :annotation-current.sync="annotation"
+                                :annotation="annotation"
+                                :name-current.sync="name"
+                                :name="name"
+                                :version="version"
+                                :versions="versions"
+                                :license="license"
+                                :creator="creator"
+                                @onVersion="onVersion"
+                                @onLicense="onLicense"
+                                @onCreator="onCreator" />
+                            <WorkflowLint
+                                v-else-if="showLint"
+                                :untyped-parameters="parameters"
+                                :annotation="annotation"
+                                :creator="creator"
+                                :license="license"
+                                :steps="steps"
+                                :datatypes-mapper="datatypesMapper"
+                                @onAttributes="onAttributes"
+                                @onHighlight="onHighlight"
+                                @onUnhighlight="onUnhighlight"
+                                @onRefactor="onAttemptRefactor"
+                                @onScrollTo="onScrollTo" />
+                        </div>
                     </div>
                 </div>
-                <workflow-graph
-                    v-if="!datatypesMapperLoading"
-                    :steps="steps"
-                    :datatypes-mapper="datatypesMapper"
-                    :highlight-id="highlightId"
-                    :scroll-to-id="scrollToId"
-                    @scrollTo="scrollToId = null"
-                    @transform="(value) => (transform = value)"
-                    @graph-offset="(value) => (graphOffset = value)"
-                    @onUpdate="onUpdate"
-                    @onClone="onClone"
-                    @onCreate="onInsertTool"
-                    @onChange="onChange"
-                    @onConnect="onConnect"
-                    @onRemove="onRemove"
-                    @onUpdateStep="onUpdateStep"
-                    @onUpdateStepPosition="onUpdateStepPosition">
-                </workflow-graph>
-            </div>
-            <SidePanel id="right" side="right">
-                <template v-slot:panel>
-                    <div class="unified-panel workflow-panel">
-                        <div class="unified-panel-header" unselectable="on">
-                            <div class="unified-panel-header-inner">
-                                <WorkflowOptions
-                                    :has-changes="hasChanges"
-                                    :has-invalid-connections="hasInvalidConnections"
-                                    @onSave="onSave"
-                                    @onSaveAs="onSaveAs"
-                                    @onRun="onRun"
-                                    @onDownload="onDownload"
-                                    @onReport="onReport"
-                                    @onLayout="onLayout"
-                                    @onEdit="onEdit"
-                                    @onAttributes="onAttributes"
-                                    @onLint="onLint"
-                                    @onUpgrade="onUpgrade" />
-                            </div>
-                        </div>
-                        <div ref="right-panel" class="unified-panel-body workflow-right p-2">
-                            <div>
-                                <FormTool
-                                    v-if="hasActiveNodeTool"
-                                    :key="activeStep.id"
-                                    :step="activeStep"
-                                    :datatypes="datatypes"
-                                    @onChangePostJobActions="onChangePostJobActions"
-                                    @onAnnotation="onAnnotation"
-                                    @onLabel="onLabel"
-                                    @onUpdateStep="onUpdateStep"
-                                    @onSetData="onSetData" />
-                                <FormDefault
-                                    v-else-if="hasActiveNodeDefault"
-                                    :step="activeStep"
-                                    :datatypes="datatypes"
-                                    @onAnnotation="onAnnotation"
-                                    @onLabel="onLabel"
-                                    @onEditSubworkflow="onEditSubworkflow"
-                                    @onAttemptRefactor="onAttemptRefactor"
-                                    @onUpdateStep="onUpdateStep"
-                                    @onSetData="onSetData" />
-                                <WorkflowAttributes
-                                    v-else-if="showAttributes"
-                                    :id="id"
-                                    :tags="tags"
-                                    :parameters="parameters"
-                                    :annotation-current.sync="annotation"
-                                    :annotation="annotation"
-                                    :name-current.sync="name"
-                                    :name="name"
-                                    :version="version"
-                                    :versions="versions"
-                                    :license="license"
-                                    :creator="creator"
-                                    @onVersion="onVersion"
-                                    @onLicense="onLicense"
-                                    @onCreator="onCreator" />
-                                <WorkflowLint
-                                    v-else-if="showLint"
-                                    :untyped-parameters="parameters"
-                                    :annotation="annotation"
-                                    :creator="creator"
-                                    :license="license"
-                                    :steps="steps"
-                                    :datatypes-mapper="datatypesMapper"
-                                    @onAttributes="onAttributes"
-                                    @onHighlight="onHighlight"
-                                    @onUnhighlight="onUnhighlight"
-                                    @onRefactor="onAttemptRefactor"
-                                    @onScrollTo="onScrollTo" />
-                            </div>
-                        </div>
-                    </div>
-                </template>
-            </SidePanel>
-        </div>
+            </template>
+        </SidePanel>
     </div>
     <MarkdownEditor
         v-else

From 9a82f33baef57b9448fcc7f7a761e5d17f23afb7 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 17 Apr 2023 08:40:51 +0300
Subject: [PATCH 13/35] Replace legacy sidepanels in workflow editor

---
 .../src/components/Workflow/Editor/Index.vue  | 176 +++++++++---------
 1 file changed, 86 insertions(+), 90 deletions(-)

diff --git a/client/src/components/Workflow/Editor/Index.vue b/client/src/components/Workflow/Editor/Index.vue
index 02ac522bc8e..35b0d03aa92 100644
--- a/client/src/components/Workflow/Editor/Index.vue
+++ b/client/src/components/Workflow/Editor/Index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-if="isCanvas" id="columns" class="workflow-client">
+    <div v-if="isCanvas" id="columns" class="workflow-client d-flex">
         <StateUpgradeModal :state-messages="stateMessages" />
         <StateUpgradeModal
             :state-messages="insertedStateMessages"
@@ -26,19 +26,17 @@
                 <b-form-textarea v-model="saveAsAnnotation" />
             </b-form-group>
         </b-modal>
-        <SidePanel id="left" side="left">
-            <template v-slot:panel>
-                <ProviderAwareToolBoxWorkflow
-                    :module-sections="moduleSections"
-                    :data-managers="dataManagers"
-                    :workflows="workflows"
-                    @onInsertTool="onInsertTool"
-                    @onInsertModule="onInsertModule"
-                    @onInsertWorkflow="onInsertWorkflow"
-                    @onInsertWorkflowSteps="onInsertWorkflowSteps" />
-            </template>
-        </SidePanel>
-        <div id="center" class="center-style workflow-center">
+        <FlexPanel id="left" side="left">
+            <ProviderAwareToolBoxWorkflow
+                :module-sections="moduleSections"
+                :data-managers="dataManagers"
+                :workflows="workflows"
+                @onInsertTool="onInsertTool"
+                @onInsertModule="onInsertModule"
+                @onInsertWorkflow="onInsertWorkflow"
+                @onInsertWorkflowSteps="onInsertWorkflowSteps" />
+        </FlexPanel>
+        <div id="center" class="workflow-center overflow-auto w-100">
             <div class="unified-panel-header" unselectable="on">
                 <div class="unified-panel-header-inner">
                     <span class="sr-only">Workflow Editor</span>
@@ -64,82 +62,80 @@
                 @onUpdateStepPosition="onUpdateStepPosition">
             </workflow-graph>
         </div>
-        <SidePanel id="right" side="right">
-            <template v-slot:panel>
-                <div class="unified-panel workflow-panel">
-                    <div class="unified-panel-header" unselectable="on">
-                        <div class="unified-panel-header-inner">
-                            <WorkflowOptions
-                                :has-changes="hasChanges"
-                                :has-invalid-connections="hasInvalidConnections"
-                                @onSave="onSave"
-                                @onSaveAs="onSaveAs"
-                                @onRun="onRun"
-                                @onDownload="onDownload"
-                                @onReport="onReport"
-                                @onLayout="onLayout"
-                                @onEdit="onEdit"
-                                @onAttributes="onAttributes"
-                                @onLint="onLint"
-                                @onUpgrade="onUpgrade" />
-                        </div>
-                    </div>
-                    <div ref="right-panel" class="unified-panel-body workflow-right p-2">
-                        <div>
-                            <FormTool
-                                v-if="hasActiveNodeTool"
-                                :key="activeStep.id"
-                                :step="activeStep"
-                                :datatypes="datatypes"
-                                @onChangePostJobActions="onChangePostJobActions"
-                                @onAnnotation="onAnnotation"
-                                @onLabel="onLabel"
-                                @onUpdateStep="onUpdateStep"
-                                @onSetData="onSetData" />
-                            <FormDefault
-                                v-else-if="hasActiveNodeDefault"
-                                :step="activeStep"
-                                :datatypes="datatypes"
-                                @onAnnotation="onAnnotation"
-                                @onLabel="onLabel"
-                                @onEditSubworkflow="onEditSubworkflow"
-                                @onAttemptRefactor="onAttemptRefactor"
-                                @onUpdateStep="onUpdateStep"
-                                @onSetData="onSetData" />
-                            <WorkflowAttributes
-                                v-else-if="showAttributes"
-                                :id="id"
-                                :tags="tags"
-                                :parameters="parameters"
-                                :annotation-current.sync="annotation"
-                                :annotation="annotation"
-                                :name-current.sync="name"
-                                :name="name"
-                                :version="version"
-                                :versions="versions"
-                                :license="license"
-                                :creator="creator"
-                                @onVersion="onVersion"
-                                @onLicense="onLicense"
-                                @onCreator="onCreator" />
-                            <WorkflowLint
-                                v-else-if="showLint"
-                                :untyped-parameters="parameters"
-                                :annotation="annotation"
-                                :creator="creator"
-                                :license="license"
-                                :steps="steps"
-                                :datatypes-mapper="datatypesMapper"
-                                @onAttributes="onAttributes"
-                                @onHighlight="onHighlight"
-                                @onUnhighlight="onUnhighlight"
-                                @onRefactor="onAttemptRefactor"
-                                @onScrollTo="onScrollTo" />
-                        </div>
+        <FlexPanel id="right" side="right">
+            <div class="unified-panel workflow-panel">
+                <div class="unified-panel-header" unselectable="on">
+                    <div class="unified-panel-header-inner">
+                        <WorkflowOptions
+                            :has-changes="hasChanges"
+                            :has-invalid-connections="hasInvalidConnections"
+                            @onSave="onSave"
+                            @onSaveAs="onSaveAs"
+                            @onRun="onRun"
+                            @onDownload="onDownload"
+                            @onReport="onReport"
+                            @onLayout="onLayout"
+                            @onEdit="onEdit"
+                            @onAttributes="onAttributes"
+                            @onLint="onLint"
+                            @onUpgrade="onUpgrade" />
                     </div>
                 </div>
-            </template>
-        </SidePanel>
+                <div ref="right-panel" class="unified-panel-body workflow-right p-2">
+                    <div>
+                        <FormTool
+                            v-if="hasActiveNodeTool"
+                            :key="activeStep.id"
+                            :step="activeStep"
+                            :datatypes="datatypes"
+                            @onChangePostJobActions="onChangePostJobActions"
+                            @onAnnotation="onAnnotation"
+                            @onLabel="onLabel"
+                            @onUpdateStep="onUpdateStep"
+                            @onSetData="onSetData" />
+                        <FormDefault
+                            v-else-if="hasActiveNodeDefault"
+                            :step="activeStep"
+                            :datatypes="datatypes"
+                            @onAnnotation="onAnnotation"
+                            @onLabel="onLabel"
+                            @onEditSubworkflow="onEditSubworkflow"
+                            @onAttemptRefactor="onAttemptRefactor"
+                            @onUpdateStep="onUpdateStep"
+                            @onSetData="onSetData" />
+                        <WorkflowAttributes
+                            v-else-if="showAttributes"
+                            :id="id"
+                            :tags="tags"
+                            :parameters="parameters"
+                            :annotation-current.sync="annotation"
+                            :annotation="annotation"
+                            :name-current.sync="name"
+                            :name="name"
+                            :version="version"
+                            :versions="versions"
+                            :license="license"
+                            :creator="creator"
+                            @onVersion="onVersion"
+                            @onLicense="onLicense"
+                            @onCreator="onCreator" />
+                        <WorkflowLint
+                            v-else-if="showLint"
+                            :untyped-parameters="parameters"
+                            :annotation="annotation"
+                            :creator="creator"
+                            :license="license"
+                            :steps="steps"
+                            :datatypes-mapper="datatypesMapper"
+                            @onAttributes="onAttributes"
+                            @onHighlight="onHighlight"
+                            @onUnhighlight="onUnhighlight"
+                            @onRefactor="onAttemptRefactor"
+                            @onScrollTo="onScrollTo" />
+                    </div>
+                </div>
+            </div>
+        </FlexPanel>
     </div>
     <MarkdownEditor
         v-else
@@ -174,7 +170,7 @@ import FormDefault from "@/components/Workflow/Editor/Forms/FormDefault.vue";
 import FormTool from "@/components/Workflow/Editor/Forms/FormTool.vue";
 import MarkdownEditor from "@/components/Markdown/MarkdownEditor.vue";
 import ProviderAwareToolBoxWorkflow from "@/components/Panels/ProviderAwareToolBoxWorkflow.vue";
-import SidePanel from "@/components/Panels/SidePanel.vue";
+import FlexPanel from "@/components/Panels/FlexPanel.vue";
 import { getAppRoot } from "@/onload/loadConfig";
 import reportDefault from "./reportDefault";
 import WorkflowLint from "./Lint.vue";
@@ -197,7 +193,7 @@ import { useDatatypesMapper } from "@/composables/datatypesMapper";
 export default {
     components: {
         MarkdownEditor,
-        SidePanel,
+        FlexPanel,
         StateUpgradeModal,
         ProviderAwareToolBoxWorkflow,
         FormDefault,

From f456a869972ac4eef5f60c6dd89197d09f16b1d2 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 17 Apr 2023 09:05:09 +0300
Subject: [PATCH 14/35] Remove legacy wrappers from login page, previously
 required for layout

---
 client/src/entry/analysis/modules/Login.vue | 46 +++++++++------------
 1 file changed, 20 insertions(+), 26 deletions(-)

diff --git a/client/src/entry/analysis/modules/Login.vue b/client/src/entry/analysis/modules/Login.vue
index 381bcf6bf9a..b7913f7acbf 100644
--- a/client/src/entry/analysis/modules/Login.vue
+++ b/client/src/entry/analysis/modules/Login.vue
@@ -1,30 +1,24 @@
 <template>
-    <div id="columns">
-        <div id="center" class="center-style">
-            <div class="center-container">
-                <div class="center-panel" style="display: block">
-                    <ChangePassword
-                        v-if="hasToken"
-                        :expired-user="$route.query.expired_user"
-                        :message-text="$route.query.message"
-                        :message-variant="$route.query.status"
-                        :token="$route.query.token" />
-                    <LoginIndex
-                        v-else
-                        :allow-user-creation="config.allow_user_creation"
-                        :enable-oidc="config.enable_oidc"
-                        :mailing-join-addr="config.mailing_join_addr"
-                        :prefer-custos-login="config.prefer_custos_login"
-                        :redirect="$route.query.redirect"
-                        :registration-warning-message="config.registration_warning_message"
-                        :server-mail-configured="config.server_mail_configured"
-                        :session-csrf-token="sessionCsrfToken"
-                        :show-welcome-with-login="config.show_welcome_with_login"
-                        :terms-url="config.terms_url"
-                        :welcome-url="config.welcome_url" />
-                </div>
-            </div>
-        </div>
+    <div class="overflow-auto m-3">
+        <ChangePassword
+            v-if="hasToken"
+            :expired-user="$route.query.expired_user"
+            :message-text="$route.query.message"
+            :message-variant="$route.query.status"
+            :token="$route.query.token" />
+        <LoginIndex
+            v-else
+            :allow-user-creation="config.allow_user_creation"
+            :enable-oidc="config.enable_oidc"
+            :mailing-join-addr="config.mailing_join_addr"
+            :prefer-custos-login="config.prefer_custos_login"
+            :redirect="$route.query.redirect"
+            :registration-warning-message="config.registration_warning_message"
+            :server-mail-configured="config.server_mail_configured"
+            :session-csrf-token="sessionCsrfToken"
+            :show-welcome-with-login="!config.show_welcome_with_login"
+            :terms-url="config.terms_url"
+            :welcome-url="config.welcome_url" />
     </div>
 </template>
 

From 23db4478f9cee187e76b47393562344516f72010 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 17 Apr 2023 09:06:10 +0300
Subject: [PATCH 15/35] Remove legacy side panel wrapper from code base

---
 client/src/components/Panels/SidePanel.vue | 115 ---------------------
 1 file changed, 115 deletions(-)
 delete mode 100644 client/src/components/Panels/SidePanel.vue

diff --git a/client/src/components/Panels/SidePanel.vue b/client/src/components/Panels/SidePanel.vue
deleted file mode 100644
index 6a0f79d260b..00000000000
--- a/client/src/components/Panels/SidePanel.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<template>
-    <div
-        :id="side"
-        class="unified-panel-outer-wrap"
-        :class="{ 'left-style': side === 'left', 'right-style': side === 'right' }"
-        :style="styles">
-        <slot name="panel">
-            <component :is="currentPanel" v-bind="currentPanelProperties" />
-        </slot>
-        <div class="unified-panel-footer">
-            <div
-                class="panel-collapse"
-                :class="{
-                    left: side === 'left',
-                    right: side === 'right',
-                    hidden: !show,
-                }"
-                @click="toggle" />
-            <div class="drag" @mousedown="dragHandler" />
-        </div>
-    </div>
-</template>
-
-<script>
-const MIN_PANEL_WIDTH = 160;
-const MAX_PANEL_WIDTH = 800;
-
-export default {
-    name: "SidePanel",
-    props: ["currentPanel", "currentPanelProperties", "side"],
-    data() {
-        return {
-            show: true,
-            width: 288,
-        };
-    },
-    computed: {
-        styles() {
-            const styles = {};
-            styles[this.side] = this.show ? "0" : `-${this.width}px`;
-            styles["width"] = this.width + "px";
-            return styles;
-        },
-    },
-    methods: {
-        dragHandler(e) {
-            const self = this;
-            const draggingLeft = this.side === "left";
-
-            const initialX = e.pageX;
-            const initialWidth = this.width;
-
-            function move(e) {
-                const delta = e.pageX - initialX;
-                let newWidth = draggingLeft ? initialWidth + delta : initialWidth - delta;
-                newWidth = Math.min(MAX_PANEL_WIDTH, Math.max(MIN_PANEL_WIDTH, newWidth));
-                self.resize(newWidth);
-            }
-
-            function moved() {
-                document.getElementById("dd-helper").style.display = "none";
-                document.getElementById("dd-helper").removeEventListener("mousemove", move);
-                document.getElementById("dd-helper").removeEventListener("mouseup", moved);
-            }
-
-            document.getElementById("dd-helper").style.display = "block";
-            document.getElementById("dd-helper").addEventListener("mousemove", move);
-            document.getElementById("dd-helper").addEventListener("mouseup", moved);
-        },
-        resize(newWidth) {
-            this.width = newWidth;
-            document.getElementById("center").style[this.side] = newWidth + "px";
-        },
-        toggle() {
-            this.show = !this.show;
-
-            if (this.show) {
-                document.getElementById("center").style.transition = `${this.side} 200ms linear`;
-                document.getElementById("center").style[this.side] = this.width + "px";
-                setTimeout(() => {
-                    document.getElementById("center").style.transition = "";
-                }, 250);
-            } else {
-                document.getElementById("center").style.transition = `${this.side} 200ms linear`;
-                document.getElementById("center").style[this.side] = "0";
-                setTimeout(() => {
-                    document.getElementById("center").style.transition = "";
-                }, 250);
-            }
-        },
-        hide(timeout = 250) {
-            this.show = false;
-            document.getElementById("center").style.transition = `${this.side} 200ms linear`;
-            document.getElementById("center").style[this.side] = "0";
-            setTimeout(() => {
-                document.getElementById("center").style.transition = "";
-            }, timeout);
-        },
-    },
-};
-</script>
-
-<style scoped>
-.collapsed {
-    position: absolute;
-    bottom: 0;
-    margin: 0;
-}
-
-.unified-panel-outer-wrap {
-    transition-property: left, right;
-    transition-duration: 200ms;
-    transition-timing-function: linear;
-}
-</style>

From 63c723035dde53de5717e6e21cca3d7aa77caa6a Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 17 Apr 2023 09:07:19 +0300
Subject: [PATCH 16/35] Remove legacy side panel and layout styles

---
 client/src/style/scss/base.scss | 52 ---------------------------------
 1 file changed, 52 deletions(-)

diff --git a/client/src/style/scss/base.scss b/client/src/style/scss/base.scss
index 3995667026e..f2d7cf2a409 100644
--- a/client/src/style/scss/base.scss
+++ b/client/src/style/scss/base.scss
@@ -131,58 +131,6 @@ body {
     display: none;
 }
 
-// ==== Panel layout styles ====
-
-.left-style,
-.right-style {
-    @extend .position-absolute;
-    @extend .h-100;
-}
-.left-style {
-    @extend .unified-panel;
-    left: 0px;
-    width: $panel-width;
-    overflow: unset !important;
-}
-.right-style {
-    @extend .unified-panel;
-    right: 0px;
-    width: $panel-width;
-    overflow: unset !important;
-}
-.right-style > .unified-panel-footer {
-    .drag {
-        left: 0;
-    }
-}
-.center-style {
-    @extend .position-absolute;
-    @extend .h-100;
-    left: $panel-width;
-    right: $panel-width;
-    .center-container {
-        @extend .position-absolute;
-        @extend .w-100;
-        @extend .h-100;
-        .center-panel {
-            @extend .position-absolute;
-            @extend .w-100;
-            @extend .h-100;
-            @extend .overflow-auto;
-            display: none;
-            padding: $margin-h $margin-v;
-            background: $white;
-        }
-    }
-    // Replaces unnecessary if/then logic in base_panels.mako
-    &:first-child {
-        left: 0;
-    }
-    &:last-child {
-        right: 0;
-    }
-}
-
 // ==== Unified panel styles ====
 .unified-panel {
     display: flex;

From 155c7c26bf98c2b641c357e49b5c9f0495cf9683 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 17 Apr 2023 09:20:07 +0300
Subject: [PATCH 17/35] Fix border handling for left/right toggle

---
 client/src/components/Panels/FlexPanel.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Panels/FlexPanel.vue b/client/src/components/Panels/FlexPanel.vue
index 011bdc0ef5f..cf4d108fba4 100644
--- a/client/src/components/Panels/FlexPanel.vue
+++ b/client/src/components/Panels/FlexPanel.vue
@@ -69,7 +69,7 @@ function toggle() {
             <div
                 v-if="side === 'right'"
                 class="flex-panel-footer d-flex px-2 p-1"
-                :class="{ 'flex-panel-border': !show }">
+                :class="{ 'flex-panel-border-right': !show }">
                 <div v-if="show">
                     <font-awesome-icon icon="grip-lines-vertical" />
                     <div
@@ -87,7 +87,7 @@ function toggle() {
                     <div class="interaction-area" @click="toggle" />
                 </div>
             </div>
-            <div v-else class="flex-panel-footer d-flex px-2 p-1" :class="{ 'flex-panel-border': !show }">
+            <div v-else class="flex-panel-footer d-flex px-2 p-1" :class="{ 'flex-panel-border-left': !show }">
                 <div v-if="collapsible">
                     <font-awesome-icon v-if="show" class="cursor-pointer increase-area" icon="chevron-left" />
                     <font-awesome-icon v-else class="cursor-pointer increase-area" icon="chevron-right" />
@@ -118,7 +118,11 @@ function toggle() {
 .cursor-grabbing {
     cursor: grabbing;
 }
-.flex-panel-border {
+.flex-panel-border-left {
+    border: $border-default;
+    border-top-right-radius: $border-radius-base;
+}
+.flex-panel-border-right {
     border: $border-default;
     border-top-left-radius: $border-radius-base;
 }

From 183b05a2135f1c1a305cd3af44a1999a3274c6ad Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 17 Apr 2023 11:38:26 +0300
Subject: [PATCH 18/35] Only show expand toggle button when collapsed, fix
 cursor handling

---
 client/src/components/Panels/FlexPanel.vue | 57 +++++++++++++---------
 1 file changed, 35 insertions(+), 22 deletions(-)

diff --git a/client/src/components/Panels/FlexPanel.vue b/client/src/components/Panels/FlexPanel.vue
index cf4d108fba4..c8704245c8b 100644
--- a/client/src/components/Panels/FlexPanel.vue
+++ b/client/src/components/Panels/FlexPanel.vue
@@ -62,15 +62,11 @@ function toggle() {
 </script>
 
 <template>
-    <div ref="root" class="d-flex">
+    <div v-if="show" ref="root" class="d-flex">
         <div class="d-flex flex-column" :style="style">
-            <slot v-if="show" />
-            <div v-else class="flex-fill" />
-            <div
-                v-if="side === 'right'"
-                class="flex-panel-footer d-flex px-2 p-1"
-                :class="{ 'flex-panel-border-right': !show }">
-                <div v-if="show">
+            <slot />
+            <div v-if="side === 'right'" class="flex-panel-footer d-flex px-2 py-1">
+                <div>
                     <font-awesome-icon icon="grip-lines-vertical" />
                     <div
                         ref="draggable"
@@ -81,20 +77,18 @@ function toggle() {
                         }" />
                 </div>
                 <div class="flex-fill" />
-                <div v-if="collapsible">
-                    <font-awesome-icon v-if="show" class="cursor-pointer increase-area" icon="chevron-right" />
-                    <font-awesome-icon v-else class="cursor-pointer increase-area" icon="chevron-left" />
+                <div v-if="collapsible" class="cursor-pointer">
+                    <font-awesome-icon icon="chevron-right" />
                     <div class="interaction-area" @click="toggle" />
                 </div>
             </div>
-            <div v-else class="flex-panel-footer d-flex px-2 p-1" :class="{ 'flex-panel-border-left': !show }">
-                <div v-if="collapsible">
-                    <font-awesome-icon v-if="show" class="cursor-pointer increase-area" icon="chevron-left" />
-                    <font-awesome-icon v-else class="cursor-pointer increase-area" icon="chevron-right" />
+            <div v-else class="flex-panel-footer d-flex px-2 py-1">
+                <div v-if="collapsible" class="cursor-pointer">
+                    <font-awesome-icon icon="chevron-left" />
                     <div class="interaction-area" @click="toggle" />
                 </div>
                 <div class="flex-fill" />
-                <div v-if="show">
+                <div>
                     <font-awesome-icon icon="grip-lines-vertical" />
                     <div
                         ref="draggable"
@@ -108,6 +102,16 @@ function toggle() {
         </div>
         <div v-if="isDragging" class="interaction-overlay" />
     </div>
+    <div v-else>
+        <div v-if="side === 'right'" class="flex-panel-expand-right cursor-pointer px-2 py-1">
+            <font-awesome-icon icon="chevron-left" />
+            <div class="interaction-area" @click="toggle" />
+        </div>
+        <div v-else class="flex-panel-expand-left cursor-pointer px-2 py-1">
+            <font-awesome-icon icon="chevron-right" />
+            <div class="interaction-area" @click="toggle" />
+        </div>
+    </div>
 </template>
 
 <style>
@@ -118,13 +122,22 @@ function toggle() {
 .cursor-grabbing {
     cursor: grabbing;
 }
-.flex-panel-border-left {
+.flex-panel-expand {
+    background: $panel-footer-bg-color;
     border: $border-default;
-    border-top-right-radius: $border-radius-base;
+    bottom: 0;
+    position: absolute;
+    z-index: 1;
 }
-.flex-panel-border-right {
-    border: $border-default;
+.flex-panel-expand-left {
+    @extend .flex-panel-expand;
+    border-top-right-radius: $border-radius-base;
+    left: 0;
+}
+.flex-panel-expand-right {
+    @extend .flex-panel-expand;
     border-top-left-radius: $border-radius-base;
+    right: 0;
 }
 .flex-panel-footer {
     background: $panel-footer-bg-color;
@@ -133,12 +146,12 @@ function toggle() {
     margin: -1.5rem;
     padding: 1.5rem;
     position: absolute;
-    z-index: 1;
+    z-index: 2;
 }
 .interaction-overlay {
+    height: 100%;
     position: fixed;
     left: 0;
     width: 100%;
-    height: 100%;
 }
 </style>

From 3b345e0f191f8faa25d4c29837ae95e081db7396 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 17 Apr 2023 11:55:10 +0300
Subject: [PATCH 19/35] Remove debug test statement

---
 client/src/entry/analysis/modules/Login.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/entry/analysis/modules/Login.vue b/client/src/entry/analysis/modules/Login.vue
index b7913f7acbf..e3581f5d888 100644
--- a/client/src/entry/analysis/modules/Login.vue
+++ b/client/src/entry/analysis/modules/Login.vue
@@ -16,7 +16,7 @@
             :registration-warning-message="config.registration_warning_message"
             :server-mail-configured="config.server_mail_configured"
             :session-csrf-token="sessionCsrfToken"
-            :show-welcome-with-login="!config.show_welcome_with_login"
+            :show-welcome-with-login="config.show_welcome_with_login"
             :terms-url="config.terms_url"
             :welcome-url="config.welcome_url" />
     </div>

From ba0e0cd6b97344adf549741622bf2ca7c7b65594 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 17 Apr 2023 12:05:36 +0300
Subject: [PATCH 20/35] Fix localize and spacing in login page link

---
 client/src/components/Login/RegisterForm.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Login/RegisterForm.vue b/client/src/components/Login/RegisterForm.vue
index 1cac50f5cf0..bd6bcb101f4 100644
--- a/client/src/components/Login/RegisterForm.vue
+++ b/client/src/components/Login/RegisterForm.vue
@@ -60,8 +60,8 @@
                                 >
                             </b-card-body>
                         </b-collapse>
-                        <b-card-footer v-if="showLoginLink" v-localize>
-                            Already have an account?
+                        <b-card-footer v-if="showLoginLink">
+                            <span v-localize>Already have an account?</span>
                             <a
                                 id="login-toggle"
                                 v-localize

From fdf46d9f60227a765d110c7c5a74570ed0f34ebd Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 17 Apr 2023 19:16:58 +0300
Subject: [PATCH 21/35] Add proper id tags to navigation shim

---
 client/src/components/Panels/FlexPanel.vue | 24 +++++++++++-----------
 client/src/utils/navigation/navigation.yml |  8 ++++----
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/client/src/components/Panels/FlexPanel.vue b/client/src/components/Panels/FlexPanel.vue
index c8704245c8b..bf484be3e8f 100644
--- a/client/src/components/Panels/FlexPanel.vue
+++ b/client/src/components/Panels/FlexPanel.vue
@@ -62,11 +62,11 @@ function toggle() {
 </script>
 
 <template>
-    <div v-if="show" ref="root" class="d-flex">
+    <div v-if="show" :id="side" ref="root" class="d-flex">
         <div class="d-flex flex-column" :style="style">
             <slot />
             <div v-if="side === 'right'" class="flex-panel-footer d-flex px-2 py-1">
-                <div>
+                <div id="right-drag">
                     <font-awesome-icon icon="grip-lines-vertical" />
                     <div
                         ref="draggable"
@@ -77,18 +77,18 @@ function toggle() {
                         }" />
                 </div>
                 <div class="flex-fill" />
-                <div v-if="collapsible" class="cursor-pointer">
+                <div v-if="collapsible" id="right-collapse" class="cursor-pointer">
                     <font-awesome-icon icon="chevron-right" />
                     <div class="interaction-area" @click="toggle" />
                 </div>
             </div>
             <div v-else class="flex-panel-footer d-flex px-2 py-1">
-                <div v-if="collapsible" class="cursor-pointer">
+                <div v-if="collapsible" id="left-collapse" class="cursor-pointer">
                     <font-awesome-icon icon="chevron-left" />
                     <div class="interaction-area" @click="toggle" />
                 </div>
                 <div class="flex-fill" />
-                <div>
+                <div id="left-drag">
                     <font-awesome-icon icon="grip-lines-vertical" />
                     <div
                         ref="draggable"
@@ -103,11 +103,11 @@ function toggle() {
         <div v-if="isDragging" class="interaction-overlay" />
     </div>
     <div v-else>
-        <div v-if="side === 'right'" class="flex-panel-expand-right cursor-pointer px-2 py-1">
+        <div v-if="side === 'right'" id="right-expand" class="flex-panel-right-expand cursor-pointer px-2 py-1">
             <font-awesome-icon icon="chevron-left" />
             <div class="interaction-area" @click="toggle" />
         </div>
-        <div v-else class="flex-panel-expand-left cursor-pointer px-2 py-1">
+        <div v-else id="left-expand" class="flex-panel-left-expand cursor-pointer px-2 py-1">
             <font-awesome-icon icon="chevron-right" />
             <div class="interaction-area" @click="toggle" />
         </div>
@@ -129,19 +129,19 @@ function toggle() {
     position: absolute;
     z-index: 1;
 }
-.flex-panel-expand-left {
+.flex-panel-footer {
+    background: $panel-footer-bg-color;
+}
+.flex-panel-left-expand {
     @extend .flex-panel-expand;
     border-top-right-radius: $border-radius-base;
     left: 0;
 }
-.flex-panel-expand-right {
+.flex-panel-right-expand {
     @extend .flex-panel-expand;
     border-top-left-radius: $border-radius-base;
     right: 0;
 }
-.flex-panel-footer {
-    background: $panel-footer-bg-color;
-}
 .interaction-area {
     margin: -1.5rem;
     padding: 1.5rem;
diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 93776bf1cac..b1eab9f93bd 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -12,10 +12,10 @@ _:  # global stuff
     editable_text: '.editable-text'
     tooltip_balloon: '.tooltip'
     tooltip_inner: .tooltip-inner
-    left_panel_drag: '#left > .unified-panel-footer > .drag'
-    left_panel_collapse: '#left > .unified-panel-footer > .panel-collapse'
-    right_panel_drag: '#right > .unified-panel-footer > .drag'
-    right_panel_collapse: '#right > .unified-panel-footer > .panel-collapse'
+    left_panel_drag: '#left-drag'
+    left_panel_collapse: '#left-collapse'
+    right_panel_drag: '#right-drag'
+    right_panel_collapse: '#right-collapse'
     by_attribute: '${scope} [${name}="${value}"]'
 
   messages:

From 3748aef6bcfad78962fb2214e02de5779d101833 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 17 Apr 2023 19:27:31 +0300
Subject: [PATCH 22/35] Update id identifier in tour

---
 config/plugins/tours/core.galaxy_ui.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config/plugins/tours/core.galaxy_ui.yaml b/config/plugins/tours/core.galaxy_ui.yaml
index 0169c5cd4fe..24f8b9c3bdc 100644
--- a/config/plugins/tours/core.galaxy_ui.yaml
+++ b/config/plugins/tours/core.galaxy_ui.yaml
@@ -118,7 +118,7 @@ steps:
       intro: "By clicking the reload button, you can re-run your tool again (e.g. with different parameters or on another dataset)."
 
     - title: "Panel collapse"
-      element: "#left > div.unified-panel-footer > div.panel-collapse.left"
+      element: "#left-collapse"
       intro: "To extend the view for your main Galaxy page in the middle, you can collapse the tool panel on the left hand side. Clicking the panel arrow on the right hand side, collapses the history."
       postclick: true
 

From bb3805684f30807a8b48fe99f05fcc91cd9dd726 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 17 Apr 2023 19:35:20 +0300
Subject: [PATCH 23/35] Disable tour scrolling, causes whole screen to shift

---
 client/src/components/Tour/TourStep.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/client/src/components/Tour/TourStep.vue b/client/src/components/Tour/TourStep.vue
index a3107060172..0e55e653eb1 100644
--- a/client/src/components/Tour/TourStep.vue
+++ b/client/src/components/Tour/TourStep.vue
@@ -53,7 +53,6 @@ export default {
     methods: {
         createStep() {
             if (this.targetElement) {
-                this.targetElement.scrollIntoView({ behavior: "smooth" });
                 createPopper(this.targetElement, this.$refs["tour-element"], {
                     modifiers: [
                         {

From c7b9fd64aa6c3bc2ee2a52762425150a1d0006b4 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 17 Apr 2023 19:43:16 +0300
Subject: [PATCH 24/35] Fix typo in deferred tours `expand`

---
 config/plugins/tours/core.deferred.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/config/plugins/tours/core.deferred.yaml b/config/plugins/tours/core.deferred.yaml
index 56caba6767e..b3d80b40660 100644
--- a/config/plugins/tours/core.deferred.yaml
+++ b/config/plugins/tours/core.deferred.yaml
@@ -65,7 +65,7 @@ steps:
 
     - title: State Indicator
       component: history_panel.item(hid=1,state=deferred).state_icon
-      intro: This cloud icon indicates the dataset is deferred. Click to exapnd the dataset.
+      intro: This cloud icon indicates the dataset is deferred. Click to expand the dataset.
       postclick: true
 
     - title: A Note About Datatype/Format

From 605ad3100d588e079321cc10a3c2ce175bc3dc71 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 17 Apr 2023 19:59:20 +0300
Subject: [PATCH 25/35] Remove redundant id tags

---
 client/src/components/Markdown/MarkdownEditor.vue | 2 +-
 client/src/components/Workflow/Editor/Index.vue   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Markdown/MarkdownEditor.vue b/client/src/components/Markdown/MarkdownEditor.vue
index 569f1814865..cbdc82b278d 100644
--- a/client/src/components/Markdown/MarkdownEditor.vue
+++ b/client/src/components/Markdown/MarkdownEditor.vue
@@ -1,6 +1,6 @@
 <template>
     <div id="columns" class="d-flex">
-        <FlexPanel id="left" side="left">
+        <FlexPanel side="left">
             <MarkdownToolBox :steps="steps" @onInsert="onInsert" />
         </FlexPanel>
         <div id="center" class="overflow-auto w-100">
diff --git a/client/src/components/Workflow/Editor/Index.vue b/client/src/components/Workflow/Editor/Index.vue
index 35b0d03aa92..2cff63b6490 100644
--- a/client/src/components/Workflow/Editor/Index.vue
+++ b/client/src/components/Workflow/Editor/Index.vue
@@ -26,7 +26,7 @@
                 <b-form-textarea v-model="saveAsAnnotation" />
             </b-form-group>
         </b-modal>
-        <FlexPanel id="left" side="left">
+        <FlexPanel side="left">
             <ProviderAwareToolBoxWorkflow
                 :module-sections="moduleSections"
                 :data-managers="dataManagers"
@@ -62,7 +62,7 @@
                 @onUpdateStepPosition="onUpdateStepPosition">
             </workflow-graph>
         </div>
-        <FlexPanel id="right" side="right">
+        <FlexPanel side="right">
             <div class="unified-panel workflow-panel">
                 <div class="unified-panel-header" unselectable="on">
                     <div class="unified-panel-header-inner">

From db89d8fbd113a3ce569cec92c5a1867570a1999b Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 17 Apr 2023 20:21:33 +0300
Subject: [PATCH 26/35] Fix panel collapse and expansion targets, add tour step

---
 client/src/components/Panels/FlexPanel.vue | 16 ++++++++--------
 config/plugins/tours/core.galaxy_ui.yaml   |  5 +++++
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/client/src/components/Panels/FlexPanel.vue b/client/src/components/Panels/FlexPanel.vue
index bf484be3e8f..03a127618fd 100644
--- a/client/src/components/Panels/FlexPanel.vue
+++ b/client/src/components/Panels/FlexPanel.vue
@@ -77,15 +77,15 @@ function toggle() {
                         }" />
                 </div>
                 <div class="flex-fill" />
-                <div v-if="collapsible" id="right-collapse" class="cursor-pointer">
+                <div v-if="collapsible" class="cursor-pointer">
                     <font-awesome-icon icon="chevron-right" />
-                    <div class="interaction-area" @click="toggle" />
+                    <div id="right-collapse" class="interaction-area" @click="toggle" />
                 </div>
             </div>
             <div v-else class="flex-panel-footer d-flex px-2 py-1">
-                <div v-if="collapsible" id="left-collapse" class="cursor-pointer">
+                <div v-if="collapsible" class="cursor-pointer">
                     <font-awesome-icon icon="chevron-left" />
-                    <div class="interaction-area" @click="toggle" />
+                    <div id="left-collapse" class="interaction-area" @click="toggle" />
                 </div>
                 <div class="flex-fill" />
                 <div id="left-drag">
@@ -103,13 +103,13 @@ function toggle() {
         <div v-if="isDragging" class="interaction-overlay" />
     </div>
     <div v-else>
-        <div v-if="side === 'right'" id="right-expand" class="flex-panel-right-expand cursor-pointer px-2 py-1">
+        <div v-if="side === 'right'" class="flex-panel-right-expand cursor-pointer px-2 py-1">
             <font-awesome-icon icon="chevron-left" />
-            <div class="interaction-area" @click="toggle" />
+            <div id="right-expand" class="interaction-area" @click="toggle" />
         </div>
-        <div v-else id="left-expand" class="flex-panel-left-expand cursor-pointer px-2 py-1">
+        <div v-else class="flex-panel-left-expand cursor-pointer px-2 py-1">
             <font-awesome-icon icon="chevron-right" />
-            <div class="interaction-area" @click="toggle" />
+            <div id="left-expand" class="interaction-area" @click="toggle" />
         </div>
     </div>
 </template>
diff --git a/config/plugins/tours/core.galaxy_ui.yaml b/config/plugins/tours/core.galaxy_ui.yaml
index 24f8b9c3bdc..6a3a80238bb 100644
--- a/config/plugins/tours/core.galaxy_ui.yaml
+++ b/config/plugins/tours/core.galaxy_ui.yaml
@@ -122,6 +122,11 @@ steps:
       intro: "To extend the view for your main Galaxy page in the middle, you can collapse the tool panel on the left hand side. Clicking the panel arrow on the right hand side, collapses the history."
       postclick: true
 
+    - title: "Panel expand"
+      element: "#left-expand"
+      intro: "Click on the expansion icon to restore the panel."
+      postclick: true
+
     - title: "Top panel"
       element: "#masthead"
       intro: "The top panel will give you access to a lot of useful things."

From fc94e2d186994b1ffad0f7aecc412fe8c2dd78e8 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 17 Apr 2023 20:55:29 +0300
Subject: [PATCH 27/35] Add an additional tour step to test/demonstrate the
 right panel collapse/expansion handling

---
 config/plugins/tours/core.galaxy_ui.yaml | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/config/plugins/tours/core.galaxy_ui.yaml b/config/plugins/tours/core.galaxy_ui.yaml
index 6a3a80238bb..917054d6143 100644
--- a/config/plugins/tours/core.galaxy_ui.yaml
+++ b/config/plugins/tours/core.galaxy_ui.yaml
@@ -119,7 +119,7 @@ steps:
 
     - title: "Panel collapse"
       element: "#left-collapse"
-      intro: "To extend the view for your main Galaxy page in the middle, you can collapse the tool panel on the left hand side. Clicking the panel arrow on the right hand side, collapses the history."
+      intro: "To extend the view for your main Galaxy page in the middle, you can collapse the tool panel on the left hand side."
       postclick: true
 
     - title: "Panel expand"
@@ -127,6 +127,16 @@ steps:
       intro: "Click on the expansion icon to restore the panel."
       postclick: true
 
+    - title: "Panel collapse"
+      element: "#right-collapse"
+      intro: "Clicking the panel arrow on the right hand side, collapses the history."
+      postclick: true
+
+    - title: "Panel expand"
+      element: "#right-expand"
+      intro: "Click on the expansion icon to restore the panel."
+      postclick: true
+
     - title: "Top panel"
       element: "#masthead"
       intro: "The top panel will give you access to a lot of useful things."

From d4789c8b63d8044952968c5d2584a723f48db584 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 17 Apr 2023 21:18:52 +0300
Subject: [PATCH 28/35] Add tests to evaluate panel width calculation

---
 client/src/components/Panels/FlexPanel.vue    | 33 ++++++++++---------
 client/src/components/Panels/utilities.js     | 13 ++++++++
 .../src/components/Panels/utilities.test.js   | 18 ++++++++--
 3 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/client/src/components/Panels/FlexPanel.vue b/client/src/components/Panels/FlexPanel.vue
index 03a127618fd..361327e4615 100644
--- a/client/src/components/Panels/FlexPanel.vue
+++ b/client/src/components/Panels/FlexPanel.vue
@@ -5,6 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { faChevronLeft, faChevronRight, faGripLinesVertical } from "@fortawesome/free-solid-svg-icons";
 import { useDraggable } from "@vueuse/core";
 import { LastQueue } from "utils/promise-queue";
+import { determineWidth } from "./utilities";
 
 const lastQueue = new LastQueue(10);
 
@@ -36,22 +37,6 @@ const { position, isDragging } = useDraggable(draggable, {
     exact: true,
 });
 
-watch(position, () => {
-    lastQueue.enqueue(() => {
-        const rectRoot = root.value.getBoundingClientRect();
-        const rectDraggable = draggable.value.getBoundingClientRect();
-        let newWidth = null;
-        if (props.side === "right") {
-            const offset = rectRoot.left - rectDraggable.left;
-            newWidth = rectRoot.right - position.value.x - offset;
-        } else {
-            const offset = rectRoot.right - rectDraggable.left;
-            newWidth = position.value.x - rectRoot.left + offset;
-        }
-        panelWidth.value = Math.max(rangeWidth[0], Math.min(rangeWidth[2], newWidth));
-    });
-});
-
 const style = computed(() => {
     return show.value ? { width: `${panelWidth.value}px` } : null;
 });
@@ -59,6 +44,22 @@ const style = computed(() => {
 function toggle() {
     show.value = !show.value;
 }
+
+/** Watch position changes and adjust width accordingly */
+watch(position, () => {
+    lastQueue.enqueue(() => {
+        const rectRoot = root.value.getBoundingClientRect();
+        const rectDraggable = draggable.value.getBoundingClientRect();
+        panelWidth.value = determineWidth(
+            rectRoot,
+            rectDraggable,
+            rangeWidth[0],
+            rangeWidth[2],
+            props.side,
+            position.value.x
+        );
+    });
+});
 </script>
 
 <template>
diff --git a/client/src/components/Panels/utilities.js b/client/src/components/Panels/utilities.js
index 2002922f037..cba1ce59364 100644
--- a/client/src/components/Panels/utilities.js
+++ b/client/src/components/Panels/utilities.js
@@ -48,6 +48,19 @@ export function createWhooshQuery(filterSettings, panelView, toolbox) {
     return query;
 }
 
+// Determines width given the root and draggable element, smallest and largest size and the current position
+export function determineWidth(rectRoot, rectDraggable, minWidth, maxWidth, direction, positionX) {
+    let newWidth = null;
+    if (direction === "right") {
+        const offset = rectRoot.left - rectDraggable.left;
+        newWidth = rectRoot.right - positionX - offset;
+    } else {
+        const offset = rectRoot.right - rectDraggable.left;
+        newWidth = positionX - rectRoot.left + offset;
+    }
+    return Math.max(minWidth, Math.min(maxWidth, newWidth));
+}
+
 // Given toolbox and search results, returns filtered tool results
 export function filterTools(tools, results) {
     let toolsResults = [];
diff --git a/client/src/components/Panels/utilities.test.js b/client/src/components/Panels/utilities.test.js
index 9c8cb662781..3203e49a956 100644
--- a/client/src/components/Panels/utilities.test.js
+++ b/client/src/components/Panels/utilities.test.js
@@ -1,7 +1,21 @@
 import toolsList from "components/ToolsView/testData/toolsList";
-import { createWhooshQuery, filterTools, filterToolSections, normalizeTools, searchToolsByKeys } from "./utilities";
+import {
+    createWhooshQuery,
+    determineWidth,
+    filterTools,
+    filterToolSections,
+    normalizeTools,
+    searchToolsByKeys,
+} from "./utilities";
+
+describe("test helpers in tool searching utilities and panel handling", () => {
+    it("panel width determination", () => {
+        const widthA = determineWidth({ left: 10, right: 200 }, { left: 90 }, 20, 200, "right", 160);
+        expect(widthA).toBe(120);
+        const widthB = determineWidth({ left: 30, right: 250 }, { left: 60 }, 30, 500, "left", 180);
+        expect(widthB).toBe(340);
+    });
 
-describe("test helpers in tool searching utilities", () => {
     it("test parsing helper that converts settings to whoosh query", async () => {
         const settings = {
             name: "Filter",

From ec255b7504183c003d859282dc1e1edb78870096 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 17 Apr 2023 21:34:28 +0300
Subject: [PATCH 29/35] Remove legacy .center-panel element target for
 scrolling from code base

---
 client/src/components/Form/FormDisplay.vue | 2 +-
 client/src/components/Form/FormGeneric.vue | 2 +-
 client/src/components/Tool/ToolForm.vue    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Form/FormDisplay.vue b/client/src/components/Form/FormDisplay.vue
index 31d209317f4..0a16d28060b 100644
--- a/client/src/components/Form/FormDisplay.vue
+++ b/client/src/components/Form/FormDisplay.vue
@@ -193,7 +193,7 @@ export default {
                 if (!silent && inputId) {
                     const element = this.$el.querySelector(`[id='form-element-${inputId}']`);
                     if (element) {
-                        const centerPanel = document.querySelector(".center-panel");
+                        const centerPanel = document.querySelector("#center");
                         if (centerPanel) {
                             centerPanel.scrollTo(0, this.getOffsetTop(element));
                         }
diff --git a/client/src/components/Form/FormGeneric.vue b/client/src/components/Form/FormGeneric.vue
index be8ff3124b4..61c821006fc 100644
--- a/client/src/components/Form/FormGeneric.vue
+++ b/client/src/components/Form/FormGeneric.vue
@@ -132,7 +132,7 @@ export default {
         showMessage(message, variant = "success") {
             this.messageText = message;
             this.messageVariant = variant;
-            document.querySelector(".center-panel").scrollTop = 0;
+            document.querySelector("#center").scrollTop = 0;
         },
     },
 };
diff --git a/client/src/components/Tool/ToolForm.vue b/client/src/components/Tool/ToolForm.vue
index 6e87b9d435e..170e18f81cd 100644
--- a/client/src/components/Tool/ToolForm.vue
+++ b/client/src/components/Tool/ToolForm.vue
@@ -360,7 +360,7 @@ export default {
                         if ([true, "true"].includes(config.enable_tool_recommendations)) {
                             this.showRecommendation = true;
                         }
-                        document.querySelector(".center-panel").scrollTop = 0;
+                        document.querySelector("#center").scrollTop = 0;
                     }
                 },
                 (e) => {

From 8e4a7e187775a6cb8ce778ec4d9edfdc0fb4fb84 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 17 Apr 2023 21:39:25 +0300
Subject: [PATCH 30/35] Add margin to scroll helper to improve error
 highlighting

---
 client/src/components/Form/FormDisplay.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Form/FormDisplay.vue b/client/src/components/Form/FormDisplay.vue
index 0a16d28060b..eebccffebb9 100644
--- a/client/src/components/Form/FormDisplay.vue
+++ b/client/src/components/Form/FormDisplay.vue
@@ -195,7 +195,7 @@ export default {
                     if (element) {
                         const centerPanel = document.querySelector("#center");
                         if (centerPanel) {
-                            centerPanel.scrollTo(0, this.getOffsetTop(element));
+                            centerPanel.scrollTo(0, this.getOffsetTop(element) - 50);
                         }
                     }
                 }

From 954b3171e7783c6de9503602871c46c65e89eeb6 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Mon, 17 Apr 2023 21:56:20 +0300
Subject: [PATCH 31/35] Verify config availability before rendering admin panel

---
 client/src/entry/analysis/modules/Admin.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/entry/analysis/modules/Admin.vue b/client/src/entry/analysis/modules/Admin.vue
index cec15a5ca87..658250404fc 100644
--- a/client/src/entry/analysis/modules/Admin.vue
+++ b/client/src/entry/analysis/modules/Admin.vue
@@ -4,7 +4,7 @@ import { useConfig } from "@/composables/config";
 import AdminPanel from "@/components/admin/AdminPanel.vue";
 import FlexPanel from "@/components/Panels/FlexPanel.vue";
 
-const { config } = useConfig();
+const { config, isLoaded } = useConfig();
 
 const panelProperties = computed(() => {
     return {
@@ -16,7 +16,7 @@ const panelProperties = computed(() => {
 </script>
 
 <template>
-    <div id="columns" class="d-flex">
+    <div v-if="isLoaded" id="columns" class="d-flex">
         <FlexPanel side="left">
             <AdminPanel v-bind="panelProperties" />
         </FlexPanel>

From 66ec23187cfa41272a2da8e69a3611ad3bbd2317 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 20 Apr 2023 15:07:37 +0300
Subject: [PATCH 32/35] Fix legacy toolshed view

---
 lib/tool_shed/webapp/templates/base/base_panels.mako | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/tool_shed/webapp/templates/base/base_panels.mako b/lib/tool_shed/webapp/templates/base/base_panels.mako
index b36491f8f84..b1d35ccc670 100644
--- a/lib/tool_shed/webapp/templates/base/base_panels.mako
+++ b/lib/tool_shed/webapp/templates/base/base_panels.mako
@@ -171,7 +171,7 @@
 
             ${self.overlay(visible=self.overlay_visible)}
 
-            <div id="columns">
+            <div id="columns" class="d-flex">
                 %if self.has_left_panel:
                     <div id="left">
                         ${self.left_panel()}

From 8f581a3dfb4f151ccd841a8f433d9bab36c64627 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 20 Apr 2023 15:21:35 +0300
Subject: [PATCH 33/35] Additional fixes for the toolshed view, remove unused
 right panel

---
 .../webapp/templates/base/base_panels.mako     | 18 ++++--------------
 lib/tool_shed/webapp/templates/message.mako    |  1 -
 .../webapps/tool_shed/admin/index.mako         |  3 +--
 .../templates/webapps/tool_shed/index.mako     |  3 +--
 .../webapps/tool_shed/user/login.mako          |  1 -
 .../webapps/tool_shed/user/logout.mako         |  1 -
 .../webapps/tool_shed/user/register.mako       |  1 -
 7 files changed, 6 insertions(+), 22 deletions(-)

diff --git a/lib/tool_shed/webapp/templates/base/base_panels.mako b/lib/tool_shed/webapp/templates/base/base_panels.mako
index b1d35ccc670..2a42feccba7 100644
--- a/lib/tool_shed/webapp/templates/base/base_panels.mako
+++ b/lib/tool_shed/webapp/templates/base/base_panels.mako
@@ -3,7 +3,6 @@
 
 <%
     self.has_left_panel = hasattr( self, 'left_panel' )
-    self.has_right_panel = hasattr( self, 'right_panel' )
     self.message_box_visible = app.config.message_box_visible
     self.show_inactivity_warning = False
     self.overlay_visible=False
@@ -179,22 +178,13 @@
                             <div id="left-panel-collapse" class="panel-collapse left"></div>
                             <div id="left-panel-drag" class="drag"></div>
                         </div>
-                    </div><!--end left-->
+                    </div>
                 %endif
                 <div id="center" class="inbound">
                     ${self.center_panel()}
-                </div><!--end center-->
-                %if self.has_right_panel:
-                    <div id="right">
-                        ${self.right_panel()}
-                        <div class="unified-panel-footer">
-                            <div id="right-panel-collapse" class="panel-collapse right"></div>
-                            <div id="right-panel-drag" class="drag"></div>
-                        </div>
-                    </div><!--end right-->
-                %endif
-            </div><!--end columns-->
-        </div><!--end everything-->
+                </div>
+            </div>
+        </div>
 
         <div id='dd-helper' style="display: none;"></div>
         ## Allow other body level elements
diff --git a/lib/tool_shed/webapp/templates/message.mako b/lib/tool_shed/webapp/templates/message.mako
index b2aca8d0199..f3a77429b05 100644
--- a/lib/tool_shed/webapp/templates/message.mako
+++ b/lib/tool_shed/webapp/templates/message.mako
@@ -22,7 +22,6 @@
 <%def name="init()">
 <%
     self.has_left_panel=False
-    self.has_right_panel=False
     self.active_view=active_view
     self.message_box_visible=False
 %>
diff --git a/lib/tool_shed/webapp/templates/webapps/tool_shed/admin/index.mako b/lib/tool_shed/webapp/templates/webapps/tool_shed/admin/index.mako
index fdd53b539f9..cb7bc6c479a 100644
--- a/lib/tool_shed/webapp/templates/webapps/tool_shed/admin/index.mako
+++ b/lib/tool_shed/webapp/templates/webapps/tool_shed/admin/index.mako
@@ -18,7 +18,6 @@
     ${parent.init()}
     <%
         self.has_left_panel=True
-        self.has_right_panel=False
         self.active_view="tools"
     %>
     %if trans.app.config.require_login and not trans.user:
@@ -102,5 +101,5 @@
     <%
         center_url = h.url_for(controller='admin', action='center' )
     %>
-    <iframe name="galaxy_main" id="galaxy_main" frameborder="0" style="position: absolute; width: 100%; height: 100%;" src="${center_url}"> </iframe>
+    <iframe name="galaxy_main" id="galaxy_main" frameborder="0" style="position: absolute; width: 75%; height: 100%;" src="${center_url}"> </iframe>
 </%def>
diff --git a/lib/tool_shed/webapp/templates/webapps/tool_shed/index.mako b/lib/tool_shed/webapp/templates/webapps/tool_shed/index.mako
index 7b3d776af14..e94f0e237b1 100644
--- a/lib/tool_shed/webapp/templates/webapps/tool_shed/index.mako
+++ b/lib/tool_shed/webapp/templates/webapps/tool_shed/index.mako
@@ -15,7 +15,6 @@
     ${parent.init()}
     <%
         self.has_left_panel=True
-        self.has_right_panel=False
         self.active_view="tools"
     %>
     %if trans.app.config.require_login and not trans.user:
@@ -158,5 +157,5 @@
         else:
             center_url = h.url_for( controller='repository', action='browse_categories', message=message, status=status )
     %>
-    <iframe name="galaxy_main" id="galaxy_main" frameborder="0" style="position: absolute; width: 100%; height: 100%;" src="${center_url}"></iframe>
+    <iframe name="galaxy_main" id="galaxy_main" frameborder="0" style="position: absolute; width: 75%; height: 100%;" src="${center_url}"></iframe>
 </%def>
diff --git a/lib/tool_shed/webapp/templates/webapps/tool_shed/user/login.mako b/lib/tool_shed/webapp/templates/webapps/tool_shed/user/login.mako
index 919d0e4b5d3..e2cc738402f 100644
--- a/lib/tool_shed/webapp/templates/webapps/tool_shed/user/login.mako
+++ b/lib/tool_shed/webapp/templates/webapps/tool_shed/user/login.mako
@@ -12,7 +12,6 @@ def inherit(context):
 <%def name="init()">
 <%
     self.has_left_panel=False
-    self.has_right_panel=False
     self.active_view=active_view
     self.message_box_visible=False
 %>
diff --git a/lib/tool_shed/webapp/templates/webapps/tool_shed/user/logout.mako b/lib/tool_shed/webapp/templates/webapps/tool_shed/user/logout.mako
index 5d388a2c241..28be45ce8d2 100644
--- a/lib/tool_shed/webapp/templates/webapps/tool_shed/user/logout.mako
+++ b/lib/tool_shed/webapp/templates/webapps/tool_shed/user/logout.mako
@@ -14,7 +14,6 @@ def inherit(context):
 <%def name="init()">
 <%
     self.has_left_panel=False
-    self.has_right_panel=False
     self.message_box_visible=False
     self.active_view="user"
     self.overlay_visible=False
diff --git a/lib/tool_shed/webapp/templates/webapps/tool_shed/user/register.mako b/lib/tool_shed/webapp/templates/webapps/tool_shed/user/register.mako
index e6e4fd01a87..af1137040e9 100644
--- a/lib/tool_shed/webapp/templates/webapps/tool_shed/user/register.mako
+++ b/lib/tool_shed/webapp/templates/webapps/tool_shed/user/register.mako
@@ -4,7 +4,6 @@
 <%def name="init()">
 <%
     self.has_left_panel=False
-    self.has_right_panel=False
     self.active_view="user"
     self.message_box_visible=False
 %>

From ca9aafdd3501bf06af8abe9ded6a7a22ee33973e Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 20 Apr 2023 15:26:46 +0300
Subject: [PATCH 34/35] Add padding to toolshed side panel, continue decoupling
 from global styles

---
 lib/tool_shed/webapp/templates/base/base_panels.mako          | 4 ----
 .../webapp/templates/webapps/tool_shed/admin/index.mako       | 2 +-
 lib/tool_shed/webapp/templates/webapps/tool_shed/index.mako   | 2 +-
 3 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/lib/tool_shed/webapp/templates/base/base_panels.mako b/lib/tool_shed/webapp/templates/base/base_panels.mako
index 2a42feccba7..39af7517f31 100644
--- a/lib/tool_shed/webapp/templates/base/base_panels.mako
+++ b/lib/tool_shed/webapp/templates/base/base_panels.mako
@@ -174,10 +174,6 @@
                 %if self.has_left_panel:
                     <div id="left">
                         ${self.left_panel()}
-                        <div class="unified-panel-footer">
-                            <div id="left-panel-collapse" class="panel-collapse left"></div>
-                            <div id="left-panel-drag" class="drag"></div>
-                        </div>
                     </div>
                 %endif
                 <div id="center" class="inbound">
diff --git a/lib/tool_shed/webapp/templates/webapps/tool_shed/admin/index.mako b/lib/tool_shed/webapp/templates/webapps/tool_shed/admin/index.mako
index cb7bc6c479a..0b7aa4bfe7e 100644
--- a/lib/tool_shed/webapp/templates/webapps/tool_shed/admin/index.mako
+++ b/lib/tool_shed/webapp/templates/webapps/tool_shed/admin/index.mako
@@ -33,7 +33,7 @@
     <div class="unified-panel-header" unselectable="on">
         <div class='unified-panel-header-inner'>Administration</div>
     </div>
-    <div class="unified-panel-body">
+    <div style="padding: 0.5rem;">
         <div class="toolMenu">
             <div class="toolSectionList">
                 <div class="toolSectionTitle">
diff --git a/lib/tool_shed/webapp/templates/webapps/tool_shed/index.mako b/lib/tool_shed/webapp/templates/webapps/tool_shed/index.mako
index e94f0e237b1..3edd24d5381 100644
--- a/lib/tool_shed/webapp/templates/webapps/tool_shed/index.mako
+++ b/lib/tool_shed/webapp/templates/webapps/tool_shed/index.mako
@@ -30,7 +30,7 @@
     <div class="unified-panel-header" unselectable="on">
         <div class='unified-panel-header-inner'>${trans.app.shed_counter.unique_valid_tools | h} valid tools on ${util.unicodify( trans.app.shed_counter.generation_time ) | h}</div>
     </div>
-    <div class="unified-panel-body">
+    <div style="padding: 0.5rem;">
         <div class="toolMenu">
             <div class="toolSectionList">
                 %if user_id or repository_id:

From c1ae0c420f8f12efa80c5c6892418b54bbf16dd4 Mon Sep 17 00:00:00 2001
From: guerler <aysam.guerler@gmail.com>
Date: Thu, 20 Apr 2023 17:30:18 +0300
Subject: [PATCH 35/35] Remove unused styles, adjust reports app

---
 client/src/style/scss/base.scss               | 78 -------------------
 client/src/style/scss/toolshed.scss           |  2 +-
 .../webapps/tool_shed/base_panels.mako        |  2 +-
 templates/base/base_panels.mako               | 28 +++----
 templates/webapps/reports/base_panels.mako    | 40 +++-------
 templates/webapps/reports/index.mako          |  4 +-
 6 files changed, 25 insertions(+), 129 deletions(-)

diff --git a/client/src/style/scss/base.scss b/client/src/style/scss/base.scss
index f2d7cf2a409..66a02c67ac5 100644
--- a/client/src/style/scss/base.scss
+++ b/client/src/style/scss/base.scss
@@ -84,7 +84,6 @@ body {
 }
 
 // ==== Page layout styles ====
-
 .full-content {
     @extend .m-0;
     @extend .p-0;
@@ -197,84 +196,8 @@ body {
     @extend .overflow-auto;
     flex: 1;
 }
-.unified-panel-body-background {
-    background: none repeat scroll 0 0 $panel-bg-color;
-}
-.unified-panel-footer {
-    @extend .unselectable;
-    position: relative;
-    height: $panel_footer_height;
-    line-height: $panel_footer_height;
-    width: 100%;
-    background: $panel-footer-bg-color;
-    color: $panel-header-text-color;
-    a {
-        color: $panel-header-text-color;
-    }
-    .drag {
-        position: absolute;
-        top: 0;
-        right: 0;
-        padding: 0 5px;
-        text-align: center;
-        height: $panel_footer_height;
-        width: $panel_footer_height - 5;
-        background-image: url(../../assets/images/visualization/draggable_horizontal.png);
-        background-repeat: no-repeat;
-        background-position: 50% 50%;
-        cursor: col-resize;
-    }
-}
-
-// Needs to be outside panel to show when hidden
-.panel-collapse {
-    @extend .fa;
-    $border-color: darken($panel-footer-bg-color, 20%);
-    font-size: 4/3em;
-    cursor: pointer;
-    display: block;
-    position: fixed;
-    text-align: center;
-    height: $panel_footer_height;
-    line-height: $panel_footer_height;
-    width: $panel_footer_height;
-    background: $panel-footer-bg-color;
-    border: solid $panel-footer-bg-color 1px;
-    z-index: 1;
-    &.right {
-        right: 0;
-        border-top-left-radius: $border-radius-base;
-        line-height: inherit;
-        &:before {
-            content: "\f054";
-        }
-        &.hidden:before {
-            content: "\f053";
-        }
-        &.hidden {
-            border-top-color: $border-color;
-            border-left-color: $border-color;
-        }
-    }
-    &.left {
-        left: 0;
-        border-top-right-radius: $border-radius-base;
-        line-height: inherit;
-        &:before {
-            content: "\f053";
-        }
-        &.hidden:before {
-            content: "\f054";
-        }
-        &.hidden {
-            border-top-color: $border-color;
-            border-right-color: $border-color;
-        }
-    }
-}
 
 // State colors
-
 $galaxy-state-border: (
     "new": $state-default-border,
     "upload": $state-info-border,
@@ -348,7 +271,6 @@ $galaxy-state-bg: (
 }
 
 // Button styles
-
 button {
     @extend .btn;
     @extend .btn-secondary;
diff --git a/client/src/style/scss/toolshed.scss b/client/src/style/scss/toolshed.scss
index 1be1c16cc9e..72a4c8b6885 100644
--- a/client/src/style/scss/toolshed.scss
+++ b/client/src/style/scss/toolshed.scss
@@ -20,7 +20,7 @@
     }
 }
 
-.masthead-toolshed {
+.masthead-simple {
     background-color: $brand-dark;
     height: $masthead-height;
     .navbar-brand {
diff --git a/lib/tool_shed/webapp/templates/webapps/tool_shed/base_panels.mako b/lib/tool_shed/webapp/templates/webapps/tool_shed/base_panels.mako
index ea8a4275604..fde88dc4aae 100644
--- a/lib/tool_shed/webapp/templates/webapps/tool_shed/base_panels.mako
+++ b/lib/tool_shed/webapp/templates/webapps/tool_shed/base_panels.mako
@@ -56,7 +56,7 @@
     %endif
 
     ## start main tag
-    <nav id="masthead" class="masthead-toolshed navbar navbar-expand navbar-fixed-top justify-content-center navbar-dark">
+    <nav id="masthead" class="masthead-simple navbar navbar-expand navbar-fixed-top justify-content-center navbar-dark">
 
         ## Logo, layered over tabs to be clickable
         <a href="${h.url_for( app.config.get( 'logo_url', '/' ) )}" aria-label="homepage" class="navbar-brand">
diff --git a/templates/base/base_panels.mako b/templates/base/base_panels.mako
index ea4410e0c2b..a84daac9eea 100644
--- a/templates/base/base_panels.mako
+++ b/templates/base/base_panels.mako
@@ -142,10 +142,8 @@
             <div id="background"></div>
             
             ## Layer iframes over backgrounds
-            <div id="masthead" class="navbar navbar-fixed-top navbar-inverse">
-                ${self.masthead()}
-            </div>
-            
+            ${self.masthead()}
+
             %if self.message_box_visible:
                 <div id="messagebox" class="alert alert-${app.config.message_box_class} rounded-0 m-0 p-2">
                     ${app.config.message_box_content}
@@ -160,30 +158,22 @@
             
             ${self.overlay(visible=self.overlay_visible)}
             
-            <div id="columns">
+            <div id="columns" class="d-flex">
                 %if self.has_left_panel:
-                    <div id="left">
+                    <div id="left" style="overflow: auto;">
                         ${self.left_panel()}
-                        <div class="unified-panel-footer">
-                            <div id="left-panel-collapse" class="panel-collapse left"></div>
-                            <div id="left-panel-drag" class="drag"></div>
-                        </div>
-                    </div><!--end left-->
+                    </div>
                 %endif
                 <div id="center" class="inbound">
                     ${self.center_panel()}
-                </div><!--end center-->
+                </div>
                 %if self.has_right_panel:
                     <div id="right">
                         ${self.right_panel()}
-                        <div class="unified-panel-footer">
-                            <div id="right-panel-collapse" class="panel-collapse right"></div>
-                            <div id="right-panel-drag" class="drag"></div>
-                        </div>
-                    </div><!--end right-->
+                    </div>
                 %endif
-            </div><!--end columns-->
-        </div><!--end everything-->
+            </div>
+        </div>
 
         <div id='dd-helper' style="display: none;"></div>
         ## Allow other body level elements
diff --git a/templates/webapps/reports/base_panels.mako b/templates/webapps/reports/base_panels.mako
index 5e4b8e7cb0b..42e7b96e4b5 100644
--- a/templates/webapps/reports/base_panels.mako
+++ b/templates/webapps/reports/base_panels.mako
@@ -17,32 +17,16 @@
 
 ## Masthead
 <%def name="masthead()">
-    ## Tab area, fills entire width
-    <div style="position: absolute; top: 0; left: 0; width: 100%; text-align: center">
-        <table class="tab-group" border="0" cellspacing="0" style="margin: auto;">
-            <tr>
-                <%def name="tab( id, display, href, target='_parent', visible=True, extra_class='' )">
-                    <%
-                    cls = "tab"
-                    if extra_class:
-                        cls += " " + extra_class
-                    if self.active_view == id:
-                        cls += " active"
-                    style = ""
-                    if not visible:
-                        style = "display: none;"
-                    %>
-                    <td class="${cls}" style="${style}"><a target="${target}" href="${href}">${display}</a></td>
-                </%def>
-            </tr>
-        </table>
-    </div>
-    ## Logo, layered over tabs to be clickable
-    <a class="navbar-brand" href="${h.url_for( app.config.get( 'logo_url', '/' ) )}">
-        <img class="navbar-brand-image" src="${h.url_for('/static/favicon.svg')}" />
-        <span class="navbar-brand-title">Galaxy Reports</span>
-        %if app.config.brand:
-            <span class='brand'>/ ${app.config.brand}</span>
-        %endif
-    </a>
+    <nav id="masthead" class="masthead-simple navbar navbar-expand navbar-fixed-top justify-content-center navbar-dark">
+        <a href="${h.url_for( app.config.get( 'logo_url', '/' ) )}" aria-label="homepage" class="navbar-brand">
+            <img alt="logo" class="navbar-brand-image" src="${h.url_for('/static/favicon.svg')}">
+            <span class="navbar-brand-title">
+                Reports
+                %if app.config.brand:
+                    / ${app.config.brand}
+                %endif
+            </span>
+        </a>
+         <ul class="navbar-nav"/>
+    </nav>
 </%def>
diff --git a/templates/webapps/reports/index.mako b/templates/webapps/reports/index.mako
index 4489864e802..fab0147712c 100644
--- a/templates/webapps/reports/index.mako
+++ b/templates/webapps/reports/index.mako
@@ -35,7 +35,7 @@
             </a>
         </div>
     </div>
-    <div class="unified-panel-body">
+    <div style="padding: 0.5rem;">
         <div class="toolMenu">
             <div class="toolSectionList">
                 <div class="toolSectionPad"></div>
@@ -121,5 +121,5 @@
 
 <%def name="center_panel()">
     <% center_url = h.url_for( controller='home', action='run_stats' ) %>
-    <iframe name="galaxy_main" id="galaxy_main" frameborder="0" style="position: absolute; width: 100%; height: 100%;" src="${center_url}"> </iframe>
+    <iframe name="galaxy_main" id="galaxy_main" frameborder="0" style="position: absolute; width: 75%; height: 100%;" src="${center_url}"> </iframe>
 </%def>