From 8babf3f17bd1da501620bf95445438ea94653088 Mon Sep 17 00:00:00 2001
From: Julian Stirling <julian@julianstirling.co.uk>
Date: Fri, 7 Nov 2025 22:24:47 +0000
Subject: [PATCH] Format the stage control so it isn't so wide

---
 .../stageControlSettings.vue                  | 56 ++++++++++---------
 1 file changed, 30 insertions(+), 26 deletions(-)

diff --git a/webapp/src/components/tabContentComponents/settingsComponents/stageControlSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/stageControlSettings.vue
index d8118876..c3915f02 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/stageControlSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/stageControlSettings.vue
@@ -1,34 +1,38 @@
 <template>
-  <div>
-    <a class="uk-accordion-title" href="#">Configure</a>
-    <div class="uk-accordion-content">
-      <b>Keyboard Step Size</b>
-      <div class="uk-grid-small uk-child-width-1-3" uk-grid>
-        <div>
-          <label class="uk-form-label" for="form-stacked-text">x</label>
-          <div class="uk-form-controls">
-            <input v-model="stepSize.x" class="uk-input uk-form-small" type="number" />
-          </div>
-          <label class="uk-margin-small-right"
-            ><input v-model="invert.x" class="uk-checkbox" type="checkbox" /> Invert x</label
-          >
+  <div class="uk-width-large">
+    <p><b>Single Move Step Size</b></p>
+    <p>
+      This sets the size (and direction) of movements within the web app. Including keyboard arrow
+      keys (and PageUp/PageDown). It also includes the navigation buttons in the control tab.
+    </p>
+    <p>These settings do not affect the operation of other actions your microscope performs.</p>
+    <div class="uk-grid-small uk-child-width-1-3" uk-grid>
+      <div>
+        <label class="uk-form-label" for="form-stacked-text">x</label>
+        <div class="uk-form-controls">
+          <input v-model="stepSize.x" class="uk-input uk-form-small" type="number" />
         </div>
+        <label class="uk-margin-small-right">
+          <input v-model="invert.x" class="uk-checkbox" type="checkbox" />
+          Invert x
+        </label>
+      </div>
 
-        <div>
-          <label class="uk-form-label" for="form-stacked-text">y</label>
-          <div class="uk-form-controls">
-            <input v-model="stepSize.y" class="uk-input uk-form-small" type="number" />
-          </div>
-          <label class="uk-margin-small-right"
-            ><input v-model="invert.y" class="uk-checkbox" type="checkbox" /> Invert y</label
-          >
+      <div>
+        <label class="uk-form-label" for="form-stacked-text">y</label>
+        <div class="uk-form-controls">
+          <input v-model="stepSize.y" class="uk-input uk-form-small" type="number" />
         </div>
+        <label class="uk-margin-small-right">
+          <input v-model="invert.y" class="uk-checkbox" type="checkbox" />
+          Invert y
+        </label>
+      </div>
 
-        <div>
-          <label class="uk-form-label" for="form-stacked-text">z</label>
-          <div class="uk-form-controls">
-            <input v-model="stepSize.z" class="uk-input uk-form-small" type="number" />
-          </div>
+      <div>
+        <label class="uk-form-label" for="form-stacked-text">z</label>
+        <div class="uk-form-controls">
+          <input v-model="stepSize.z" class="uk-input uk-form-small" type="number" />
         </div>
       </div>
     </div>