From d2c9122720ad3e2fbaf2c9889c44318137887cfb Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Tue, 28 Oct 2025 16:32:47 +0000
Subject: [PATCH] De-duplicate HTML for tab content, add way for tab to request
 scroll to top

---
 webapp/src/components/appContent.vue          | 30 ++++++++-----------
 .../tabContentComponents/loggingContent.vue   |  7 ++---
 2 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/webapp/src/components/appContent.vue b/webapp/src/components/appContent.vue
index 317de9dd..eb084c09 100644
--- a/webapp/src/components/appContent.vue
+++ b/webapp/src/components/appContent.vue
@@ -56,29 +56,20 @@
     </div>
 
     <!-- Corresponding vertical tab content -->
-    <div id="container-left" class="uk-padding-remove uk-height-1-1 uk-width-expand">
-      <!-- For each top tab -->
+    <div
+      id="container-left"
+      ref="containerLeft"
+      class="uk-padding-remove uk-height-1-1 uk-width-expand"
+    >
       <tabContent
-        v-for="item in topTabs"
+        v-for="item in allTabs"
         :id="item.id + '-tab-content'"
         :key="item.id + '-tab-content'"
         :tab-i-d="item.id"
         :require-connection="true"
         :current-tab="currentTab"
       >
-        <component :is="item.component"></component>
-      </tabContent>
-
-      <!-- For each bottom tab -->
-      <tabContent
-        v-for="item in bottomTabs"
-        :id="item.id + '-tab-content'"
-        :key="item.id + '-tab-content'"
-        :tab-i-d="item.id"
-        :require-connection="true"
-        :current-tab="currentTab"
-      >
-        <component :is="item.component"></component>
+        <component :is="item.component" @scrollTop="scrollToTop"></component>
       </tabContent>
     </div>
   </div>
@@ -195,7 +186,9 @@ export default {
       }
       return tabs;
     },
-
+    allTabs() {
+      return [...this.topTabs, ...this.bottomTabs];
+    },
     currentTabIndex: function() {
       return this.tabOrder.indexOf(this.currentTab);
     },
@@ -238,6 +231,9 @@ export default {
     enterApp: function() {
       // Stuff to do once connected and all init modals are finished
     },
+    scrollToTop() {
+      this.$refs.containerLeft.scrollTo({ top: 0 });
+    },
   },
 };
 </script>
diff --git a/webapp/src/components/tabContentComponents/loggingContent.vue b/webapp/src/components/tabContentComponents/loggingContent.vue
index 86f611ea..46cc6a53 100644
--- a/webapp/src/components/tabContentComponents/loggingContent.vue
+++ b/webapp/src/components/tabContentComponents/loggingContent.vue
@@ -72,7 +72,7 @@
         :page-class="'page-item'"
         :active-class="'uk-active'"
         :disabled-class="'uk-disabled'"
-        :click-handler="scrollToTop()"
+        :click-handler="scrollToTop"
       >
       </Paginate>
     </div>
@@ -135,10 +135,7 @@ export default {
 
   methods: {
     scrollToTop() {
-      const el = document.querySelector("#container-left");
-      if (el) {
-        el.scrollTop = 0;
-      }
+      this.$emit("scrollTop");
     },
     visibilityChanged(isVisible) {
       if (isVisible) {