From fb3658c933787e588f422284e7f6fe66dddfd543 Mon Sep 17 00:00:00 2001
From: jaknapper <jaknapper@hotmail.com>
Date: Thu, 16 Oct 2025 11:43:24 +0100
Subject: [PATCH 1/5] Colour sliders in seadragon viewer

---
 .../openSeadragonViewer.vue                   |  31 +++--
 .../tabContentComponents/scanListContent.vue  | 112 ++++++++++++++++--
 2 files changed, 119 insertions(+), 24 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/scanListComponents/openSeadragonViewer.vue b/webapp/src/components/tabContentComponents/scanListComponents/openSeadragonViewer.vue
index 6f0be39c..b007e4a1 100644
--- a/webapp/src/components/tabContentComponents/scanListComponents/openSeadragonViewer.vue
+++ b/webapp/src/components/tabContentComponents/scanListComponents/openSeadragonViewer.vue
@@ -7,10 +7,8 @@
 <script>
 import OpenSeaDragon from "openseadragon";
 
-// Export main app
 export default {
   name: "OpenSeadragonViewer",
-  components: {  },
 
   props: {
     src: {
@@ -21,7 +19,10 @@ export default {
 
   data: function() {
     return {
-      osdViewer: null
+      osdViewer: null,
+      brightness: 1,
+      contrast: 1,
+      saturation: 1,
     };
   },
 
@@ -67,6 +68,19 @@ export default {
             clickToZoom: false
         }
       });
+
+      this.updateFilter();
+    },
+
+    updateFilter() {
+      const viewerEl = document.getElementById("openseadragon");
+      if (viewerEl) {
+        viewerEl.style.filter = `
+          brightness(${this.brightness})
+          contrast(${this.contrast})
+          saturate(${this.saturation})
+        `;
+      }
     },
     openFullscreen() {
       if (this.osdViewer) {
@@ -82,15 +96,6 @@ export default {
   width: 100%;
   height: 100%;
   background-color: black;
-  z-index:1;
-}
-#info-panel {
-    position: relative;
-    top: 10px;
-    left: 10px;
-    background-color: rgba(255, 255, 255, 0.7);
-    padding: 5px;
-    border-radius: 1px;
-    z-index: 1000;
+  z-index: 1;
 }
 </style>
\ No newline at end of file
diff --git a/webapp/src/components/tabContentComponents/scanListContent.vue b/webapp/src/components/tabContentComponents/scanListContent.vue
index 7cf1d4dc..6264aa64 100644
--- a/webapp/src/components/tabContentComponents/scanListContent.vue
+++ b/webapp/src/components/tabContentComponents/scanListContent.vue
@@ -52,21 +52,93 @@
 
     <!-- Modal for scan display -->
     <div id="scan-modal" ref="scanModal" style="padding: 10px;" uk-modal>
-      <div class="uk-modal-dialog uk-modal-body " v-if="selectedScan" style="padding: 10px; width: 95%; height: 95%;">
-        <h2 class="uk-modal-title">
+      <div
+        class="uk-modal-dialog uk-modal-body"
+        v-if="selectedScan"
+        style="padding: 10px; width: 95%; height: 95%; display: flex; flex-direction: column;"
+      >
+        <h2 class="uk-modal-title" style="flex: 0 0 auto;">
           {{ selectedScan.name }}
-          <button class="uk-modal-close uk-float-right" type="button"><span class="material-symbols-outlined">close</span></button>
+          <button class="uk-modal-close uk-float-right" type="button">
+            <span class="material-symbols-outlined">close</span>
+          </button>
           <button class="uk-float-right" type="button" @click="goFullscreen">
             <span class="material-symbols-outlined">fullscreen</span>
           </button>
-          </h2>
-          <div v-if="selectedScanDZI" id="viewer_container" style="height: 80%;">
-            <OpenSeadragonViewer
-              id="openseadragon"
-              ref="openseadragon"
-              :src="selectedScanDZI"
-            />
+        </h2>
+
+        <!-- Viewer -->
+        <div
+          v-if="selectedScanDZI"
+          id="viewer_container"
+          style="flex: 1 1 auto; position: relative; overflow: hidden;"
+        >
+          <OpenSeadragonViewer
+            id="openseadragon"
+            ref="openseadragon"
+            :src="selectedScanDZI"
+          />
+        </div>
+
+        <!-- Controls -->
+        <div
+          v-if="selectedScanDZI"
+          class="viewer-controls"
+          style="
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 0.5rem;
+            margin-top: 0.5rem;
+          "
+        >
+          <!-- Brightness/Contrast/Saturation -->
+          <div style="display: flex; justify-content: center; gap: 1.5rem;">
+            <label>
+              Brightness
+              <input
+                type="range"
+                min="0"
+                max="2"
+                step="0.01"
+                v-model.number="brightness"
+                @input="updateViewerFilter"
+              />
+            </label>
+            <label>
+              Contrast
+              <input
+                type="range"
+                min="0"
+                max="2"
+                step="0.01"
+                v-model.number="contrast"
+                @input="updateViewerFilter"
+              />
+            </label>
+            <label>
+              Saturation
+              <input
+                type="range"
+                min="0"
+                max="2"
+                step="0.01"
+                v-model.number="saturation"
+                @input="updateViewerFilter"
+              />
+            </label>
           </div>
+
+          <!-- Reset Button -->
+          <button
+            type="button"
+            class="uk-button uk-button-default"
+            style="margin-top: 0.5rem;"
+            @click="resetFilters"
+          >
+            Reset Filters
+          </button>
+        </div>
       </div>
     </div>
 
@@ -115,7 +187,10 @@ export default {
       scans: [],
       ongoing: null,
       selectedScan: null,
-      osdViewer: null
+      osdViewer: null,
+      brightness: 1,
+      contrast: 1,
+      saturation: 1,
     };
   },
 
@@ -188,6 +263,21 @@ export default {
         this.updateScans();
       }
     },
+    updateViewerFilter() {
+      const viewer = this.$refs.openseadragon;
+      if (viewer) {
+        viewer.brightness = this.brightness;
+        viewer.contrast = this.contrast;
+        viewer.saturation = this.saturation;
+        viewer.updateFilter();
+      }
+    },
+    resetFilters() {
+      this.brightness = 1;
+      this.contrast = 1;
+      this.saturation = 1;
+      this.updateViewerFilter();
+    },
     goFullscreen() {
       this.$refs.openseadragon.openFullscreen();
     },

From 19913b8f487fb5961c1189b156462ab7b252ae12 Mon Sep 17 00:00:00 2001
From: jaknapper <jaknapper@hotmail.com>
Date: Thu, 16 Oct 2025 12:45:14 +0100
Subject: [PATCH 2/5] Limit brightness and contrast, move sliders to high z to
 avoid collisions

---
 .../tabContentComponents/scanListContent.vue       | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/scanListContent.vue b/webapp/src/components/tabContentComponents/scanListContent.vue
index 6264aa64..2e83e624 100644
--- a/webapp/src/components/tabContentComponents/scanListContent.vue
+++ b/webapp/src/components/tabContentComponents/scanListContent.vue
@@ -98,8 +98,8 @@
               Brightness
               <input
                 type="range"
-                min="0"
-                max="2"
+                min="0.2"
+                max="1.8"
                 step="0.01"
                 v-model.number="brightness"
                 @input="updateViewerFilter"
@@ -109,8 +109,8 @@
               Contrast
               <input
                 type="range"
-                min="0"
-                max="2"
+                min="0.2"
+                max="1.8"
                 step="0.01"
                 v-model.number="contrast"
                 @input="updateViewerFilter"
@@ -344,4 +344,10 @@ export default {
   margin-bottom: 30px;
 }
 
+input[type="range"] {
+  pointer-events: auto;
+  z-index: 1001;
+}
+
+
 </style>
\ No newline at end of file

From 0be62d773d52353a1c1790d03c4724b0c83eec2d Mon Sep 17 00:00:00 2001
From: jaknapper <jaknapper@hotmail.com>
Date: Fri, 17 Oct 2025 18:39:29 +0100
Subject: [PATCH 3/5] Scan viewer component

---
 .../scanListComponents/scanViewer.vue         | 171 ++++++++++++++++++
 .../tabContentComponents/scanListContent.vue  | 131 ++------------
 2 files changed, 184 insertions(+), 118 deletions(-)
 create mode 100644 webapp/src/components/tabContentComponents/scanListComponents/scanViewer.vue

diff --git a/webapp/src/components/tabContentComponents/scanListComponents/scanViewer.vue b/webapp/src/components/tabContentComponents/scanListComponents/scanViewer.vue
new file mode 100644
index 00000000..96f2203d
--- /dev/null
+++ b/webapp/src/components/tabContentComponents/scanListComponents/scanViewer.vue
@@ -0,0 +1,171 @@
+<template>
+  <div id="scan-modal" ref="scanModal" style="padding: 10px;" uk-modal>
+    <div
+      class="uk-modal-dialog uk-modal-body"
+      v-if="selectedScan"
+      style="padding: 10px; width: 95%; height: 95%; display: flex; flex-direction: column;"
+    >
+      <h2 class="uk-modal-title" style="flex: 0 0 auto;">
+        {{ selectedScan.name }}
+        <button class="uk-modal-close uk-float-right" type="button">
+          <span class="material-symbols-outlined">close</span>
+        </button>
+        <button class="uk-float-right" type="button" @click="goFullscreen">
+          <span class="material-symbols-outlined">fullscreen</span>
+        </button>
+      </h2>
+
+      <!-- Viewer -->
+      <div
+        v-if="selectedScanDZI"
+        id="viewer_container"
+        class="viewer_container"
+      >
+        <OpenSeadragonViewer
+          id="openseadragon"
+          ref="openseadragon"
+          :src="selectedScanDZI"
+        />
+      </div>
+
+      <!-- Controls -->
+      <div
+        v-if="selectedScanDZI"
+        class="viewer-controls"
+      >
+        <div class="controlsContainer">
+          <label>
+            Brightness
+            <input
+              type="range"
+              min="0.2"
+              max="1.8"
+              step="0.01"
+              v-model.number="brightness"
+              @input="updateViewerFilter"
+            />
+          </label>
+          <label>
+            Contrast
+            <input
+              type="range"
+              min="0.2"
+              max="1.8"
+              step="0.01"
+              v-model.number="contrast"
+              @input="updateViewerFilter"
+            />
+          </label>
+          <label>
+            Saturation
+            <input
+              type="range"
+              min="0"
+              max="2"
+              step="0.01"
+              v-model.number="saturation"
+              @input="updateViewerFilter"
+            />
+          </label>
+        </div>
+
+        <button
+          type="button"
+          class="uk-button uk-button-default"
+          style="margin-top: 0.5rem;"
+          @click="resetFilters"
+        >
+          Reset Filters
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import UIkit from "uikit";
+import OpenSeadragonViewer from "./openSeadragonViewer.vue";
+
+export default {
+  name: "ScanViewerModal",
+  components: { OpenSeadragonViewer },
+  props: {
+    selectedScan: {
+      type: Object,
+      default: null,
+    },
+    baseUri: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      brightness: 1,
+      contrast: 1,
+      saturation: 1,
+    };
+  },
+  computed: {
+    selectedScanDZI() {
+      if (this.selectedScan && this.selectedScan.dzi) {
+        return `${this.baseUri}/scans/${this.selectedScan.name}/images/${this.selectedScan.dzi}`;
+      }
+      return null;
+    },
+  },
+  methods: {
+    show() {
+      UIkit.modal(this.$refs.scanModal).show();
+    },
+    hide() {
+      UIkit.modal(this.$refs.scanModal).hide();
+    },
+    goFullscreen() {
+      this.$refs.openseadragon.openFullscreen();
+    },
+    updateViewerFilter() {
+      const viewer = this.$refs.openseadragon;
+      if (viewer) {
+        viewer.brightness = this.brightness;
+        viewer.contrast = this.contrast;
+        viewer.saturation = this.saturation;
+        viewer.updateFilter();
+      }
+    },
+    resetFilters() {
+      this.brightness = 1;
+      this.contrast = 1;
+      this.saturation = 1;
+      this.updateViewerFilter();
+    },
+  },
+};
+</script>
+
+<style scoped>
+input[type="range"] {
+  pointer-events: auto;
+  z-index: 1001;
+}
+
+.controlsContainer {
+    display: flex;
+    justify-content: center;
+    gap: 1.5rem;
+}
+
+.viewer-controls {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+}
+
+.viewer_container {
+    flex: 1 1 auto;
+    position: relative;
+    overflow: hidden;
+}
+</style>
diff --git a/webapp/src/components/tabContentComponents/scanListContent.vue b/webapp/src/components/tabContentComponents/scanListContent.vue
index 2e83e624..400ca229 100644
--- a/webapp/src/components/tabContentComponents/scanListContent.vue
+++ b/webapp/src/components/tabContentComponents/scanListContent.vue
@@ -50,97 +50,12 @@
       </div>
     </nav>
 
-    <!-- Modal for scan display -->
-    <div id="scan-modal" ref="scanModal" style="padding: 10px;" uk-modal>
-      <div
-        class="uk-modal-dialog uk-modal-body"
-        v-if="selectedScan"
-        style="padding: 10px; width: 95%; height: 95%; display: flex; flex-direction: column;"
-      >
-        <h2 class="uk-modal-title" style="flex: 0 0 auto;">
-          {{ selectedScan.name }}
-          <button class="uk-modal-close uk-float-right" type="button">
-            <span class="material-symbols-outlined">close</span>
-          </button>
-          <button class="uk-float-right" type="button" @click="goFullscreen">
-            <span class="material-symbols-outlined">fullscreen</span>
-          </button>
-        </h2>
+    <ScanViewerModal
+      ref="scanViewer"
+      :selectedScan="selectedScan"
+      :baseUri="$store.getters.baseUri"
+    />
 
-        <!-- Viewer -->
-        <div
-          v-if="selectedScanDZI"
-          id="viewer_container"
-          style="flex: 1 1 auto; position: relative; overflow: hidden;"
-        >
-          <OpenSeadragonViewer
-            id="openseadragon"
-            ref="openseadragon"
-            :src="selectedScanDZI"
-          />
-        </div>
-
-        <!-- Controls -->
-        <div
-          v-if="selectedScanDZI"
-          class="viewer-controls"
-          style="
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 0.5rem;
-            margin-top: 0.5rem;
-          "
-        >
-          <!-- Brightness/Contrast/Saturation -->
-          <div style="display: flex; justify-content: center; gap: 1.5rem;">
-            <label>
-              Brightness
-              <input
-                type="range"
-                min="0.2"
-                max="1.8"
-                step="0.01"
-                v-model.number="brightness"
-                @input="updateViewerFilter"
-              />
-            </label>
-            <label>
-              Contrast
-              <input
-                type="range"
-                min="0.2"
-                max="1.8"
-                step="0.01"
-                v-model.number="contrast"
-                @input="updateViewerFilter"
-              />
-            </label>
-            <label>
-              Saturation
-              <input
-                type="range"
-                min="0"
-                max="2"
-                step="0.01"
-                v-model.number="saturation"
-                @input="updateViewerFilter"
-              />
-            </label>
-          </div>
-
-          <!-- Reset Button -->
-          <button
-            type="button"
-            class="uk-button uk-button-default"
-            style="margin-top: 0.5rem;"
-            @click="resetFilters"
-          >
-            Reset Filters
-          </button>
-        </div>
-      </div>
-    </div>
 
     <!-- Gallery -->
     <div
@@ -172,15 +87,14 @@
 
 <script>
 import axios from "axios";
-import UIkit from "uikit";
 import actionButton from "../labThingsComponents/actionButton.vue";
 import scanCard from "./scanListComponents/scanCard.vue";
-import OpenSeadragonViewer from "./scanListComponents/openSeadragonViewer.vue";
+import ScanViewerModal from "./scanListComponents/scanViewer.vue";
 
 // Export main app
 export default {
   name: "ScanListContent",
-  components: { actionButton, OpenSeadragonViewer, scanCard },
+  components: { actionButton, scanCard, ScanViewerModal },
 
   data: function() {
     return {
@@ -263,24 +177,6 @@ export default {
         this.updateScans();
       }
     },
-    updateViewerFilter() {
-      const viewer = this.$refs.openseadragon;
-      if (viewer) {
-        viewer.brightness = this.brightness;
-        viewer.contrast = this.contrast;
-        viewer.saturation = this.saturation;
-        viewer.updateFilter();
-      }
-    },
-    resetFilters() {
-      this.brightness = 1;
-      this.contrast = 1;
-      this.saturation = 1;
-      this.updateViewerFilter();
-    },
-    goFullscreen() {
-      this.$refs.openseadragon.openFullscreen();
-    },
     async updateScans() {
       try {
         let scans_information = await this.readThingProperty("smart_scan", "scans");
@@ -320,16 +216,15 @@ export default {
       }
     },
     showScan(scan) {
-      if (scan.dzi){
+      if (scan.dzi) {
         this.selectedScan = scan;
-        UIkit.modal(this.$refs.scanModal).show();
+        this.$refs.scanViewer.show();
+      } else {
+        this.modalError("Scan not stitched for viewing in webapp, please download or stitch");
       }
-      else {
-        this.modalError(`Scan not stitched for viewing in webapp, please download or stitch`)
-      }
-    }
+    },
   }
-};
+}
 </script>
 
 <style lang="less" scoped>

From 5c2d61baaa27e62d9250f579f3236c6ee7177066 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Tue, 21 Oct 2025 12:09:33 +0100
Subject: [PATCH 4/5] Refactor brightness, contrast, and saturation filters
 into Vue props.

---
 .../openSeadragonViewer.vue                   | 27 ++++++++++++++++---
 .../scanListComponents/scanViewer.vue         | 16 +++--------
 .../tabContentComponents/scanListContent.vue  | 13 ++-------
 3 files changed, 28 insertions(+), 28 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/scanListComponents/openSeadragonViewer.vue b/webapp/src/components/tabContentComponents/scanListComponents/openSeadragonViewer.vue
index b007e4a1..8f0a0a66 100644
--- a/webapp/src/components/tabContentComponents/scanListComponents/openSeadragonViewer.vue
+++ b/webapp/src/components/tabContentComponents/scanListComponents/openSeadragonViewer.vue
@@ -14,15 +14,25 @@ export default {
     src: {
       type: String,
       required: true
+      
+    },
+    brightness: {
+      type: Number,
+      required: true
+    },
+    contrast: {
+      type: Number,
+      required: true
+    },
+    saturation: {
+      type: Number,
+      required: true
     }
   },
 
   data: function() {
     return {
-      osdViewer: null,
-      brightness: 1,
-      contrast: 1,
-      saturation: 1,
+      osdViewer: null
     };
   },
 
@@ -32,6 +42,15 @@ export default {
       handler(newVal) {
         this.loadOpenSeaDragon(newVal);
       }
+    },
+    brightness() {
+      this.updateFilter();
+    },
+    contrast() {
+      this.updateFilter();
+    },
+    saturation() {
+      this.updateFilter();
     }
   },
 
diff --git a/webapp/src/components/tabContentComponents/scanListComponents/scanViewer.vue b/webapp/src/components/tabContentComponents/scanListComponents/scanViewer.vue
index 96f2203d..8b1a0b57 100644
--- a/webapp/src/components/tabContentComponents/scanListComponents/scanViewer.vue
+++ b/webapp/src/components/tabContentComponents/scanListComponents/scanViewer.vue
@@ -25,6 +25,9 @@
           id="openseadragon"
           ref="openseadragon"
           :src="selectedScanDZI"
+          :brightness="brightness"
+          :contrast="contrast"
+          :saturation="saturation"
         />
       </div>
 
@@ -42,7 +45,6 @@
               max="1.8"
               step="0.01"
               v-model.number="brightness"
-              @input="updateViewerFilter"
             />
           </label>
           <label>
@@ -53,7 +55,6 @@
               max="1.8"
               step="0.01"
               v-model.number="contrast"
-              @input="updateViewerFilter"
             />
           </label>
           <label>
@@ -64,7 +65,6 @@
               max="2"
               step="0.01"
               v-model.number="saturation"
-              @input="updateViewerFilter"
             />
           </label>
         </div>
@@ -124,20 +124,10 @@ export default {
     goFullscreen() {
       this.$refs.openseadragon.openFullscreen();
     },
-    updateViewerFilter() {
-      const viewer = this.$refs.openseadragon;
-      if (viewer) {
-        viewer.brightness = this.brightness;
-        viewer.contrast = this.contrast;
-        viewer.saturation = this.saturation;
-        viewer.updateFilter();
-      }
-    },
     resetFilters() {
       this.brightness = 1;
       this.contrast = 1;
       this.saturation = 1;
-      this.updateViewerFilter();
     },
   },
 };
diff --git a/webapp/src/components/tabContentComponents/scanListContent.vue b/webapp/src/components/tabContentComponents/scanListContent.vue
index 400ca229..978f2034 100644
--- a/webapp/src/components/tabContentComponents/scanListContent.vue
+++ b/webapp/src/components/tabContentComponents/scanListContent.vue
@@ -101,10 +101,7 @@ export default {
       scans: [],
       ongoing: null,
       selectedScan: null,
-      osdViewer: null,
-      brightness: 1,
-      contrast: 1,
-      saturation: 1,
+      osdViewer: null
     };
   },
 
@@ -222,7 +219,7 @@ export default {
       } else {
         this.modalError("Scan not stitched for viewing in webapp, please download or stitch");
       }
-    },
+    }
   }
 }
 </script>
@@ -239,10 +236,4 @@ export default {
   margin-bottom: 30px;
 }
 
-input[type="range"] {
-  pointer-events: auto;
-  z-index: 1001;
-}
-
-
 </style>
\ No newline at end of file

From 4c1dcdb8d1bb2d996e32b694d51b618cfd127320 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Tue, 21 Oct 2025 16:05:53 +0100
Subject: [PATCH 5/5] Tidy up HTML spacing and styling

---
 .../scanListComponents/scanViewer.vue         | 29 +++++++++++---
 .../tabContentComponents/scanListContent.vue  | 38 ++++++++++---------
 2 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/scanListComponents/scanViewer.vue b/webapp/src/components/tabContentComponents/scanListComponents/scanViewer.vue
index 8b1a0b57..f4788a3e 100644
--- a/webapp/src/components/tabContentComponents/scanListComponents/scanViewer.vue
+++ b/webapp/src/components/tabContentComponents/scanListComponents/scanViewer.vue
@@ -1,11 +1,11 @@
 <template>
-  <div id="scan-modal" ref="scanModal" style="padding: 10px;" uk-modal>
+  <div id="scan-modal" ref="scanModal" uk-modal>
     <div
+      id="scan-modal-body"
       class="uk-modal-dialog uk-modal-body"
       v-if="selectedScan"
-      style="padding: 10px; width: 95%; height: 95%; display: flex; flex-direction: column;"
     >
-      <h2 class="uk-modal-title" style="flex: 0 0 auto;">
+      <h2 id="scan-modal-title" class="uk-modal-title">
         {{ selectedScan.name }}
         <button class="uk-modal-close uk-float-right" type="button">
           <span class="material-symbols-outlined">close</span>
@@ -71,8 +71,7 @@
 
         <button
           type="button"
-          class="uk-button uk-button-default"
-          style="margin-top: 0.5rem;"
+          class="uk-button uk-button-default reset-button"
           @click="resetFilters"
         >
           Reset Filters
@@ -139,6 +138,22 @@ input[type="range"] {
   z-index: 1001;
 }
 
+#scan-modal {
+  padding: 10px;
+}
+
+#scan-modal-body {
+  padding: 10px;
+  width: 95%;
+  height: 95%;
+  display: flex;
+  flex-direction: column;
+}
+
+#scan-modal-title {
+  flex: 0 0 auto;
+}
+
 .controlsContainer {
     display: flex;
     justify-content: center;
@@ -158,4 +173,8 @@ input[type="range"] {
     position: relative;
     overflow: hidden;
 }
+
+.reset-button{
+  margin-top: 0.5rem;
+}
 </style>
diff --git a/webapp/src/components/tabContentComponents/scanListContent.vue b/webapp/src/components/tabContentComponents/scanListContent.vue
index 978f2034..05a98d2a 100644
--- a/webapp/src/components/tabContentComponents/scanListContent.vue
+++ b/webapp/src/components/tabContentComponents/scanListContent.vue
@@ -10,26 +10,25 @@
       <!-- Right side buttons -->
       <div class="uk-navbar-right">
         <div class="uk-grid">
-        <div style="margin-top:5px;margin-bottom: 2px">
+          <div class="scan-list-button">
             <action-button
-                class="uk-width-1-1"
-                thing="smart_scan"
-                action="stitch_all_scans"
-                submit-label="Stitch All Remaining"
-                :can-terminate="true"
-                :button-primary="false"
-                :modal-progress="true"
-                :requires-confirmation="true"
-                :confirmation-message="
-                  '<h3>Stitch all unstitched scans?</h3><br>Depending on the number and size of scans, this may be slow, and your microscope should not be used during the stitching.'
-                "
-                @error="modalError"
-                />
+              class="uk-width-1-1"
+              thing="smart_scan"
+              action="stitch_all_scans"
+              submit-label="Stitch All Remaining"
+              :can-terminate="true"
+              :button-primary="false"
+              :modal-progress="true"
+              :requires-confirmation="true"
+              :confirmation-message="
+                '<h3>Stitch all unstitched scans?</h3><br>Depending on the number and size of scans, this may be slow, and your microscope should not be used during the stitching.'
+              "
+              @error="modalError"
+            />
           </div>
           <div>
             <button
-              class="uk-button uk-button-default uk-width-1-1"
-              style="margin-top:5px;margin-bottom: 2px"
+              class="uk-button uk-button-default uk-width-1-1 scan-list-button"
               type="button"
               @click="deleteAllScans()"
             >
@@ -38,8 +37,7 @@
           </div>
           <div>
             <button
-              class="uk-button uk-button-default uk-width-1-1"
-              style="margin-top:5px;margin-bottom: 2px"
+              class="uk-button uk-button-default uk-width-1-1 scan-list-button"
               type="button"
               @click="updateScans()"
             >
@@ -236,4 +234,8 @@ export default {
   margin-bottom: 30px;
 }
 
+.scan-list-button {
+  margin-top: 5px;
+  margin-bottom: 2px;
+}
 </style>
\ No newline at end of file