fix(frontend): apply @tailwindcss/upgrade tool migrations

Changes applied by the official Tailwind v4 upgrade tool:
- Move !important modifier from prefix to suffix (!prop → prop!)
- Update max-w-screen-* to max-w-(--breakpoint-*)
- Replace break-words with wrap-break-word

Author: dimitrieh

frontend/src/App.vue

@@ -2,7 +2,7 @@
     <div id="ff-app" class="flex flex-col" :class="{'hidden-left-drawer': hiddenLeftDrawer}">
         <template v-if="offline">
             <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">
+                <div class="w-full max-w-(--breakpoint-2xl) mx-auto my-2 sm:my-8 grow flex flex-col">
                     <Offline />
                 </div>
             </main>

frontend/src/components/DevicesBrowser.vue

@@ -579,7 +579,7 @@ export default {
             }
 
             menu.push(null)
-            menu.push({ name: 'Delete', class: ['!text-red-600'], action: this.showTeamBulkDeviceDeleteDialog, disabled: !enableDelete })
+            menu.push({ name: 'Delete', class: ['text-red-600!'], action: this.showTeamBulkDeviceDeleteDialog, disabled: !enableDelete })
             return menu
         },
         applicationContext () {

frontend/src/components/audit-log/AuditEntry.vue

@@ -15,16 +15,16 @@
             </div>
             <div v-if="!disableAssociations" class="lg:w-36">
                 <template v-if="association && entry.scope.type === 'device'">
-                    <router-link class="flex content-center" :to="{ name: 'Device', params: { id: entry.scope.id } }"><ChipIcon class="ff-icon relative invisible lg:visible " /> <span class="truncate ml-2 !leading-normal">{{ association.name }}</span></router-link>
+                    <router-link class="flex content-center" :to="{ name: 'Device', params: { id: entry.scope.id } }"><ChipIcon class="ff-icon relative invisible lg:visible " /> <span class="truncate ml-2 leading-normal!">{{ association.name }}</span></router-link>
                 </template>
                 <template v-else-if="association && entry.scope.type === 'project'">
-                    <router-link class="flex content-center" :to="{ name: 'Instance', params: { id: entry.scope.id } }"><ProjectsIcon class="ff-icon relative invisible lg:visible" /> <span class="truncate ml-2 !leading-normal">{{ association.name }}</span></router-link>
+                    <router-link class="flex content-center" :to="{ name: 'Instance', params: { id: entry.scope.id } }"><ProjectsIcon class="ff-icon relative invisible lg:visible" /> <span class="truncate ml-2 leading-normal!">{{ association.name }}</span></router-link>
                 </template>
                 <template v-else-if="association && entry.scope.type === 'application'">
-                    <router-link class="flex content-center" :to="{ name: 'Application', params: { id: entry.scope.id }}"><TemplateIcon class="ff-icon relative invisible lg:visible" /> <span class="truncate ml-2 !leading-normal">{{ association.name }}</span></router-link>
+                    <router-link class="flex content-center" :to="{ name: 'Application', params: { id: entry.scope.id }}"><TemplateIcon class="ff-icon relative invisible lg:visible" /> <span class="truncate ml-2 leading-normal!">{{ association.name }}</span></router-link>
                 </template>
                 <template v-else-if="entry.scope.type === 'team'">
-                    <router-link class="flex content-center" :to="'#'"><UserGroupIcon class="ff-icon relative invisible lg:visible" /> <span class="truncate ml-2 !leading-normal">This Team</span></router-link>
+                    <router-link class="flex content-center" :to="'#'"><UserGroupIcon class="ff-icon relative invisible lg:visible" /> <span class="truncate ml-2 leading-normal!">This Team</span></router-link>
                 </template>
             </div>
         </div>

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 grow"
+        boxClass="min-w-[80%]! min-h-[80%]! w-[80%]! h-[80%]!" contentClass="overflow-hidden grow"
         @confirm="confirm()"
     >
         <template #default>

frontend/src/components/dialogs/AssetDetailDialog.vue

@@ -1,7 +1,7 @@
 <template>
     <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%]"
+        data-el="flow-view-dialog" boxClass="min-w-[80%]! min-h-[80%]! w-[80%]! h-[80%]!"
         contentClass="overflow-hidden grow" @confirm="confirm()"
     >
         <template #default>

frontend/src/components/dialogs/_addDeviceToGroupDialog.vue

@@ -23,7 +23,7 @@
                     >
                         <template #option="{ option, selected, active }">
                             <li :class="{selected, active}">
-                                <div class="ff-option-content flex flex-col !gap-2 !items-start">
+                                <div class="ff-option-content flex flex-col gap-2! items-start!">
                                     <div class="title flex justify-between w-full items-center">
                                         <span class="truncate bold flex-1">{{ option.name }}</span>
                                         <span class="truncate text-gray-500 flex gap-1 items-center">

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

@@ -38,7 +38,7 @@
                                     :class="{'has-content': rawFlows}"
                                 />
                                 <ff-button
-                                    v-if="rawFlows" kind="secondary" class="!absolute bottom-1 right-1"
+                                    v-if="rawFlows" kind="secondary" class="absolute! bottom-1 right-1"
                                     @click="rawFlows = null"
                                 >
                                     clear

frontend/src/layouts/Platform.vue

@@ -55,7 +55,7 @@
                 </div>
             </ff-dialog>
             <transition name="page-fade">
-                <div v-if="overlay" class="ff-dialog-container !z-[100]" />
+                <div v-if="overlay" class="ff-dialog-container z-100!" />
             </transition>
         </div>
     </div>

frontend/src/pages/Login.vue

@@ -32,7 +32,7 @@
                     <ff-button data-action="login" :disabled="loggingIn || tooManyRequests" @click="login()">
                         <span>Login</span>
                         <span v-if="loggingIn || tooManyRequests" class="w-4">
-                            <SpinnerIcon class="ff-icon ml-3 !w-3.5" />
+                            <SpinnerIcon class="ff-icon ml-3 w-3.5!" />
                         </span>
                     </ff-button>
                     <ff-button v-if="settings['user:signup']" kind="tertiary" to="/account/create" data-action="sign-up">Sign Up</ff-button>
@@ -46,7 +46,7 @@
                                 </template>
                                 <span>Sign In with Google</span>
                                 <span v-if="loggingIn || tooManyRequests" class="w-4">
-                                    <SpinnerIcon class="ff-icon ml-3 !w-3.5" />
+                                    <SpinnerIcon class="ff-icon ml-3 w-3.5!" />
                                 </span>
                             </ff-button>
                         </GoogleLogin>
@@ -71,7 +71,7 @@
                     <ff-button data-action="submit-token" :disabled="loggingIn || tokenInvalid" @click="submitMFAToken()">
                         <span>Continue</span>
                         <span class="w-4">
-                            <SpinnerIcon v-if="loggingIn" class="ff-icon ml-3 !w-3.5" />
+                            <SpinnerIcon v-if="loggingIn" class="ff-icon ml-3 w-3.5!" />
                         </span>
                     </ff-button>
                 </div>

frontend/src/pages/account/Create.vue

@@ -48,7 +48,7 @@
                 <ff-button type="submit" :disabled="!formValid || busy || tooManyRequests" data-action="sign-up">
                     <span>Sign Up</span>
                     <span class="w-4">
-                        <SpinnerIcon v-if="busy || tooManyRequests" class="ff-icon ml-3 !w-3.5" />
+                        <SpinnerIcon v-if="busy || tooManyRequests" class="ff-icon ml-3 w-3.5!" />
                     </span>
                 </ff-button>
                 <p class="flex text-gray-400 font-light mt-6 gap-2 w-full justify-center">