fix(frontend): migrate deprecated Tailwind v4 utility classes

- Replace flex-shrink-* with shrink-*, flex-grow-* with grow-*
- Replace outline-none with outline-hidden
- Replace overflow-ellipsis with text-ellipsis
- Shift rounded scale to preserve v2 visual sizes:
  - rounded-xl → rounded-lg
  - rounded-lg → rounded-md
  - rounded-md → rounded
  - rounded → rounded-sm
  - rounded-sm → rounded-xs

Author: dimitrieh

frontend/src/components/CodeSnippet.vue

@@ -1,5 +1,5 @@
 <template>
-    <pre class="overflow-auto text-xs font-light p-4 border rounded bg-gray-800 text-gray-200"><slot /></pre>
+    <pre class="overflow-auto text-xs font-light p-4 border rounded-sm bg-gray-800 text-gray-200"><slot /></pre>
 </template>
 
 <script>

frontend/src/components/DropdownMenu.vue

@@ -15,7 +15,7 @@
             leave-from-class="transform scale-100 opacity-100"
             leave-to-class="transform scale-95 opacity-0"
         >
-            <MenuItems :class="[edge === 'left' ? 'left-0 origin-top-left' : 'right-0 origin-top-right','z-50 absolute w-56 mt-1 bg-white divide-y divide-gray-100 rounded overflow-hidden shadow-lg ring-1 ring-black/10 focus:outline-none']">
+            <MenuItems :class="[edge === 'left' ? 'left-0 origin-top-left' : 'right-0 origin-top-right','z-50 absolute w-56 mt-1 bg-white divide-y divide-gray-100 rounded-sm overflow-hidden shadow-lg ring-1 ring-black/10 focus:outline-hidden']">
                 <div class="apx-1 apy-1">
                     <MenuItem v-for="(item, $index) in options" v-slot="{ active }" :key="$index" :disabled="!item || item.disabled == true ? true : false">
                         <template v-if="item == null">
@@ -27,7 +27,7 @@
                         <template v-else>
                             <a :class="[active ? 'bg-gray-200' : '', item.selected? 'bg-gray-100':'', 'block px-4 py-2 text-sm text-gray-700',...(item.class||[])]" :data-action="`menu-${item.name.toLowerCase()}`" @click="item.action">
                                 <component :is="item.icon" v-if="item.icon" class="w-4 inline" />
-                                <img v-if="item.imgUrl" :src="item.imgUrl" class="h-4 v-4 inline rounded mr-1">
+                                <img v-if="item.imgUrl" :src="item.imgUrl" class="h-4 v-4 inline rounded-sm mr-1">
                                 {{ item.name }}
                             </a>
                         </template>

frontend/src/components/ExpertButton.vue

@@ -1,12 +1,12 @@
 <template>
     <div v-if="!isExpertDrawerOpen" class="expert-button-wrapper flex items-center justify-center h-full px-3" style="height: 60px;">
         <button
-            class="expert-button flex items-center gap-1.5 justify-center rounded-md px-[9px] py-[6px] font-bold text-[0.85rem] leading-[20px] text-gray-800 whitespace-nowrap transition-colors"
+            class="expert-button flex items-center gap-1.5 justify-center rounded px-[9px] py-[6px] font-bold text-[0.85rem] leading-[20px] text-gray-800 whitespace-nowrap transition-colors"
             data-el="expert-button"
             data-click-exclude="right-drawer"
             @click="onClick"
         >
-            <img src="/ff-minimal-red.svg" alt="FlowFuse" class="w-5 h-5 -ml-1 mr-0.5 flex-shrink-0">
+            <img src="/ff-minimal-red.svg" alt="FlowFuse" class="w-5 h-5 -ml-1 mr-0.5 shrink-0">
             <span>Expert</span>
         </button>
     </div>

frontend/src/components/SectionTopMenu.vue

@@ -12,13 +12,13 @@
                 </div>
                 <div v-if="info" class="hidden sm:block text-gray-400 info truncate text-sm">{{ info }}</div>
             </div>
-            <div class="actions flex-shrink-0">
+            <div class="actions shrink-0">
                 <ul v-if="options.length > 0" class="flex">
                     <li v-for="item in options" :key="item.name" class="mr-8 pt-1 flex">
                         <router-link :to="item.path" class="forge-nav-item" active-class="forge-nav-item-active" :data-nav="`section-${item.name.toLowerCase()}`">{{ item.name }}</router-link>
                     </li>
                 </ul>
-                <ul v-if="hasTools" class="flex-shrink-0">
+                <ul v-if="hasTools" class="shrink-0">
                     <li class="w-full md:w-auto flex-grow text-right">
                         <slot name="tools" />
                     </li>

frontend/src/components/charts/DeviceStatusBar.vue

@@ -23,7 +23,7 @@
                 @click="selected(b, bucket.devices)"
             >
                 <div>{{ bucket.devices.length }}</div>
-                <label class="truncate overflow-ellipsis">{{ bucket.label }}</label>
+                <label class="truncate text-ellipsis">{{ bucket.label }}</label>
             </div>
         </div>
     </div>

frontend/src/components/dialogs/AssetCompareDialog.vue

@@ -28,14 +28,14 @@
             </div>
             <div v-if="changes.length" class="flex justify-between items-center gap-2 mt-2 ml-2">
                 <div class="whitespace-nowrap">Change {{ changeIndex + 1 }} of {{ changes.length }}:</div>
-                <div class="text-sm text-gray-500 flex-grow truncate overflow-ellipsis">
+                <div class="text-sm text-gray-500 flex-grow truncate text-ellipsis">
                     {{ changes[changeIndex].toString() }}
                 </div>
                 <ff-button kind="secondary" size="small" class="w-14" @click="gotoPreviousDifference">Prev</ff-button>
                 <ff-button kind="secondary" size="small" class="w-14" @click="gotoNextDifference">Next</ff-button>
             </div>
             <div v-else class="mt-2">
-                <div class="text-sm text-gray-500 flex-grow truncate overflow-ellipsis ml-2">No differences found</div>
+                <div class="text-sm text-gray-500 flex-grow truncate text-ellipsis ml-2">No differences found</div>
             </div>
             <div ref="compareViewer" data-el="ff-flow-compare-view" class="ff-flow-compare-viewer pt-4" @click.stop.prevent>
               &nbsp;

frontend/src/components/expert/ExpertChatInput.vue

@@ -171,7 +171,7 @@ button {
         width: 0.75rem; // w-3
         height: 0.75rem; // h-3
         background-color: #1F2937; // gray-800
-        border-radius: 0.125rem; // rounded-sm
+        border-radius: 0.125rem; // rounded-xs
     }
 
     &:hover {
@@ -184,7 +184,7 @@ button {
     height: 6rem; // h-24
     padding: 1rem; // p-4
     border: 2px solid #D1D5DB; // border-2 border-gray-300
-    border-radius: 0.5rem; // rounded-lg
+    border-radius: 0.5rem; // rounded-md
     font-size: 0.875rem; // text-sm
     line-height: 1.5;
     color: #111827; // text-gray-900

frontend/src/components/multi-step-forms/instance/steps/flows-step/ImportFlowsSection.vue

@@ -34,7 +34,7 @@
                         <template #input>
                             <div class="flow-input-wrapper w-full relative">
                                 <textarea
-                                    v-model="rawFlows" class="rounded-md w-full"
+                                    v-model="rawFlows" class="rounded w-full"
                                     :class="{'has-content': rawFlows}"
                                 />
                                 <ff-button

frontend/src/components/pipelines/PipelineRow.vue

@@ -36,7 +36,7 @@
                 <Transition name="fade">
                     <ChevronRightIcon
                         v-if="$index <= pipeline.stages.length - 2 || ($index == pipeline.stages.length - 1 && addStageAvailable)"
-                        class="ff-icon mt-4 flex-shrink-0"
+                        class="ff-icon mt-4 shrink-0"
                         :class="{
                             'animate-deploying': nextStageDeploying($index),
                             'ff-disabled': !nextStageAvailable(stage, $index)

frontend/src/components/tables/cells/TeamCell.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="flex align-center cursor-pointer" @click="goToTeam">
-        <div class="flex flex-col justify-center"><img class="rounded-md mr-3 w-6 inline" :src="avatar"></div>
+        <div class="flex flex-col justify-center"><img class="rounded mr-3 w-6 inline" :src="avatar"></div>
         <div class="inline-flex flex-col">
             <div>{{ name }}</div>
             <div v-if="id" class="text-xs text-gray-400">{{ id }}</div>