fix(frontend): complete flex-grow/flex-shrink and drop-shadow migration

- Migrate remaining flex-grow → grow in Vue templates (71 occurrences)
- Migrate remaining flex-shrink → shrink in Vue templates (2 occurrences)
- Shift drop-shadow → drop-shadow-sm for v2 visual parity
- CSS properties in style sections preserved (flex-grow:, flex-shrink:)

Author: dimitrieh

frontend/src/App.vue

@@ -1,15 +1,15 @@
 <template>
     <div id="ff-app" class="flex flex-col" :class="{'hidden-left-drawer': hiddenLeftDrawer}">
         <template v-if="offline">
-            <main class="ff-bg-dark flex-grow flex flex-col">
-                <div class="w-full max-w-screen-2xl mx-auto my-2 sm:my-8 flex-grow flex flex-col">
+            <main class="ff-bg-dark grow flex flex-col">
+                <div class="w-full max-w-screen-2xl mx-auto my-2 sm:my-8 grow flex flex-col">
                     <Offline />
                 </div>
             </main>
         </template>
         <template v-else-if="pending">
-            <main class="ff-bg-dark flex-grow flex flex-col">
-                <div class="w-full mx-auto flex-grow flex flex-col">
+            <main class="ff-bg-dark grow flex flex-col">
+                <div class="w-full mx-auto grow flex flex-col">
                     <Loading color="white" />
                 </div>
             </main>

frontend/src/components/FormHeading.vue

@@ -1,6 +1,6 @@
 <template>
     <h1 class="text-lg font-medium mb-2 border-b border-gray-200 flex">
-        <div class="flex-grow"><slot /></div>
+        <div class="grow"><slot /></div>
         <div><slot name="tools" /></div>
     </h1>
 </template>

frontend/src/components/Loading.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        class="ff-loading flex-grow flex flex-col items-center justify-center mx-auto"
+        class="ff-loading grow flex flex-col items-center justify-center mx-auto"
         :class="{'theme-light': color == 'black', 'theme-dark': color == 'white'}"
         data-el="loading"
     >

frontend/src/components/NavItem.vue

@@ -3,7 +3,7 @@
         <div class="flex w-full justify-between items-center">
             <component v-if="icon" :is="icon" class="ff-icon transition-fade--color" />
             <img v-if="avatar" :src="avatar" class="ff-avatar">
-            <label class="transition-fade--color flex-grow">{{ label }}</label>
+            <label class="transition-fade--color grow">{{ label }}</label>
             <span v-if="featureUnavailable" data-el="premium-feature" v-ff-tooltip="'Not available in this Tier'">
                 <SparklesIcon class="ff-icon transition-fade--color hollow" style="stroke-width: 1;" />
             </span>

frontend/src/components/Offline.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex-grow flex flex-col items-center justify-center mx-auto h-92 text-gray-400">
+    <div class="grow flex flex-col items-center justify-center mx-auto h-92 text-gray-400">
         <div class="text-center text-white">
             <div class="text-6xl mb-3">Oh Dear</div>
             <div class="text-2xl">We tried phoning the server, but no-one answered.</div>

frontend/src/components/SectionNavigationHeader.vue

@@ -3,7 +3,7 @@
         <div class="flex flex-wrap justify-between pb-3 gap-y-2">
             <div class="flex-1 flex items-center md:w-auto mr-8 gap-x-2">
                 <slot name="hero">
-                    <div class="flex-grow items-center grid gap-1">
+                    <div class="grow items-center grid gap-1">
                         <div class="inline-flex flex-wrap gap-1">
                             <div v-if="!hasCustomBreadcrumbs" class="flex items-center mr-6">
                                 <slot name="breadcrumbs" />

frontend/src/components/SectionTopMenu.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="ff-section-header flex border-b border-gray-400 mb-4 sm:mb-2 text-gray-500 justify-between min-h-12">
         <div class="w-full flex flex-nowrap justify-between mb-2 items-center gap-2">
-            <div class="flex-shrink flex-grow flex-wrap max-w-full flex gap-x-2 items-baseline min-w-0">
+            <div class="shrink grow flex-wrap max-w-full flex gap-x-2 items-baseline min-w-0">
                 <div class="flex gap-2 items-center">
                     <slot name="hero">
                         <div class="flex" :data-hero="hero">
@@ -19,7 +19,7 @@
                     </li>
                 </ul>
                 <ul v-if="hasTools" class="shrink-0">
-                    <li class="w-full md:w-auto flex-grow text-right">
+                    <li class="w-full md:w-auto grow text-right">
                         <slot name="tools" />
                     </li>
                 </ul>

frontend/src/components/dialogs/AssetCompareDialog.vue

@@ -1,7 +1,7 @@
 <template>
     <ff-dialog
         ref="dialog" :header="header" confirm-label="Close" :closeOnConfirm="true" data-el="flow-view-dialog"
-        boxClass="!min-w-[80%] !min-h-[80%] !w-[80%] !h-[80%]" contentClass="overflow-hidden flex-grow"
+        boxClass="!min-w-[80%] !min-h-[80%] !w-[80%] !h-[80%]" contentClass="overflow-hidden grow"
         @confirm="confirm()"
     >
         <template #default>
@@ -12,7 +12,7 @@
                     data-el="snapshots-list"
                     label-key="label"
                     option-title-key="description"
-                    class="flex-grow"
+                    class="grow"
                 />
                 <ff-button
                     v-if="true"
@@ -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 text-ellipsis">
+                <div class="text-sm text-gray-500 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 text-ellipsis ml-2">No differences found</div>
+                <div class="text-sm text-gray-500 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/dialogs/AssetDetailDialog.vue

@@ -2,7 +2,7 @@
     <ff-dialog
         ref="dialog" :header="header" :sub-header="`Node-RED Version: ${nrVersion}`" confirm-label="Close" :closeOnConfirm="true"
         data-el="flow-view-dialog" boxClass="!min-w-[80%] !min-h-[80%] !w-[80%] !h-[80%]"
-        contentClass="overflow-hidden flex-grow" @confirm="confirm()"
+        contentClass="overflow-hidden grow" @confirm="confirm()"
     >
         <template #default>
             <div ref="viewer" data-el="ff-flow-previewer" class="ff-flow-viewer" @click.stop.prevent>

frontend/src/pages/Home.vue

@@ -1,7 +1,7 @@
 <template>
     <main class="min-h-full">
         <template v-if="pending">
-            <div class="flex-grow flex flex-col items-center justify-center mx-auto text-gray-600 opacity-50">
+            <div class="grow flex flex-col items-center justify-center mx-auto text-gray-600 opacity-50">
                 <FlowFuseLogo class="max-w-xs mx-auto w-full" />
             </div>
         </template>