implements scrollable content panels #143 (#168)

archesproject · Jan 2, 2025 · 8e088a9 · 8e088a9
1 parent 98106bf
commit 8e088a9
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 5 deletions.
diff --git a/arches_lingo/src/arches_lingo/App.vue b/arches_lingo/src/arches_lingo/App.vue
@@ -72,9 +72,11 @@ router.beforeEach(async (to, _from, next) => {
 <template>
     <main>
         <PageHeader v-if="route.meta.shouldShowNavigation" />
-        <div style="display: flex; flex: auto; flex-direction: row">
+
+        <div class="main-content">
             <SideNav v-if="route.meta.shouldShowNavigation" />
-            <div style="flex: auto">
+
+            <div class="content-panel">
                 <HierarchySplitter v-if="route.meta.shouldShowHierarchy" />
                 <RouterView v-else />
             </div>
@@ -96,8 +98,20 @@ main {
     font-family: sans-serif;
     height: 100vh;
     width: 100vw;
-    overflow-x: hidden;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.main-content {
+    display: flex;
+    flex: 1 1 auto;
+    overflow: hidden;
+}
+
+.content-panel {
     display: flex;
     flex-direction: column;
+    flex: 1 1 auto;
 }
 </style>
diff --git a/arches_lingo/src/arches_lingo/components/tree/ConceptTree.vue b/arches_lingo/src/arches_lingo/components/tree/ConceptTree.vue
@@ -252,6 +252,7 @@ await initializeTree();
         filter-mode="lenient"
         :filter-placeholder="$gettext('Find')"
         selection-mode="single"
+        style="display: flex; flex-direction: column; overflow-y: hidden"
         :pt="{
             pcFilter: {
                 root: {

diff --git a/arches_lingo/src/arches_lingo/components/tree/HierarchySplitter.vue b/arches_lingo/src/arches_lingo/components/tree/HierarchySplitter.vue
@@ -67,7 +67,7 @@ const showHierarchy = ref(false);
         />
     </div>
     <Splitter
-        style="height: 100%"
+        style="height: 100%; overflow: hidden"
         :pt="{
             gutter: { style: { display: showHierarchy ? 'flex' : 'none' } },
         }"
@@ -87,7 +87,10 @@ const showHierarchy = ref(false);
                 </template>
             </Suspense>
         </SplitterPanel>
-        <SplitterPanel :min-size="25">
+        <SplitterPanel
+            :min-size="25"
+            style="overflow-y: auto"
+        >
             <RouterView />
         </SplitterPanel>
     </Splitter>