From 4eec94d573ee0413fb2b2936a6ae633bd24cf0f3 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Mon, 6 Jul 2026 09:26:10 +0100
Subject: [PATCH 1/5] Remove complexity in gallery nav HTML

---
 webapp/src/assets/less/variables.less         |  2 +-
 .../tabContentComponents/galleryContent.vue   | 37 ++++++++-----------
 2 files changed, 17 insertions(+), 22 deletions(-)

diff --git a/webapp/src/assets/less/variables.less b/webapp/src/assets/less/variables.less
index 24b2f2d8..78e8a5ea 100644
--- a/webapp/src/assets/less/variables.less
+++ b/webapp/src/assets/less/variables.less
@@ -222,7 +222,7 @@
   border-width: 0 0 1px;
   border-style: solid;
   border-color: rgba(180, 180, 180, 0.25);
-  padding-right: 20px;
+  padding-right: 15px;
   background: #fff;
 }
 .hook-inverse() {
diff --git a/webapp/src/components/tabContentComponents/galleryContent.vue b/webapp/src/components/tabContentComponents/galleryContent.vue
index 58f81bf4..442edb50 100644
--- a/webapp/src/components/tabContentComponents/galleryContent.vue
+++ b/webapp/src/components/tabContentComponents/galleryContent.vue
@@ -4,26 +4,21 @@
     <nav class="ofm-tab-navbar">
       <!-- Right side buttons -->
       <div class="uk-navbar-right">
-        <div class="uk-grid">
-          <div>
-            <button
-              class="uk-button uk-button-default uk-width-1-1 gallery-button"
-              type="button"
-              @click="refreshGallery()"
-            >
-              Refresh
-            </button>
-          </div>
-          <div>
-            <button
-              class="sidebar-toggle uk-button uk-button-default uk-width-1-1 gallery-button"
-              type="button"
-              @click="sidebarOpen = !sidebarOpen"
-            >
-              <div class="sidebar-toggle-text" :class="{ open: sidebarOpen }">❮</div>
-            </button>
-          </div>
-        </div>
+        <button
+          class="uk-button uk-button-default gallery-button"
+          type="button"
+          @click="refreshGallery()"
+        >
+          Refresh
+        </button>
+
+        <button
+          class="sidebar-toggle uk-button uk-button-default gallery-button"
+          type="button"
+          @click="sidebarOpen = !sidebarOpen"
+        >
+          <div class="sidebar-toggle-text" :class="{ open: sidebarOpen }">❮</div>
+        </button>
       </div>
     </nav>
 
@@ -270,7 +265,7 @@ export default {
 
 .gallery-button {
   margin-top: 5px;
-  margin-bottom: 2px;
+  margin-bottom: 5px;
 }
 
 .sidebar-toggle {

From aa10d52487e382b0f6f6612e04cb6d7a9f9de11c Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Mon, 6 Jul 2026 09:34:15 +0100
Subject: [PATCH 2/5] right padding in gallery nav to match button gap at all
 screen sizes

---
 webapp/src/assets/less/variables.less | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/webapp/src/assets/less/variables.less b/webapp/src/assets/less/variables.less
index 78e8a5ea..f7a499a4 100644
--- a/webapp/src/assets/less/variables.less
+++ b/webapp/src/assets/less/variables.less
@@ -225,6 +225,15 @@
   padding-right: 15px;
   background: #fff;
 }
+
+// Make the gap increase for larger screens, this means that the right padding
+// always matches the gap in uk-navbar-right
+@media (width >= 960px) {
+    .ofm-tab-navbar {
+        padding-right: 30px;
+    }
+}
+
 .hook-inverse() {
     .ofm-tab-navbar {
         background: #252525;

From 6b17a61d557dd199d1b706ef2ee843a35381c9a1 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Mon, 6 Jul 2026 10:01:34 +0100
Subject: [PATCH 3/5] Add thumbail only option to gallery card

---
 .../galleryComponents/galleryCard.vue         | 142 +++++++++++-------
 1 file changed, 84 insertions(+), 58 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/galleryComponents/galleryCard.vue b/webapp/src/components/tabContentComponents/galleryComponents/galleryCard.vue
index f53e93be..0e010254 100644
--- a/webapp/src/components/tabContentComponents/galleryComponents/galleryCard.vue
+++ b/webapp/src/components/tabContentComponents/galleryComponents/galleryCard.vue
@@ -1,11 +1,14 @@
 <template>
   <div class="uk-card">
-    <div class="uk-card-body">
-      <div class="uk-card-media-top">
-        <div class="view-image uk-padding-remove uk-height-1-1">
+    <div class="uk-card-body" :class="{ 'thumbnail-only-card': thumbnailOnly }">
+      <div
+        class="uk-card-media-top uk-flex uk-flex-center uk-flex-middle"
+        :class="{ 'thumbnail-only-container': thumbnailOnly }"
+      >
+        <div class="uk-padding-remove">
           <img
             id="thumbnail-stitched-image"
-            :class="[viewerAvailable ? 'thumbnail-fit clickable' : 'thumbnail-fit disabled']"
+            :class="[viewerAvailable ? 'clickable' : 'disabled', thumbnailOnly && 'thumbnail-only']"
             class="thumbnail-fit"
             :src="thumbnailPath"
             onerror="this.src = '/titleiconpink.svg'"
@@ -13,66 +16,70 @@
           />
         </div>
       </div>
-      <h3 class="uk-card-title gallery-card-title">{{ itemData.name }}</h3>
-      <div class="button-container">
-        <div v-if="itemData.card_type === 'Scan'" class="uk-button-group gallery-card-buttons">
+      <template v-if="!thumbnailOnly">
+        <h3 class="uk-card-title gallery-card-title">{{ itemData.name }}</h3>
+        <div class="button-container">
+          <div v-if="itemData.card_type === 'Scan'" class="uk-button-group gallery-card-buttons">
+            <action-button
+              class="uk-width-1-2"
+              thing="smart_scan"
+              action="download_zip"
+              submit-label="Download All"
+              :can-terminate="false"
+              :submit-data="{ scan_name: itemData.name }"
+              :button-primary="true"
+              @response="downloadZipFile"
+              @error="modalError"
+            />
+            <EndpointButton
+              class="uk-width-1-2"
+              :button-primary="true"
+              :is-disabled="!itemData.stitch_available"
+              :url="downloadStitchFile"
+              button-label="Download JPEG"
+            />
+          </div>
+          <button class="uk-button uk-button-default uk-width-1-1" @click="deleteScan">
+            Delete
+          </button>
           <action-button
-            class="uk-width-1-2"
+            v-if="itemData.can_stitch | (itemData.stitch_available & !itemData.dzi)"
+            submit-label="Stitch Images"
             thing="smart_scan"
-            action="download_zip"
-            submit-label="Download All"
-            :can-terminate="false"
+            action="stitch_scan"
+            :can-terminate="true"
             :submit-data="{ scan_name: itemData.name }"
-            :button-primary="true"
-            @response="downloadZipFile"
+            :button-primary="false"
+            :modal-progress="true"
             @error="modalError"
           />
-          <EndpointButton
-            class="uk-width-1-2"
-            :button-primary="true"
-            :is-disabled="!itemData.stitch_available"
-            :url="downloadStitchFile"
-            button-label="Download JPEG"
-          />
+          <button
+            v-if="itemData.dzi"
+            class="uk-button uk-button-default uk-width-1-1"
+            @click="requestViewer"
+          >
+            Show Stitched Scan
+          </button>
         </div>
-        <button class="uk-button uk-button-default uk-width-1-1" @click="deleteScan">Delete</button>
-        <action-button
-          v-if="itemData.can_stitch | (itemData.stitch_available & !itemData.dzi)"
-          submit-label="Stitch Images"
-          thing="smart_scan"
-          action="stitch_scan"
-          :can-terminate="true"
-          :submit-data="{ scan_name: itemData.name }"
-          :button-primary="false"
-          :modal-progress="true"
-          @error="modalError"
-        />
-        <button
-          v-if="itemData.dzi"
-          class="uk-button uk-button-default uk-width-1-1"
-          @click="requestViewer"
-        >
-          Show Stitched Scan
-        </button>
-      </div>
-      <div v-if="itemData.card_type === 'Scan'" class="item-info">
-        <ul>
-          <li>{{ itemData.number_of_images }} images</li>
-          <li>Created: {{ formatDate(itemData.created) }}</li>
-          <li>Duration: {{ formatDuration(itemData.duration) }}</li>
-        </ul>
-        <ul>
-          <li v-if="itemData.number_of_images < 2" class="warning-msg">
-            Not enough images to stitch
-          </li>
-          <li v-else-if="!itemData.dzi && itemData.stitch_available" class="alert-msg">
-            Interactive preview not available
-          </li>
-          <li v-else-if="!itemData.stitch_available" class="alert-msg">
-            High quality stitch not available
-          </li>
-        </ul>
-      </div>
+        <div v-if="itemData.card_type === 'Scan'" class="item-info">
+          <ul>
+            <li>{{ itemData.number_of_images }} images</li>
+            <li>Created: {{ formatDate(itemData.created) }}</li>
+            <li>Duration: {{ formatDuration(itemData.duration) }}</li>
+          </ul>
+          <ul>
+            <li v-if="itemData.number_of_images < 2" class="warning-msg">
+              Not enough images to stitch
+            </li>
+            <li v-else-if="!itemData.dzi && itemData.stitch_available" class="alert-msg">
+              Interactive preview not available
+            </li>
+            <li v-else-if="!itemData.stitch_available" class="alert-msg">
+              High quality stitch not available
+            </li>
+          </ul>
+        </div>
+      </template>
     </div>
   </div>
 </template>
@@ -97,6 +104,11 @@ export default {
       type: Object,
       required: true,
     },
+    thumbnailOnly: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
   },
 
   emits: ["viewer-requested", "update-requested"],
@@ -210,6 +222,15 @@ ul {
   text-align: center;
 }
 
+.thumbnail-only-card {
+  width: auto;
+}
+
+.thumbnail-only-container {
+  height: 150px;
+  width: 150px;
+}
+
 .thumbnail-fit {
   max-height: 120px;
   max-width: 240px;
@@ -217,6 +238,11 @@ ul {
   overflow-y: hidden;
 }
 
+.thumbnail-fit.thumbnail-only {
+  max-height: 150px;
+  max-width: 150px;
+}
+
 .clickable {
   cursor: pointer;
 }

From ba11f65219d020e55b41561c2222a9b6177a4460 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Tue, 7 Jul 2026 10:41:51 +0100
Subject: [PATCH 4/5] Update miniMenu to allow selector to be a button, and use
 for filtering the gallery

---
 webapp/src/assets/less/variables.less         | 19 ++++++++
 .../components/genericComponents/miniMenu.vue | 35 ++++++++++++--
 .../tabContentComponents/galleryContent.vue   | 47 ++++++++++++++-----
 3 files changed, 85 insertions(+), 16 deletions(-)

diff --git a/webapp/src/assets/less/variables.less b/webapp/src/assets/less/variables.less
index f7a499a4..b7773df6 100644
--- a/webapp/src/assets/less/variables.less
+++ b/webapp/src/assets/less/variables.less
@@ -372,6 +372,25 @@
     }
 }
 
+.ofm-top-nav-button {
+  margin-top: 4px;
+  height: 38px;
+}
+
+.ofm-top-nav-square-button {
+  margin-top: 4px;
+  height: 38px;
+  width: 38px;
+}
+
+.ofm-top-nav-square-button.material-icon {
+  // MAterial icons are 24x24 , set padding to centre
+  padding: 6px !important;
+  margin-top: 4px;
+  height: 38px;
+  width: 38px;
+}
+
 // A button styled like text. For use in menus
 .ofm-text-button {
   display: block;
diff --git a/webapp/src/components/genericComponents/miniMenu.vue b/webapp/src/components/genericComponents/miniMenu.vue
index 07cf23f9..a57067e3 100644
--- a/webapp/src/components/genericComponents/miniMenu.vue
+++ b/webapp/src/components/genericComponents/miniMenu.vue
@@ -1,9 +1,21 @@
 <template>
   <div ref="mini-menu" class="mini-menu">
-    <a class="icon" @click.prevent="isOpen = !isOpen">
-      <span class="material-symbols-outlined"> more_vert </span>
+    <a v-if="!withButton" class="icon" @click.prevent="isOpen = !isOpen">
+      <span class="material-symbols-outlined"> {{ icon }} </span>
     </a>
-    <div v-if="isOpen" class="dropdown-menu ofm-close-pars ofm-opaque-element">
+    <button
+      v-if="withButton"
+      class="ofm-top-nav-square-button material-icon uk-button uk-button-default"
+      type="button"
+      @click="isOpen = !isOpen"
+    >
+      <span class="material-symbols-outlined"> {{ icon }} </span>
+    </button>
+    <div
+      v-if="isOpen"
+      class="dropdown-menu ofm-close-pars ofm-opaque-element"
+      :class="{ 'with-button': withButton }"
+    >
       <slot :close="close"></slot>
     </div>
   </div>
@@ -13,7 +25,18 @@
 export default {
   name: "MiniMenu",
 
-  props: {},
+  props: {
+    icon: {
+      type: String,
+      default: "more_vert",
+      required: false,
+    },
+    withButton: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
 
   data() {
     return {
@@ -62,6 +85,10 @@ export default {
   padding-top: 5px;
 }
 
+.dropdown-menu.with-button {
+  top: 40px;
+}
+
 .icon {
   user-select: none;
   color: #888;
diff --git a/webapp/src/components/tabContentComponents/galleryContent.vue b/webapp/src/components/tabContentComponents/galleryContent.vue
index 442edb50..e3ee0fa5 100644
--- a/webapp/src/components/tabContentComponents/galleryContent.vue
+++ b/webapp/src/components/tabContentComponents/galleryContent.vue
@@ -4,8 +4,32 @@
     <nav class="ofm-tab-navbar">
       <!-- Right side buttons -->
       <div class="uk-navbar-right">
+        <mini-menu v-slot="{ close }" icon="mobile_layout" :with-button="true">
+          <p>
+            <icon-button
+              icon="tile_small"
+              :show-label="true"
+              label="Detailed cards"
+              @click="
+                thumbnailOnly = false;
+                close();
+              "
+            />
+          </p>
+          <p>
+            <icon-button
+              icon="view_compact"
+              :show-label="true"
+              label="Thumbnail only"
+              @click="
+                thumbnailOnly = true;
+                close();
+              "
+            />
+          </p>
+        </mini-menu>
         <button
-          class="uk-button uk-button-default gallery-button"
+          class="uk-button uk-button-default ofm-top-nav-button"
           type="button"
           @click="refreshGallery()"
         >
@@ -13,7 +37,7 @@
         </button>
 
         <button
-          class="sidebar-toggle uk-button uk-button-default gallery-button"
+          class="ofm-top-nav-square-button uk-button uk-button-default"
           type="button"
           @click="sidebarOpen = !sidebarOpen"
         >
@@ -41,6 +65,7 @@
           <div v-for="itemData in paginatedItems" :key="itemData.id">
             <gallery-card
               :item-data="itemData"
+              :thumbnail-only="thumbnailOnly"
               @viewer-requested="showItem"
               @update-requested="refreshGallery"
             />
@@ -93,6 +118,8 @@ import PaginateLinks from "@/components/genericComponents/paginateLinks.vue";
 import MultiSelectDropdown from "@/components/genericComponents/multiSelectDropdown.vue";
 import actionButton from "@/components/labThingsComponents/actionButton.vue";
 import ServerSpecifiedActionButton from "@/components/labThingsComponents/serverSpecifiedActionButton.vue";
+import MiniMenu from "@/components/genericComponents/miniMenu.vue";
+import iconButton from "@/components/genericComponents/iconButton.vue";
 import galleryCard from "./galleryComponents/galleryCard.vue";
 import galleryModal from "./galleryComponents/galleryViewer.vue";
 import { eventBus } from "../../eventBus.js";
@@ -110,6 +137,8 @@ export default {
     PaginateLinks,
     MultiSelectDropdown,
     ServerSpecifiedActionButton,
+    MiniMenu,
+    iconButton,
   },
 
   emits: ["scrollTop"],
@@ -120,11 +149,11 @@ export default {
       selectedItem: null,
       osdViewer: null,
       currentPage: 1,
-      itemsPerPage: 18,
       selectedCardTypes: [],
       allCardTypes: [],
       bulkActions: [],
       sidebarOpen: false,
+      thumbnailOnly: false,
     };
   },
 
@@ -136,6 +165,9 @@ export default {
     noItems() {
       return !this.filtered_items || this.filtered_items?.length === 0;
     },
+    itemsPerPage() {
+      return this.thumbnailOnly ? 25 : 18;
+    },
     totalPages() {
       return Math.ceil((this.filtered_items?.length || 0) / this.itemsPerPage);
     },
@@ -263,15 +295,6 @@ export default {
   padding-top: 20px;
 }
 
-.gallery-button {
-  margin-top: 5px;
-  margin-bottom: 5px;
-}
-
-.sidebar-toggle {
-  width: 40px;
-}
-
 .sidebar-toggle-text {
   font-size: 24px;
   transition: transform 0.25s ease;

From 1f7a8a1a4eebb65de74d13413df08e44d0dbf335 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Tue, 7 Jul 2026 14:06:01 +0100
Subject: [PATCH 5/5] CSS tweaks and show warnings for scan thumbnails if
 preview is unavailable

---
 webapp/src/assets/less/variables.less         |  7 ++---
 .../galleryComponents/galleryCard.vue         | 28 +++++++++++--------
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/webapp/src/assets/less/variables.less b/webapp/src/assets/less/variables.less
index b7773df6..d6c8ab7d 100644
--- a/webapp/src/assets/less/variables.less
+++ b/webapp/src/assets/less/variables.less
@@ -380,15 +380,12 @@
 .ofm-top-nav-square-button {
   margin-top: 4px;
   height: 38px;
-  width: 38px;
+  aspect-ratio: 1;
 }
 
 .ofm-top-nav-square-button.material-icon {
-  // MAterial icons are 24x24 , set padding to centre
+  // Material icons are 24x24 , set padding to centre
   padding: 6px !important;
-  margin-top: 4px;
-  height: 38px;
-  width: 38px;
 }
 
 // A button styled like text. For use in menus
diff --git a/webapp/src/components/tabContentComponents/galleryComponents/galleryCard.vue b/webapp/src/components/tabContentComponents/galleryComponents/galleryCard.vue
index 0e010254..6ab5c64e 100644
--- a/webapp/src/components/tabContentComponents/galleryComponents/galleryCard.vue
+++ b/webapp/src/components/tabContentComponents/galleryComponents/galleryCard.vue
@@ -67,19 +67,21 @@
             <li>Created: {{ formatDate(itemData.created) }}</li>
             <li>Duration: {{ formatDuration(itemData.duration) }}</li>
           </ul>
-          <ul>
-            <li v-if="itemData.number_of_images < 2" class="warning-msg">
-              Not enough images to stitch
-            </li>
-            <li v-else-if="!itemData.dzi && itemData.stitch_available" class="alert-msg">
-              Interactive preview not available
-            </li>
-            <li v-else-if="!itemData.stitch_available" class="alert-msg">
-              High quality stitch not available
-            </li>
-          </ul>
         </div>
       </template>
+      <div :class="{ 'thumbnail-only-warning': thumbnailOnly }">
+        <ul>
+          <li v-if="itemData.number_of_images < 2" class="warning-msg">
+            Not enough images to stitch
+          </li>
+          <li v-else-if="!itemData.dzi && itemData.stitch_available" class="alert-msg">
+            Interactive preview not available
+          </li>
+          <li v-else-if="!itemData.stitch_available" class="alert-msg">
+            High quality stitch not available
+          </li>
+        </ul>
+      </div>
     </div>
   </div>
 </template>
@@ -231,6 +233,10 @@ ul {
   width: 150px;
 }
 
+.thumbnail-only-warning {
+  width: 150px;
+}
+
 .thumbnail-fit {
   max-height: 120px;
   max-width: 240px;