fix: apply ESLint rule vue/prefer-separate-static-class

app/javascript/dashboard/components/Modal.vue

@@ -84,8 +84,8 @@ export default {
       @mousedown="handleMouseDown"
     >
       <div
+        class="relative max-h-full overflow-auto bg-white shadow-md modal-container rtl:text-right dark:bg-slate-800 skip-context-menu"
         :class="{
-          'modal-container rtl:text-right shadow-md max-h-full overflow-auto relative bg-white dark:bg-slate-800 skip-context-menu': true,
           'rounded-xl w-[37.5rem]': !fullWidth,
           'items-center rounded-none flex h-full justify-center w-full':
             fullWidth,

app/javascript/dashboard/components/ui/Tabs/TabsItem.vue

@@ -47,8 +47,8 @@ export default {
 
 <template>
   <li
+    class="tabs-title"
     :class="{
-      'tabs-title': true,
       'is-active': active,
     }"
   >

app/javascript/dashboard/components/widgets/conversation/Message.vue

@@ -443,7 +443,8 @@ export default {
   <li
     v-if="shouldRenderMessage"
     :id="`message${data.id}`"
-    :class="[alignBubble, 'group']"
+    class="group"
+    :class="[alignBubble]"
   >
     <div :class="wrapClass">
       <div

app/javascript/widget/components/dropdown/DropdownMenuItem.vue

@@ -42,7 +42,7 @@ export default {
 </script>
 
 <template>
-  <button :class="['menu-item', itemClass]" @click="action">
+  <button class="menu-item" :class="[itemClass]" @click="action">
     <FluentIcon
       v-if="icon"
       :icon="iconName"