Close calibration with confirmation

Centre CSM button in calibration

Add the word "Data" to "No CSM available"

webapp/src/components/modalComponents/calibrationWizard.vue

@@ -1,6 +1,13 @@
 <template>
   <div id="modal-example" ref="calibrationModalEl" uk-modal="bg-close: false;">
     <div class="uk-modal-dialog uk-modal-body">
+      <!-- Get the style from uk-close, but use stop.prevent to avoid it actually closing -->
+      <button
+        type="button"
+        class="uk-modal-close-default"
+        uk-close
+        @click.stop.prevent="confirmClose"
+      ></button>
       <h2 class="uk-modal-title">Microscope Calibration</h2>
 
       <component
@@ -167,6 +174,21 @@ export default {
       this.$emit("onClose");
     },
 
+    confirmClose() {
+      let confirmationMessage =
+        "Close calibration wizard?<br><br>This can be re-opened from the Settings tab at any time.";
+      // Use standard modal confirmation
+      this.modalConfirm(confirmationMessage).then(
+        () => {
+          // User clicked YES → hide modal
+          this.hide();
+        },
+        () => {
+          // User clicked NO → do nothing, modal stays open
+        },
+      );
+    },
+
     /*
      * Move to the previous task.
      */

webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/runCsmStep.vue

@@ -45,5 +45,7 @@ export default {
 <style scoped>
 .action-button-container {
   padding: 4px;
+  display: flex;
+  justify-content: center;
 }
 </style>

webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue

@@ -51,7 +51,7 @@
         </ul>
       </details>
     </div>
-    <p v-else><strong>No Calibration Available</strong></p>
+    <p v-else><strong>No Calibration Data Available</strong></p>
   </div>
 </template>