From 8e088a9ec32e81df70b1f7bd98d7aa8af15112e8 Mon Sep 17 00:00:00 2001
From: Christopher Byrd <cbyrd@fargeo.com>
Date: Thu, 2 Jan 2025 13:12:16 -0800
Subject: [PATCH] implements scrollable content panels #143 (#168)

---
 arches_lingo/src/arches_lingo/App.vue         | 20 ++++++++++++++++---
 .../components/tree/ConceptTree.vue           |  1 +
 .../components/tree/HierarchySplitter.vue     |  7 +++++--
 3 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/arches_lingo/src/arches_lingo/App.vue b/arches_lingo/src/arches_lingo/App.vue
index 7261e4f9..e430366d 100644
--- 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
index f31dd028..67481b6e 100644
--- 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
index 27aecc27..5bd141c5 100644
--- 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>