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] 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