From fc96ae94f806f56ee7032634acb4c66ffde283b2 Mon Sep 17 00:00:00 2001
From: Antonio Anaya <antonio.anaya@kny5.work>
Date: Tue, 20 Jan 2026 19:09:42 -0600
Subject: [PATCH] ui_migration fix(deps): Correcting syntax deprecations, set
 :key at template, >>> :deep(), v-bind on top.

---
 webapp/src/components/appContent.vue                        | 6 ++----
 webapp/src/components/modalComponents/calibrationWizard.vue | 2 +-
 .../calibrationWizardComponents/calibrationWizardTask.vue   | 2 +-
 .../calibrationWizardComponents/csmSteps/focusStep.vue      | 2 +-
 4 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/webapp/src/components/appContent.vue b/webapp/src/components/appContent.vue
index d2460eba..0d217ce6 100644
--- a/webapp/src/components/appContent.vue
+++ b/webapp/src/components/appContent.vue
@@ -9,11 +9,10 @@
         class="uk-flex uk-flex-column uk-padding-remove uk-width-auto uk-height-1-1 uk-text-center"
       >
         <!-- For each top tab -->
-        <template v-for="(item, index) in topTabs">
+        <template v-for="(item, index) in topTabs" :key="item.id + '-tab-icon'">
           <!-- Render the tab icon -->
           <tabIcon
             :id="item.id + '-tab-icon'"
-            :key="item.id + '-tab-icon'"
             :tab-i-d="item.id"
             :title="item.title"
             :require-connection="true"
@@ -37,11 +36,10 @@
         <hr id="extension-tab-divider" />
 
         <!-- For each bottom tab -->
-        <template v-for="(item, index) in bottomTabs">
+        <template v-for="(item, index) in bottomTabs" :key="item.id + '-tab-icon'">
           <!-- Render the tab icon -->
           <tabIcon
             :id="item.id + '-tab-icon'"
-            :key="item.id + '-tab-icon'"
             :tab-i-d="item.id"
             :title="item.title"
             :require-connection="true"
diff --git a/webapp/src/components/modalComponents/calibrationWizard.vue b/webapp/src/components/modalComponents/calibrationWizard.vue
index 687263d8..dcad990f 100644
--- a/webapp/src/components/modalComponents/calibrationWizard.vue
+++ b/webapp/src/components/modalComponents/calibrationWizard.vue
@@ -4,10 +4,10 @@
       <h2 class="uk-modal-title">Microscope Calibration</h2>
 
       <component
+        v-bind="currentTask.props"
         :is="currentTask.component"
         v-if="currentTask"
         :key="taskIndex"
-        v-bind="currentTask.props"
         :first="isFirstTask"
         :final="isFinalTask"
         :start-on-last="movingBackward"
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/calibrationWizardTask.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/calibrationWizardTask.vue
index f2345223..3a90c309 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/calibrationWizardTask.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/calibrationWizardTask.vue
@@ -23,10 +23,10 @@ gets very confusing.
   <div>
     <h3 v-if="title">{{ title }}</h3>
     <component
+      v-bind="currentStep.props"
       :is="currentStep.component"
       v-if="currentStep"
       :key="stepIndex"
-      v-bind="currentStep.props"
       @awaiting-user="handleAwaitingUser"
     />
     <p class="uk-text-right">
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/focusStep.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/focusStep.vue
index 9d77c15b..c043034d 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/focusStep.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/focusStep.vue
@@ -47,7 +47,7 @@ export default {
   gap: 8px; /* Small space between buttons */
   margin-top: 4px; /* Gap from image */
 }
-.moveZ >>> .uk-button.uk-width-1-1 {
+.moveZ :deep(.uk-button.uk-width-1-1) {
   line-height: 50px;
   font-size: 50px !important;
   height: 60px;