v1.26.2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "automa",
-  "version": "1.25.3",
+  "version": "1.26.2",
   "description": "An extension for automating your browser by connecting blocks",
   "repository": {
     "type": "git",
@@ -28,12 +28,12 @@
     "*.{js,ts,vue}": "eslint --fix"
   },
   "dependencies": {
-    "@codemirror/autocomplete": "^6.3.4",
+    "@codemirror/autocomplete": "^6.4.0",
     "@codemirror/lang-css": "^6.0.1",
     "@codemirror/lang-html": "^6.4.0",
-    "@codemirror/lang-javascript": "^6.1.1",
+    "@codemirror/lang-javascript": "^6.1.2",
     "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/language": "^6.3.1",
+    "@codemirror/language": "^6.4.0",
     "@codemirror/theme-one-dark": "^6.1.0",
     "@medv/finder": "^2.1.0",
     "@n8n_io/riot-tmpl": "^2.0.0",
@@ -45,9 +45,9 @@
     "@tiptap/extension-placeholder": "^2.0.0-beta.205",
     "@tiptap/starter-kit": "^2.0.0-beta.209",
     "@tiptap/vue-3": "^2.0.0-beta.209",
-    "@viselect/vanilla": "^3.1.0",
+    "@viselect/vanilla": "^3.2.4",
     "@vue-flow/additional-components": "^1.3.3",
-    "@vue-flow/core": "^1.9.1",
+    "@vue-flow/core": "^1.12.1",
     "@vueuse/head": "^1.0.22",
     "@vueuse/rxjs": "^9.1.1",
     "@vuex-orm/core": "^0.36.4",
@@ -81,7 +81,6 @@
     "prosemirror-history": "^1.3.0",
     "prosemirror-keymap": "^1.2.0",
     "prosemirror-schema-list": "^1.2.2",
-    "read-excel-file": "^5.5.3",
     "rxjs": "^7.8.0",
     "sizzle": "^2.3.8",
     "tippy.js": "^6.3.1",
@@ -108,12 +107,12 @@
     "babel-loader": "^8.2.2",
     "clean-webpack-plugin": "4.0.0",
     "copy-webpack-plugin": "^11.0.0",
-    "core-js": "^3.26.0",
+    "core-js": "^3.27.1",
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.3",
-    "eslint": "^8.25.0",
+    "eslint": "^8.31.0",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-prettier": "^8.6.0",
     "eslint-friendly-formatter": "^4.0.1",
     "eslint-import-resolver-webpack": "^0.13.2",
     "eslint-plugin-import": "^2.26.0",
@@ -125,9 +124,9 @@
     "html-webpack-plugin": "^5.5.0",
     "lint-staged": "^13.0.2",
     "mini-css-extract-plugin": "^2.3.0",
-    "postcss": "^8.4.18",
+    "postcss": "^8.4.21",
     "postcss-loader": "^7.0.0",
-    "prettier": "^2.8.1",
+    "prettier": "^2.8.2",
     "simple-git-hooks": "^2.8.1",
     "source-map-loader": "^4.0.0",
     "tailwindcss": "^3.2.1",

src/components/block/BlockBase.vue

@@ -1,10 +1,20 @@
 <template>
   <div class="block-base relative w-48" @dblclick.stop="$emit('edit')">
     <div
-      class="top-0 w-full absolute block-menu-container hidden"
+      class="block-menu-container absolute top-0 hidden w-full"
       style="transform: translateY(-100%)"
     >
-      <div class="inline-flex items-center dark:text-gray-300 block-menu">
+      <div>
+        <p
+          title="Block id (click to copy)"
+          class="block-menu text-overflow inline-block px-1 dark:text-gray-300"
+          style="max-width: 96px; margin-bottom: 0"
+          @click="insertToClipboard"
+        >
+          {{ isCopied ? '✅ Copied' : blockId }}
+        </p>
+      </div>
+      <div class="block-menu inline-flex items-center dark:text-gray-300">
         <button
           v-if="!blockData.details?.disableDelete"
           title="Delete block"
@@ -54,14 +64,14 @@
       </div>
     </div>
     <slot name="prepend" />
-    <ui-card :class="contentClass" class="z-10 relative block-base__content">
+    <ui-card :class="contentClass" class="block-base__content relative z-10">
       <slot></slot>
     </ui-card>
     <slot name="append" />
   </div>
 </template>
 <script setup>
-import { inject } from 'vue';
+import { inject, ref } from 'vue';
 import { excludeGroupBlocks } from '@/utils/shared';
 
 const props = defineProps({
@@ -84,8 +94,17 @@ const props = defineProps({
 });
 defineEmits(['delete', 'edit', 'update', 'settings']);
 
+const isCopied = ref(false);
 const workflowUtils = inject('workflow-utils', null);
 
+function insertToClipboard() {
+  navigator.clipboard.writeText(props.blockId);
+
+  isCopied.value = true;
+  setTimeout(() => {
+    isCopied.value = false;
+  }, 1000);
+}
 function handleStartDrag(event) {
   const payload = {
     data: props.data,

src/components/block/BlockBasic.vue

@@ -20,14 +20,14 @@
     <div class="flex items-center">
       <span
         :class="data.disableBlock ? 'bg-box-transparent' : block.category.color"
-        class="inline-block p-2 mr-2 rounded-lg dark:text-black"
+        class="mr-2 inline-block rounded-lg p-2 dark:text-black"
       >
         <v-remixicon
           :path="getIconPath(block.details.icon)"
           :name="block.details.icon || 'riGlobalLine'"
         />
       </span>
-      <div class="overflow-hidden flex-1">
+      <div class="flex-1 overflow-hidden">
         <span
           v-if="blockErrors"
           v-tooltip="{
@@ -40,20 +40,20 @@
         </span>
         <p
           v-if="block.details.id"
-          class="font-semibold leading-tight text-overflow whitespace-nowrap"
+          class="text-overflow whitespace-nowrap font-semibold leading-tight"
         >
           {{ getBlockName() }}
         </p>
         <p
           :class="{ 'mb-1': data.description && data.loopId }"
-          class="text-gray-600 dark:text-gray-200 text-overflow leading-tight"
+          class="text-overflow leading-tight text-gray-600 dark:text-gray-200"
         >
           {{ data.description }}
         </p>
         <span
           v-if="showTextToCopy"
           :title="showTextToCopy.name + ' (click to copy)'"
-          class="bg-box-transparent rounded-br-lg text-gray-600 dark:text-gray-200 text-overflow rounded-sm py-px px-1 text-xs absolute bottom-0 right-0"
+          class="bg-box-transparent text-overflow absolute bottom-0 right-0 rounded-sm rounded-br-lg py-px px-1 text-xs text-gray-600 dark:text-gray-200"
           style="max-width: 40%; cursor: pointer"
           @click.stop="insertToClipboard(showTextToCopy.value)"
         >

src/components/block/BlockBasicWithFallback.vue

@@ -14,18 +14,18 @@
     <div class="flex items-center">
       <span
         :class="data.disableBlock ? 'bg-box-transparent' : block.category.color"
-        class="inline-block p-2 mr-2 rounded-lg dark:text-black"
+        class="mr-2 inline-block rounded-lg p-2 dark:text-black"
       >
         <v-remixicon :name="block.details.icon || 'riGlobalLine'" />
       </span>
-      <div class="overflow-hidden flex-1">
+      <div class="flex-1 overflow-hidden">
         <p
           v-if="block.details.id"
-          class="font-semibold leading-tight text-overflow whitespace-nowrap"
+          class="text-overflow whitespace-nowrap font-semibold leading-tight"
         >
           {{ t(`workflow.blocks.${block.details.id}.name`) }}
         </p>
-        <p class="text-gray-600 dark:text-gray-200 text-overflow leading-tight">
+        <p class="text-overflow leading-tight text-gray-600 dark:text-gray-200">
           {{ data.description }}
         </p>
       </div>

src/components/block/BlockConditions.vue

@@ -14,15 +14,15 @@
     <div class="flex items-center">
       <div
         :class="data.disableBlock ? 'bg-box-transparent' : block.category.color"
-        class="inline-block text-sm mr-4 p-2 rounded-lg dark:text-black"
+        class="mr-4 inline-block rounded-lg p-2 text-sm dark:text-black"
       >
-        <v-remixicon name="riAB" size="20" class="inline-block mr-1" />
+        <v-remixicon name="riAB" size="20" class="mr-1 inline-block" />
         <span>{{ t('workflow.blocks.conditions.name') }}</span>
       </div>
     </div>
     <p
       v-show="data.description"
-      class="text-gray-600 mt-2 dark:text-gray-200 text-overflow leading-tight"
+      class="text-overflow mt-2 leading-tight text-gray-600 dark:text-gray-200"
     >
       {{ data.description }}
     </p>
@@ -33,7 +33,7 @@
       <li
         v-for="item in data.conditions"
         :key="item.id"
-        class="flex items-center flex-1 p-2 bg-box-transparent rounded-lg w-full relative"
+        class="bg-box-transparent relative flex w-full flex-1 items-center rounded-lg p-2"
         @dblclick.stop="$emit('edit', { editCondition: item.id })"
       >
         <p
@@ -44,13 +44,13 @@
           {{ item.name }}
         </p>
         <template v-else>
-          <p class="w-5/12 text-overflow text-right">
+          <p class="text-overflow w-5/12 text-right">
             {{ item.compareValue || '_____' }}
           </p>
-          <p class="w-2/12 text-center mx-1 font-mono">
+          <p class="mx-1 w-2/12 text-center font-mono">
             {{ item.type }}
           </p>
-          <p class="w-5/12 text-overflow">
+          <p class="text-overflow w-5/12">
             {{ item.value || '_____' }}
           </p>
         </template>

src/components/block/BlockDelay.vue

@@ -10,15 +10,15 @@
     @settings="$emit('settings', $event)"
   >
     <Handle :id="`${id}-input-1`" type="target" :position="Position.Left" />
-    <div class="flex items-center mb-2">
+    <div class="mb-2 flex items-center">
       <div
         :class="data.disableBlock ? 'bg-box-transparent' : block.category.color"
-        class="inline-block text-sm mr-4 p-2 rounded-lg dark:text-black"
+        class="mr-4 inline-block rounded-lg p-2 text-sm dark:text-black"
       >
-        <v-remixicon name="riTimerLine" size="20" class="inline-block mr-1" />
+        <v-remixicon name="riTimerLine" size="20" class="mr-1 inline-block" />
         <span>{{ t('workflow.blocks.delay.name') }}</span>
       </div>
-      <div class="flex-grow"></div>
+      <div class="grow"></div>
       <v-remixicon
         name="riDeleteBin7Line"
         class="cursor-pointer"
@@ -30,16 +30,17 @@
       min="0"
       :title="t('workflow.blocks.delay.input.title')"
       :placeholder="t('workflow.blocks.delay.input.placeholder')"
-      class="px-4 py-2 w-full rounded-lg bg-input"
+      class="bg-input w-full rounded-lg px-4 py-2"
       type="text"
       required
+      @keydown.stop
       @input="$emit('update', { time: $event.target.value })"
     />
     <div
       v-if="block.details.id !== 'trigger'"
       :title="t('workflow.blocks.base.moveToGroup')"
       draggable="true"
-      class="bg-white dark:bg-gray-700 invisible move-to-group z-50 absolute -top-2 -right-2 rounded-md p-1 shadow-md"
+      class="move-to-group invisible absolute -top-2 -right-2 z-50 rounded-md bg-white p-1 shadow-md dark:bg-gray-700"
       @dragstart="handleStartDrag"
       @mousedown.stop
     >

src/components/block/BlockElementExists.vue

@@ -13,15 +13,15 @@
     <Handle :id="`${id}-input-1`" type="target" :position="Position.Left" />
     <div
       :class="data.disableBlock ? 'bg-box-transparent' : block.category.color"
-      class="inline-block text-sm mb-2 p-2 rounded-lg dark:text-black"
+      class="mb-2 inline-block rounded-lg p-2 text-sm dark:text-black"
     >
-      <v-remixicon name="riFocus3Line" size="20" class="inline-block mr-1" />
+      <v-remixicon name="riFocus3Line" size="20" class="mr-1 inline-block" />
       <span>{{ t('workflow.blocks.element-exists.name') }}</span>
     </div>
     <p
       :title="t('workflow.blocks.element-exists.selector')"
       :class="{ 'font-mono': !data.description }"
-      class="text-overflow p-2 rounded-lg bg-box-transparent text-sm text-right mb-2"
+      class="text-overflow bg-box-transparent mb-2 rounded-lg p-2 text-right text-sm"
       style="max-width: 200px"
     >
       {{

src/components/block/BlockGroup.vue

@@ -13,17 +13,17 @@
   >
     <Handle :id="`${id}-input-1`" type="target" :position="Position.Left" />
     <div class="p-4">
-      <div class="flex items-center mb-2">
+      <div class="mb-2 flex items-center">
         <div
           :class="
             data.disableBlock ? 'bg-box-transparent' : block.category.color
           "
-          class="inline-flex items-center text-sm mr-4 p-2 rounded-lg dark:text-black"
+          class="mr-4 inline-flex items-center rounded-lg p-2 text-sm dark:text-black"
         >
           <v-remixicon
             :name="block.details.icon || 'riFolderZipLine'"
             size="20"
-            class="inline-block mr-2"
+            class="mr-2 inline-block"
           />
           <span>{{ t('workflow.blocks.blocks-group.name') }}</span>
         </div>
@@ -32,7 +32,7 @@
         :value="data.name"
         :placeholder="t('workflow.blocks.blocks-group.groupName')"
         type="text"
-        class="bg-transparent w-full focus:ring-0"
+        class="w-full bg-transparent focus:ring-0"
         @keydown.stop
         @input="$emit('update', { name: $event.target.value })"
       />
@@ -40,7 +40,7 @@
     <draggable
       :model-value="blocks"
       item-key="itemId"
-      class="px-4 pb-4 overflow-auto nowheel scroll text-sm space-y-1 max-h-60"
+      class="nowheel scroll max-h-60 space-y-1 overflow-auto px-4 pb-4 text-sm"
       @mousedown.stop
       @dragover.prevent
       @drop="handleDrop"
@@ -48,7 +48,7 @@
     >
       <template #item="{ element, index }">
         <div
-          class="p-2 rounded-lg bg-input space-x-2 flex items-center group"
+          class="bg-input group flex items-center space-x-2 rounded-lg p-2"
           style="cursor: grab"
           @dragstart="onDragStart(element, $event)"
           @dragend="onDragEnd(element.itemId)"
@@ -56,9 +56,9 @@
           <v-remixicon
             :name="tasks[element.id].icon"
             size="20"
-            class="flex-shrink-0"
+            class="shrink-0"
           />
-          <div class="leading-tight flex-1 overflow-hidden">
+          <div class="flex-1 overflow-hidden leading-tight">
             <p class="text-overflow">
               {{
                 getTranslation(
@@ -69,7 +69,7 @@
             </p>
             <p
               :title="element.data.description"
-              class="text-gray-600 dark:text-gray-200 text-overflow"
+              class="text-overflow text-gray-600 dark:text-gray-200"
             >
               {{ element.data.description }}
             </p>
@@ -78,19 +78,19 @@
             <v-remixicon
               name="riPencilLine"
               size="18"
-              class="cursor-pointer inline-block mr-2"
+              class="mr-2 inline-block cursor-pointer"
               @click="editBlock(element)"
             />
             <v-remixicon
               name="riSettings3Line"
               size="18"
-              class="cursor-pointer inline-block mr-2"
+              class="mr-2 inline-block cursor-pointer"
               @click="editItemSettings(element)"
             />
             <v-remixicon
               name="riDeleteBin7Line"
               size="18"
-              class="cursor-pointer inline-block"
+              class="inline-block cursor-pointer"
               @click="deleteItem(index, element.itemId)"
             />
           </div>
@@ -98,7 +98,7 @@
       </template>
       <template #footer>
         <div
-          class="p-2 rounded-lg text-gray-600 dark:text-gray-200 border text-center border-dashed"
+          class="rounded-lg border border-dashed p-2 text-center text-gray-600 dark:text-gray-200"
         >
           {{ t('workflow.blocks.blocks-group.dropText') }}
         </div>

src/components/block/BlockGroup2.vue

@@ -4,7 +4,7 @@
       width: `${data.width || 400}px`,
       height: `${data.height || 300}px`,
     }"
-    class="group-block-2 group relative border-2 rounded-lg relative"
+    class="group-block-2 group relative rounded-lg border-2"
     style="
       min-width: 400px;
       min-height: 300px;
@@ -12,12 +12,12 @@
       background-color: rgb(37, 99, 235, 0.3);
     "
   >
-    <div class="p-4 flex items-center">
+    <div class="flex items-center p-4">
       <input
         :value="data.name"
         placeholder="name"
         type="text"
-        class="px-4 py-2 bg-white rounded-lg"
+        class="rounded-lg bg-white px-4 py-2"
         @input="emit('update', { name: $event.target.value })"
       />
       <div class="flex-1" />
@@ -30,7 +30,7 @@
     <span
       ref="dragHandle"
       style="cursor: nw-resize"
-      class="drag-handle h-4 w-4 invisible group-hover:visible bg-accent absolute bottom-0 right-0"
+      class="drag-handle invisible absolute bottom-0 right-0 h-4 w-4 bg-accent group-hover:visible"
     />
   </div>
 </template>

src/components/block/BlockLoopBreakpoint.vue

@@ -10,15 +10,15 @@
     @settings="$emit('settings', $event)"
   >
     <Handle :id="`${id}-input-1`" type="target" :position="Position.Left" />
-    <div class="flex items-center mb-2">
+    <div class="mb-2 flex items-center">
       <div
         :class="data.disableBlock ? 'bg-box-transparent' : block.category.color"
-        class="inline-block text-sm mr-4 p-2 rounded-lg dark:text-black text-overflow"
+        class="text-overflow mr-4 inline-block rounded-lg p-2 text-sm dark:text-black"
       >
-        <v-remixicon name="riStopLine" size="20" class="inline-block mr-1" />
+        <v-remixicon name="riStopLine" size="20" class="mr-1 inline-block" />
         <span>{{ t('workflow.blocks.loop-breakpoint.name') }}</span>
       </div>
-      <div class="flex-grow"></div>
+      <div class="grow"></div>
       <v-remixicon
         name="riDeleteBin7Line"
         class="cursor-pointer"
@@ -27,10 +27,11 @@
     </div>
     <input
       :value="data.loopId"
-      class="px-4 py-2 rounded-lg w-full bg-input"
+      class="bg-input w-full rounded-lg px-4 py-2"
       placeholder="Loop ID"
       type="text"
       required
+      @keydown.stop
       @input="handleInput"
     />
     <ui-checkbox

src/components/block/BlockNote.vue

@@ -1,12 +1,12 @@
 <template>
   <div
     :class="[data.color || 'white', colors[data.color || 'white']]"
-    class="p-4 rounded-lg block-note"
+    class="block-note rounded-lg p-4"
     style="min-width: 192px"
   >
-    <div class="pb-2 border-b flex items-center">
+    <div class="flex items-center border-b pb-2">
       <v-remixicon name="riFileEditLine" size="20" />
-      <p class="flex-1 ml-2 mr-2 font-semibold">Note</p>
+      <p class="mx-2 flex-1 font-semibold">Note</p>
       <ui-popover class="note-color">
         <template #trigger>
           <v-remixicon
@@ -22,7 +22,7 @@
             :key="colorId"
             :class="color"
             style="border-width: 3px"
-            class="h-8 w-8 rounded-full inline-block cursor-pointer"
+            class="inline-block h-8 w-8 cursor-pointer rounded-full"
             @click="updateData({ color: colorId })"
           />
         </div>
@@ -57,7 +57,7 @@
       cols="30"
       rows="7"
       style="resize: both; min-width: 280px; min-height: 168px"
-      class="focus:ring-0 mt-2 bg-transparent"
+      class="mt-2 bg-transparent focus:ring-0"
       @keydown.stop
       @input="updateData({ note: $event.target.value })"
       @mousedown.stop

src/components/block/BlockPackage.vue

@@ -4,7 +4,7 @@
     :data="data"
     :block-id="id"
     :block-data="block"
-    class="w-64 block-package"
+    class="block-package w-64"
     @delete="$emit('delete', id)"
     @update="$emit('update', $event)"
     @settings="$emit('settings', $event)"
@@ -19,17 +19,17 @@
       />
       <div
         :class="data.disableBlock ? 'bg-box-transparent' : block.category.color"
-        class="inline-block text-sm mr-4 p-2 rounded-lg dark:text-black overflow-hidden"
+        class="mr-4 inline-block overflow-hidden rounded-lg p-2 text-sm dark:text-black"
       >
         <v-remixicon
           v-if="!data.icon.startsWith('http')"
           :name="data.icon"
           size="20"
-          class="inline-block mr-1"
+          class="mr-1 inline-block"
         />
         <span class="text-overflow">{{ data.name || 'Unnamed package' }}</span>
       </div>
-      <div class="flex-grow" />
+      <div class="grow" />
       <v-remixicon
         v-if="state.isInstalled"
         title="Update package"
@@ -45,13 +45,13 @@
         @click="installPackage"
       />
     </div>
-    <div class="grid grid-cols-2 mt-4 gap-x-2">
+    <div class="mt-4 grid grid-cols-2 gap-x-2">
       <ul class="pkg-handle-container">
         <li
           v-for="input in data.inputs"
           :key="input.id"
           :title="input.name"
-          class="relative target"
+          class="target relative"
         >
           <Handle
             :id="`${id}-input-${input.id}`"
@@ -66,7 +66,7 @@
           v-for="output in data.outputs"
           :key="output.id"
           :title="output.name"
-          class="relative source"
+          class="source relative"
         >
           <Handle
             :id="`${id}-output-${output.id}`"
@@ -79,7 +79,7 @@
     </div>
     <div
       v-if="data.author"
-      class="mt-1 text-sm text-gray-600 flex items-center dark:text-gray-200"
+      class="mt-1 flex items-center text-sm text-gray-600 dark:text-gray-200"
     >
       <p>By {{ data.author }}</p>
       <a

src/components/block/BlockRepeatTask.vue

@@ -10,16 +10,16 @@
     @settings="$emit('settings', $event)"
   >
     <Handle :id="`${id}-input-1`" type="target" :position="Position.Left" />
-    <div class="flex items-center mb-2">
+    <div class="mb-2 flex items-center">
       <div
         :class="data.disableBlock ? 'bg-box-transparent' : block.category.color"
-        class="inline-block text-sm mr-4 p-2 rounded-lg dark:text-black"
+        class="mr-4 inline-block rounded-lg p-2 text-sm dark:text-black"
       >
-        <v-remixicon name="riRepeat2Line" size="20" class="inline-block mr-1" />
+        <v-remixicon name="riRepeat2Line" size="20" class="mr-1 inline-block" />
         <span>{{ t('workflow.blocks.repeat-task.name') }}</span>
       </div>
     </div>
-    <div class="flex bg-input rounded-lg items-center relative">
+    <div class="bg-input relative flex items-center rounded-lg">
       <input
         :value="data.repeatFor"
         placeholder="0"
@@ -28,7 +28,7 @@
         @keydown.stop
         @input="handleInput"
       />
-      <span class="text-gray-600 dark:text-gray-200 absolute right-4">
+      <span class="absolute right-4 text-gray-600 dark:text-gray-200">
         {{ t('workflow.blocks.repeat-task.times') }}
       </span>
     </div>

src/components/content/selector/SelectorBlocks.vue

@@ -3,7 +3,7 @@
     <div class="flex items-center">
       <ui-select
         v-model="state.selectedBlock"
-        class="flex-1 mr-4 p-0.5"
+        class="mr-4 flex-1 p-0.5"
         placeholder="Select block"
         @change="onSelectChanged"
       >
@@ -28,7 +28,7 @@
     />
     <pre
       v-if="state.blockResult"
-      class="p-2 rounded-lg text-gray-100 bg-accent h-full mt-2 overflow-auto text-sm"
+      class="mt-2 h-full overflow-auto rounded-lg bg-accent p-2 text-sm text-gray-100"
       >{{ state.blockResult }}</pre
     >
   </div>

src/components/content/selector/SelectorElementList.vue

@@ -1,5 +1,5 @@
 <template>
-  <ul class="space-y-4 mt-2">
+  <ul class="mt-2 space-y-4">
     <li
       v-for="(element, index) in elements"
       :key="index"

src/components/content/selector/SelectorElementsDetail.vue

@@ -12,7 +12,7 @@
   </ui-tabs>
   <ui-tab-panels
     :model-value="activeTab"
-    class="overflow-y-auto scroll"
+    class="scroll overflow-y-auto"
     style="max-height: calc(100vh - 17rem)"
   >
     <ui-tab-panel value="attributes">
@@ -27,7 +27,7 @@
             class="bg-box-transparent mb-1 rounded-lg py-2 px-3"
           >
             <p
-              class="text-sm text-overflow leading-tight text-gray-600"
+              class="text-overflow text-sm leading-tight text-gray-600"
               title="Attribute name"
             >
               {{ name }}
@@ -71,7 +71,7 @@
             class="bg-box-transparent mb-1 rounded-lg py-2 px-3"
           >
             <p
-              class="text-sm text-overflow leading-tight text-gray-600"
+              class="text-overflow text-sm leading-tight text-gray-600"
               title="Option name"
             >
               {{ option.name }}
@@ -79,7 +79,7 @@
             <input
               :value="option.value"
               title="Option value"
-              class="text-overflow focus:ring-0 w-full bg-transparent"
+              class="text-overflow w-full bg-transparent focus:ring-0"
               readonly
               @click="$event.target.select()"
             />

src/components/content/selector/SelectorQuery.vue

@@ -36,12 +36,12 @@
       <ui-input
         :model-value="selector"
         placeholder="Element selector"
-        class="leading-normal flex-1 h-full element-selector"
+        class="element-selector h-full flex-1 leading-normal"
         @change="$emit('selector', $event)"
       >
         <template #prepend>
           <button
-            class="absolute ml-2 left-0"
+            class="absolute left-0 ml-2"
             @click.stop.prevent="copySelector"
           >
             <v-remixicon name="riFileCopyLine" />

src/components/newtab/app/AppLogs.vue

@@ -5,7 +5,7 @@
     content-position="start"
     @close="clearState"
   >
-    <ui-card class="w-full mt-8" style="max-width: 1400px; min-height: 600px">
+    <ui-card class="mt-8 w-full" style="max-width: 1400px; min-height: 600px">
       <app-logs-items
         v-if="!state.logId"
         :workflow-id="state.workflowId"

src/components/newtab/app/AppLogsItem.vue

@@ -4,13 +4,13 @@
       <button
         v-tooltip:bottom="t('workflow.blocks.go-back.name')"
         role="button"
-        class="h-12 px-1 transition mr-2 bg-input rounded-lg dark:text-gray-300 text-gray-600"
+        class="bg-input mr-2 h-12 rounded-lg px-1 text-gray-600 transition dark:text-gray-300"
         @click="$emit('close')"
       >
         <v-remixicon name="riArrowLeftSLine" />
       </button>
       <div>
-        <h1 class="text-2xl max-w-md text-overflow font-semibold">
+        <h1 class="text-overflow max-w-md text-2xl font-semibold">
           {{ currentLog.name }}
         </h1>
         <p class="text-gray-600 dark:text-gray-200">
@@ -25,7 +25,7 @@
           }}
         </p>
       </div>
-      <div class="flex-grow"></div>
+      <div class="grow"></div>
       <ui-button
         v-if="state.workflowExists"
         v-tooltip="t('log.goWorkflow')"
@@ -46,7 +46,7 @@
     </ui-tabs>
     <ui-tab-panels
       :model-value="state.activeTab"
-      class="mt-4 pb-4 overflow-auto scroll px-2"
+      class="scroll mt-4 overflow-auto px-2 pb-4"
       style="min-height: 500px; max-height: calc(100vh - 15rem)"
     >
       <ui-tab-panel value="logs">

src/components/newtab/app/AppLogsItemRunning.vue

@@ -4,13 +4,13 @@
       <button
         v-tooltip:bottom="t('workflow.blocks.go-back.name')"
         role="button"
-        class="h-12 px-1 transition mr-2 bg-input rounded-lg dark:text-gray-300 text-gray-600"
+        class="bg-input mr-2 h-12 rounded-lg px-1 text-gray-600 transition dark:text-gray-300"
         @click="$emit('close')"
       >
         <v-remixicon name="riArrowLeftSLine" />
       </button>
-      <div class="flex-grow overflow-hidden">
-        <h1 class="text-2xl max-w-md text-overflow font-semibold text-overflow">
+      <div class="grow overflow-hidden">
+        <h1 class="text-overflow max-w-md text-2xl font-semibold">
           {{ running.state.name }}
         </h1>
         <p>
@@ -49,14 +49,14 @@
           <div
             v-for="block in running.state.currentBlock"
             :key="block.id"
-            class="px-2 py-1 rounded-md w-full group hoverable flex items-center"
+            class="hoverable group flex w-full items-center rounded-md px-2 py-1"
           >
             <span
               :key="key"
               :title="`Duration: ${Math.round(
                 (Date.now() - block.startedAt) / 1000
               )}s`"
-              class="w-14 flex-shrink-0 text-overflow text-gray-400 ml-6"
+              class="text-overflow ml-6 w-14 shrink-0 text-gray-400"
             >
               {{ countDuration(block.startedAt, Date.now()) }}
             </span>
@@ -64,19 +64,6 @@
             <p class="flex-1">
               {{ t(`workflow.blocks.${block.name}.name`) }}
             </p>
-            <router-link
-              v-if="getBlockPath(block.id)"
-              :to="getBlockPath(block.id)"
-              title="Go to block"
-              class="invisible group-hover:visible"
-            >
-              <v-remixicon
-                name="riExternalLinkLine"
-                size="20"
-                title="Go to block"
-                class="text-gray-300 cursor-pointer ml-2 invisible group-hover:visible"
-              />
-            </router-link>
           </div>
         </template>
       </logs-history>
@@ -119,16 +106,6 @@ function stopWorkflow() {
   stopWorkflowExec(running.value.id);
   emit('close');
 }
-function getBlockPath(blockId) {
-  const { workflowId, teamId } = running.value;
-  let path = `/workflows/${workflowId}`;
-
-  if (workflowId.startsWith('team') && !teamId) return null;
-
-  path = `/teams/${teamId}/workflows/${workflowId}`;
-
-  return `${path}?blockId=${blockId}`;
-}
 
 watch(
   running,

src/components/newtab/app/AppLogsItems.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="pb-4 pt-1 overflow-auto logs-list">
-    <div class="flex items-center mb-8">
-      <h1 class="text-2xl font-semibold flex-1">
+  <div class="logs-list overflow-auto pb-4 pt-1">
+    <div class="mb-8 flex items-center">
+      <h1 class="flex-1 text-2xl font-semibold">
         {{ $t('common.log', 2) }}
       </h1>
       <v-remixicon
@@ -37,14 +37,14 @@
             />
             <div class="text-right">
               <span
-                class="underline text-sm cursor-pointer text-gray-600 dark:text-gray-300"
+                class="cursor-pointer text-sm text-gray-600 underline dark:text-gray-300"
                 @click="filtersBuilder.workflowId = ''"
               >
                 Clear
               </span>
             </div>
           </div>
-          <ui-list class="mb-4 px-4 space-y-1 overflow-auto max-h-96 scroll">
+          <ui-list class="scroll mb-4 max-h-96 space-y-1 overflow-auto px-4">
             <ui-list-item
               v-for="workflow in workflows"
               :key="workflow.id"
@@ -80,17 +80,17 @@
           <td class="ml-4 text-right">
             <v-remixicon
               name="riDeleteBin7Line"
-              class="text-red-500 inline-block dark:text-red-400 cursor-pointer"
+              class="inline-block cursor-pointer text-red-500 dark:text-red-400"
               @click="deleteLog(log.id)"
             />
           </td>
         </template>
       </shared-logs-table>
     </div>
-    <div class="md:flex md:items-center md:justify-between mt-4">
+    <div class="mt-4 md:flex md:items-center md:justify-between">
       <div>
         {{ t('components.pagination.text1') }}
-        <select v-model="pagination.perPage" class="p-1 rounded-md bg-input">
+        <select v-model="pagination.perPage" class="bg-input rounded-md p-1">
           <option v-for="num in [10, 15, 25, 50, 100]" :key="num" :value="num">
             {{ num }}
           </option>
@@ -106,7 +106,7 @@
     </div>
     <ui-card
       v-if="selectedLogs.length !== 0"
-      class="fixed right-0 bottom-0 m-5 shadow-xl space-x-2"
+      class="fixed right-0 bottom-0 m-5 space-x-2 shadow-xl"
     >
       <ui-button @click="selectAllLogs">
         {{

src/components/newtab/app/AppSidebar.vue

@@ -1,20 +1,20 @@
 <template>
   <aside
-    class="fixed flex flex-col items-center h-screen left-0 top-0 w-16 py-6 bg-white dark:bg-gray-800 z-50"
+    class="fixed left-0 top-0 z-50 flex h-screen w-16 flex-col items-center bg-white py-6 dark:bg-gray-800"
   >
     <img
       :title="`v${extensionVersion}`"
       src="@/assets/svg/logo.svg"
-      class="w-10 mb-4 mx-auto"
+      class="mx-auto mb-4 w-10"
     />
     <div
-      class="space-y-2 w-full relative text-center"
+      class="relative w-full space-y-2 text-center"
       @mouseleave="showHoverIndicator = false"
     >
       <div
         v-show="showHoverIndicator"
         ref="hoverIndicator"
-        class="rounded-lg h-10 w-10 absolute left-1/2 bg-box-transparent transition-transform duration-200"
+        class="bg-box-transparent absolute left-1/2 h-10 w-10 rounded-lg transition-transform duration-200"
         style="transform: translate(-50%, 0)"
       ></div>
       <router-link
@@ -32,23 +32,23 @@
           "
           :class="{ 'is-active': isActive }"
           :href="tab.id === 'log' ? '#' : href"
-          class="z-10 relative w-full flex items-center justify-center tab relative"
+          class="tab relative z-10 flex w-full items-center justify-center"
           @click="navigateLink($event, navigate, tab)"
           @mouseenter="hoverHandler"
         >
-          <div class="p-2 rounded-lg transition-colors inline-block">
+          <div class="inline-block rounded-lg p-2 transition-colors">
             <v-remixicon :name="tab.icon" />
           </div>
           <span
             v-if="tab.id === 'log' && runningWorkflowsLen > 0"
-            class="absolute h-4 w-4 text-xs dark:text-black text-white rounded-full bg-accent -top-1 right-2"
+            class="absolute -top-1 right-2 h-4 w-4 rounded-full bg-accent text-xs text-white dark:text-black"
           >
             {{ runningWorkflowsLen }}
           </span>
         </a>
       </router-link>
     </div>
-    <hr class="w-8/12 my-4" />
+    <hr class="my-4 w-8/12" />
     <button
       v-tooltip:right.group="$t('home.elementSelector.name')"
       class="focus:ring-0"
@@ -56,14 +56,14 @@
     >
       <v-remixicon name="riFocus3Line" />
     </button>
-    <div class="flex-grow"></div>
+    <div class="grow"></div>
     <ui-popover
       v-if="userStore.user"
       trigger="mouseenter click"
       placement="right"
     >
       <template #trigger>
-        <span class="inline-block p-1 bg-box-transparent rounded-full">
+        <span class="bg-box-transparent inline-block rounded-full p-1">
           <img
             :src="userStore.user.avatar_url"
             height="32"
@@ -74,13 +74,13 @@
       </template>
       <div class="w-44">
         <div class="flex items-center">
-          <p class="flex-1 text-overflow">
+          <p class="text-overflow flex-1">
             {{ userStore.user.username }}
           </p>
           <span
             title="Subscription"
             :class="subColors[userStore.user.subscription]"
-            class="px-2 py-1 rounded-md text-sm capitalize"
+            class="rounded-md px-2 py-1 text-sm capitalize"
           >
             {{ userStore.user.subscription }}
           </span>

src/components/newtab/app/AppSurvey.vue

@@ -1,27 +1,27 @@
 <template>
   <ui-card
     v-if="modalState.show"
-    class="fixed bottom-8 right-8 shadow-2xl border-2 w-72 group"
+    class="group fixed bottom-8 right-8 w-72 border-2 shadow-2xl"
   >
     <button
-      class="absolute bg-white shadow-md rounded-full -right-2 -top-2 transition scale-0 group-hover:scale-100"
+      class="absolute -right-2 -top-2 scale-0 rounded-full bg-white shadow-md transition group-hover:scale-100"
       @click="closeModal"
     >
       <v-remixicon class="text-gray-600" name="riCloseLine" />
     </button>
-    <h2 class="font-semibold text-lg">
+    <h2 class="text-lg font-semibold">
       {{ activeModal.title }}
     </h2>
-    <p class="mt-1 dark:text-gray-100 text-gray-700">
+    <p class="mt-1 text-gray-700 dark:text-gray-100">
       {{ activeModal.body }}
     </p>
-    <div class="space-y-2 mt-4">
+    <div class="mt-4 space-y-2">
       <ui-button
         :href="activeModal.url"
         tag="a"
         target="_blank"
         rel="noopener"
-        class="w-full block"
+        class="block w-full"
         variant="accent"
       >
         {{ activeModal.button }}

src/components/newtab/logs/LogsDataViewer.vue

@@ -1,15 +1,15 @@
 <template>
-  <div v-if="state.status === 'loading'" class="text-center py-8">
+  <div v-if="state.status === 'loading'" class="py-8 text-center">
     <ui-spinner color="text-primary" />
   </div>
   <template v-else-if="state.status === 'idle'">
-    <div class="flex items-center mb-2">
+    <div class="mb-2 flex items-center">
       <ui-input
         v-model="state.fileName"
         :placeholder="t('common.fileName')"
         :title="t('common.fileName')"
       />
-      <div class="flex-grow"></div>
+      <div class="grow"></div>
       <ui-popover trigger-width>
         <template #trigger>
           <ui-button variant="accent">

src/components/newtab/logs/LogsFilters.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center mb-6 md:space-x-4 flex-wrap">
+  <div class="mb-6 flex flex-wrap items-center md:space-x-4">
     <ui-input
       id="search-input"
       :model-value="filters.query"
@@ -9,10 +9,10 @@
       @change="updateFilters('query', $event)"
     />
     <slot />
-    <div class="flex items-center workflow-sort w-5/12 ml-4 md:ml-0 md:w-auto">
+    <div class="workflow-sort ml-4 flex w-5/12 items-center md:ml-0 md:w-auto">
       <ui-button
         icon
-        class="rounded-r-none border-gray-300 border-r"
+        class="rounded-r-none border-r border-gray-300"
         @click="updateSorts('order', sorts.order === 'asc' ? 'desc' : 'asc')"
       >
         <v-remixicon
@@ -37,7 +37,7 @@
         </ui-button>
       </template>
       <div class="w-48">
-        <p class="flex-1 mb-2 font-semibold">{{ t('log.filter.title') }}</p>
+        <p class="mb-2 flex-1 font-semibold">{{ t('log.filter.title') }}</p>
         <p class="mb-2 text-sm text-gray-600 dark:text-gray-200">
           {{ t('log.filter.byStatus') }}
         </p>
@@ -47,13 +47,13 @@
             :key="status.id"
             :model-value="filters.byStatus"
             :value="status.id"
-            class="capitalize text-sm"
+            class="text-sm capitalize"
             @change="updateFilters('byStatus', $event)"
           >
             {{ status.name }}
           </ui-radio>
         </div>
-        <p class="mb-1 text-sm text-gray-600 dark:text-gray-200 mt-3">
+        <p class="mb-1 mt-3 text-sm text-gray-600 dark:text-gray-200">
           {{ t('log.filter.byDate.title') }}
         </p>
         <ui-select
@@ -67,7 +67,7 @@
         </ui-select>
       </div>
     </ui-popover>
-    <ui-button class="ml-4 md:ml-0 mt-4 md:mt-0" @click="$emit('clear')">
+    <ui-button class="ml-4 mt-4 md:ml-0 md:mt-0" @click="$emit('clear')">
       <v-remixicon name="riDeleteBin7Line" class="mr-2 -ml-1" />
       <span>
         {{ t('log.clearLogs.title') }}

src/components/newtab/logs/LogsHistory.vue

@@ -8,14 +8,12 @@
     <v-remixicon name="riArrowLeftLine" class="mr-2" />
     {{ t('log.goBack', { name: parentLog.name }) }}
   </router-link>
-  <div class="flex items-start flex-col-reverse lg:flex-row">
-    <div class="lg:flex-1 w-full lg:w-auto">
-      <div class="rounded-lg bg-gray-900 text-gray-100 dark">
-        <div
-          class="border-b px-4 pt-4 flex items-center text-gray-200 pb-4 mb-4"
-        >
+  <div class="flex flex-col-reverse items-start lg:flex-row">
+    <div class="w-full lg:w-auto lg:flex-1">
+      <div class="dark rounded-lg bg-gray-900 text-gray-100">
+        <div class="mb-4 flex items-center border-b p-4 text-gray-200">
           <div v-if="currentLog.status === 'error' && errorBlock">
-            <p class="leading-tight line-clamp">
+            <p class="line-clamp leading-tight">
               {{ errorBlock.message }}
               <a
                 v-if="errorBlock.messageId"
@@ -27,7 +25,7 @@
                 <v-remixicon
                   name="riArrowLeftLine"
                   size="20"
-                  class="text-gray-300 inline-block"
+                  class="inline-block text-gray-300"
                   rotate="135"
                 />
               </a>
@@ -36,14 +34,14 @@
               On the {{ errorBlock.name }} block
               <v-remixicon
                 name="riArrowLeftLine"
-                class="inline-block -ml-1"
+                class="-ml-1 inline-block"
                 size="18"
                 rotate="135"
               />
             </p>
           </div>
           <slot name="header-prepend" />
-          <div class="flex-grow" />
+          <div class="grow" />
           <ui-popover v-if="!isRunning" trigger-width class="mr-4">
             <template #trigger>
               <ui-button>
@@ -75,28 +73,28 @@
         <div
           id="log-history"
           style="max-height: 500px"
-          class="scroll p-4 overflow-auto"
+          class="scroll overflow-auto p-4"
         >
           <slot name="prepend" />
           <p
             v-if="currentLog.history.length === 0"
-            class="text-gray-300 text-center"
+            class="text-center text-gray-300"
           >
             The workflow log is not saved
           </p>
-          <div class="text-sm font-mono space-y-1 w-full overflow-auto">
+          <div class="w-full space-y-1 overflow-auto font-mono text-sm">
             <div
               v-for="(item, index) in history"
               :key="item.id || index"
               :disabled="!ctxData[item.id]"
               :class="{ 'bg-box-transparent': item.id === state.itemId }"
               hide-header-icon
-              class="hoverable rounded-md px-2 w-full text-left focus:ring-0 py-1 rounded-md group cursor-default flex items-start"
+              class="hoverable group flex w-full cursor-default items-start rounded-md px-2 py-1 text-left focus:ring-0"
               @click="setActiveLog(item)"
             >
               <div
                 style="min-width: 54px"
-                class="flex-shrink-0 mr-4 text-overflow text-gray-400"
+                class="text-overflow mr-4 shrink-0 text-gray-400"
               >
                 <span
                   v-if="item.timestamp"
@@ -114,24 +112,24 @@
               <span
                 :class="logsType[item.type]?.color"
                 :title="item.type"
-                class="w-2/12 flex-shrink-0 text-overflow"
+                class="text-overflow w-2/12 shrink-0"
               >
                 <v-remixicon
                   :name="logsType[item.type]?.icon"
                   size="18"
-                  class="inline-block -mr-1 align-text-top"
+                  class="-mr-1 inline-block align-text-top"
                 />
                 {{ item.name }}
               </span>
               <span
                 :title="`${t('common.description')} (${item.description})`"
-                class="ml-2 w-2/12 text-overflow flex-shrink-0"
+                class="text-overflow ml-2 w-2/12 shrink-0"
               >
                 {{ item.description }}
               </span>
               <p
                 :title="item.message"
-                class="text-sm line-clamp ml-2 flex-1 leading-tight text-gray-600 dark:text-gray-200"
+                class="line-clamp ml-2 flex-1 text-sm leading-tight text-gray-600 dark:text-gray-200"
               >
                 {{ item.message }}
                 <a
@@ -144,7 +142,7 @@
                   <v-remixicon
                     name="riArrowLeftLine"
                     size="20"
-                    class="text-gray-300 inline-block"
+                    class="inline-block text-gray-300"
                     rotate="135"
                   />
                 </a>
@@ -157,14 +155,14 @@
               >
                 <v-remixicon
                   title="Open log detail"
-                  class="ml-2 text-gray-300 cursor-pointer"
+                  class="ml-2 cursor-pointer text-gray-300"
                   size="20"
                   name="riFileTextLine"
                   @click.stop="navigate"
                 />
               </router-link>
               <router-link
-                v-if="getBlockPath(item.blockId)"
+                v-if="!isRunning && getBlockPath(item.blockId)"
                 v-show="currentLog.workflowId && item.blockId"
                 :to="getBlockPath(item.blockId)"
               >
@@ -172,7 +170,7 @@
                   name="riExternalLinkLine"
                   size="20"
                   title="Go to block"
-                  class="text-gray-300 cursor-pointer ml-2 invisible group-hover:visible"
+                  class="invisible ml-2 cursor-pointer text-gray-300 group-hover:visible"
                 />
               </router-link>
             </div>
@@ -182,11 +180,11 @@
       </div>
       <div
         v-if="currentLog.history.length >= 25"
-        class="lg:flex lg:items-center lg:justify-between mt-4"
+        class="mt-4 lg:flex lg:items-center lg:justify-between"
       >
         <div class="mb-4 lg:mb-0">
           {{ t('components.pagination.text1') }}
-          <select v-model="pagination.perPage" class="p-1 rounded-md bg-input">
+          <select v-model="pagination.perPage" class="bg-input rounded-md p-1">
             <option
               v-for="num in [25, 50, 75, 100, 150, 200]"
               :key="num"
@@ -210,15 +208,15 @@
     </div>
     <div
       v-if="state.itemId && activeLog"
-      class="w-full lg:w-4/12 lg:ml-8 mb-4 lg:mb-0 rounded-lg bg-gray-900 text-gray-100 dark"
+      class="dark mb-4 w-full rounded-lg bg-gray-900 text-gray-100 lg:ml-8 lg:mb-0 lg:w-4/12"
     >
-      <div class="p-4 relative">
+      <div class="relative p-4">
         <v-remixicon
           name="riCloseLine"
           class="absolute top-2 right-2 cursor-pointer text-gray-500"
           @click="clearActiveItem"
         />
-        <table class="w-full ctx-data-table">
+        <table class="ctx-data-table w-full">
           <thead>
             <tr>
               <td class="w-5/12"></td>
@@ -263,16 +261,16 @@
           </tbody>
         </table>
       </div>
-      <div class="px-4 pb-4 flex items-center">
+      <div class="flex items-center px-4 pb-4">
         <p>Log data</p>
-        <div class="flex-grow" />
+        <div class="grow" />
         <ui-select v-model="state.activeTab">
           <option v-for="option in tabs" :key="option.id" :value="option.id">
             {{ option.name }}
           </option>
         </ui-select>
       </div>
-      <div class="pb-4 px-2 log-data-prev">
+      <div class="log-data-prev px-2 pb-4">
         <shared-codemirror
           :model-value="logCtxData"
           readonly

src/components/newtab/logs/LogsTable.vue

@@ -15,7 +15,7 @@
         <ui-tab value="table"> Table </ui-tab>
         <ui-tab value="raw"> Raw </ui-tab>
       </ui-tabs>
-      <div class="flex-grow"></div>
+      <div class="grow"></div>
       <ui-input
         v-if="state.activeTab === 'table'"
         v-model="state.query"
@@ -65,11 +65,11 @@
         tableData.body &&
         tableData.body.length >= 10
       "
-      class="flex items-center justify-between mt-4"
+      class="mt-4 flex items-center justify-between"
     >
       <div>
         {{ t('components.pagination.text1') }}
-        <select v-model="pagination.perPage" class="p-1 rounded-md bg-input">
+        <select v-model="pagination.perPage" class="bg-input rounded-md p-1">
           <option
             v-for="num in [10, 15, 25, 50, 100, 150]"
             :key="num"

src/components/newtab/logs/LogsVariables.vue

@@ -15,11 +15,11 @@
       <ui-tab value="raw"> Raw </ui-tab>
     </ui-tabs>
     <div v-if="state.activeTab === 'gui'" class="mt-4">
-      <ul class="space-y-2 grid grid-cols-1 md:grid-cols-2 gap-4">
+      <ul class="grid grid-cols-1 gap-4 space-y-2 md:grid-cols-2">
         <li
           v-for="(varValue, varName) in variables"
           :key="varName"
-          class="px-2 pb-2 pt-1 rounded-lg flex items-center border-2 space-x-2"
+          class="flex items-center space-x-2 rounded-lg border-2 px-2 pb-2 pt-1"
         >
           <ui-input
             :model-value="varName"

src/components/newtab/package/PackageDetails.vue

@@ -8,7 +8,7 @@
       @change="updatePackage({ name: $event })"
     />
     <label class="mt-4 block w-full">
-      <span class="text-sm ml-1 text-gray-600 dark:text-gray-200">
+      <span class="ml-1 text-sm text-gray-600 dark:text-gray-200">
         Short description
       </span>
       <ui-textarea
@@ -21,13 +21,13 @@
       :model-value="data.content"
       :placeholder="$t('common.description')"
       :limit="5000"
-      class="prose prose-zinc dark:prose-invert mt-4 max-w-none content-editor p-4 bg-box-transparent rounded-lg relative"
+      class="content-editor bg-box-transparent prose prose-zinc relative mt-4 max-w-none rounded-lg p-4 dark:prose-invert"
       @change="updatePackage({ content: $event })"
       @count="state.contentLength = $event"
     >
       <template #append>
         <p
-          class="text-sm text-gray-600 dark:text-gray-200 absolute bottom-2 right-2"
+          class="absolute bottom-2 right-2 text-sm text-gray-600 dark:text-gray-200"
         >
           {{ state.contentLength }}/5000
         </p>

src/components/newtab/package/PackageSettingIOSelect.vue

@@ -10,11 +10,11 @@
         v-if="state.selectType === 'nodes'"
         v-model="state.query"
         placeholder="Search..."
-        class="w-full mb-4"
+        class="mb-4 w-full"
       />
       <template v-else>
         <div
-          class="flex items-center cursor-pointer"
+          class="flex cursor-pointer items-center"
           @click="state.selectType = 'nodes'"
         >
           <v-remixicon
@@ -22,7 +22,7 @@
             title="Go back"
             class="mr-1 -ml-1"
           />
-          <span class="flex-1 text-overflow">
+          <span class="text-overflow flex-1">
             {{ getBlockName(selectedNode) }}
           </span>
         </div>

src/components/newtab/package/PackageSettings.vue

@@ -5,7 +5,7 @@
       {{ $t('packages.settings.asBlock') }}
     </span>
   </label>
-  <div v-if="packageState.settings.asBlock" class="mt-6 pb-8 flex space-x-6">
+  <div v-if="packageState.settings.asBlock" class="mt-6 flex space-x-6 pb-8">
     <div class="flex-1">
       <p class="font-semibold">Block inputs</p>
       <div class="mt-4">
@@ -24,10 +24,10 @@
         >
           <template #item="{ element, index }">
             <div
-              class="grid grid-cols-12 mb-2 relative gap-x-4 items-center group"
+              class="group relative mb-2 grid grid-cols-12 items-center gap-x-4"
             >
               <span
-                class="absolute left-0 handle -ml-6 cursor-move invisible group-hover:visible"
+                class="handle invisible absolute left-0 -ml-6 cursor-move group-hover:visible"
               >
                 <v-remixicon name="mdiDrag" />
               </span>
@@ -36,7 +36,7 @@
                 class="col-span-5"
                 :placeholder="`Input ${index + 1}`"
               />
-              <div class="flex items-center col-span-6">
+              <div class="col-span-6 flex items-center">
                 <ui-button
                   v-tooltip="'Go to block'"
                   class="mr-2"
@@ -55,7 +55,7 @@
               <div class="col-span-1 text-right">
                 <v-remixicon
                   name="riDeleteBin7Line"
-                  class="cursor-pointer text-gray-600 dark:text-gray-200 inline-block"
+                  class="inline-block cursor-pointer text-gray-600 dark:text-gray-200"
                   @click="deleteBlockIo('inputs', index)"
                 />
               </div>
@@ -83,10 +83,10 @@
         >
           <template #item="{ element, index }">
             <div
-              class="grid grid-cols-12 mb-2 relative gap-x-4 items-center group"
+              class="group relative mb-2 grid grid-cols-12 items-center gap-x-4"
             >
               <span
-                class="absolute left-0 handle -ml-6 cursor-move invisible group-hover:visible"
+                class="handle invisible absolute left-0 -ml-6 cursor-move group-hover:visible"
               >
                 <v-remixicon name="mdiDrag" />
               </span>
@@ -95,7 +95,7 @@
                 class="col-span-5"
                 :placeholder="`Output ${index + 1}`"
               />
-              <div class="flex items-center col-span-6">
+              <div class="col-span-6 flex items-center">
                 <ui-button
                   v-tooltip="'Go to block'"
                   class="mr-2"
@@ -114,7 +114,7 @@
               <div class="col-span-1 text-right">
                 <v-remixicon
                   name="riDeleteBin7Line"
-                  class="cursor-pointer text-gray-600 dark:text-gray-200 inline-block"
+                  class="inline-block cursor-pointer text-gray-600 dark:text-gray-200"
                   @click="deleteBlockIo('outputs', index)"
                 />
               </div>

src/components/newtab/settings/SettingsBackupItems.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="overflow-auto scroll w-full content">
+  <div class="scroll content w-full overflow-auto">
     <div v-if="!query && workflows.length === 0" class="text-center">
       <img src="@/assets/svg/files-and-folder.svg" class="mx-auto max-w-sm" />
       <p class="text-xl font-semibold">{{ t('message.noData') }}</p>
@@ -9,7 +9,7 @@
         v-for="workflow in workflows"
         :key="workflow.id"
         :class="{ 'bg-box-transparent': isActive(workflow.id) }"
-        class="overflow-hidden group"
+        class="group overflow-hidden"
       >
         <ui-checkbox
           v-if="!isLocal || !workflow.isInCloud"
@@ -18,7 +18,7 @@
           class="mr-4"
           @change="toggleDeleteWorkflow($event, workflow.id)"
         />
-        <div v-else class="w-5 h-5 mr-4" />
+        <div v-else class="mr-4 h-5 w-5" />
         <ui-img
           v-if="workflow.icon?.startsWith('http')"
           :src="workflow.icon"
@@ -26,10 +26,10 @@
           alt="Can not display"
         />
         <v-remixicon v-else :name="workflow.icon" />
-        <div class="flex-1 ml-2 overflow-hidden">
+        <div class="ml-2 flex-1 overflow-hidden">
           <p class="text-overflow flex-1">{{ workflow.name }}</p>
           <p
-            class="text-gray-600 text-sm dark:text-gray-200 leading-tight text-overflow"
+            class="text-overflow text-sm leading-tight text-gray-600 dark:text-gray-200"
           >
             {{ workflow.description }}
           </p>
@@ -55,7 +55,7 @@
         )
       }}
     </ui-checkbox>
-    <div class="flex-grow"></div>
+    <div class="grow"></div>
     <span> {{ modelValue.length }}/{{ limit }} </span>
   </div>
 </template>

src/components/newtab/settings/SettingsCloudBackup.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-start mt-4 cloud-backup">
+  <div class="cloud-backup mt-4 flex items-start">
     <div class="w-56">
       <ui-input
         v-model="state.query"
@@ -23,7 +23,7 @@
           {{ t(`settings.backupWorkflows.cloud.buttons.${location}`) }}
           <span
             v-if="location === 'cloud'"
-            class="ml-2 text-sm rounded-full bg-accent dark:text-black text-gray-100 text-center"
+            class="ml-2 rounded-full bg-accent text-center text-sm text-gray-100 dark:text-black"
             style="height: 29px; width: 29px; line-height: 29px"
           >
             {{ state.cloudWorkflows.length }}
@@ -51,10 +51,10 @@
         ({{ state.deleteIds.length }})
       </ui-button>
     </div>
-    <div v-if="!state.backupRetrieved" class="text-center block flex-1 content">
+    <div v-if="!state.backupRetrieved" class="content block flex-1 text-center">
       <ui-spinner color="text-accent" />
     </div>
-    <div v-else class="flex-1 ml-4 overflow-hidden">
+    <div v-else class="ml-4 flex-1 overflow-hidden">
       <template v-if="state.activeTab === 'cloud'">
         <settings-backup-items
           v-slot="{ workflow }"
@@ -69,7 +69,7 @@
               workflow,
               'DD MMMM YYYY, hh:mm A'
             )}`"
-            class="ml-4 w-3/12 mr-8"
+            class="ml-4 mr-8 w-3/12"
           >
             {{ formatDate(workflow, 'DD MMM YYYY') }}
           </p>
@@ -78,7 +78,7 @@
             color="text-accent"
             class="ml-4"
           />
-          <div v-else class="ml-4 invisible group-hover:visible">
+          <div v-else class="invisible ml-4 group-hover:visible">
             <button
               v-if="workflow.hasLocalCopy"
               title="Sync cloud backup to local"
@@ -138,7 +138,7 @@
                 !backupState.uploading &&
                 state.selectedWorkflows.length <= workflowLimit
               "
-              class="ml-4 invisible group-hover:visible"
+              class="invisible ml-4 group-hover:visible"
               title="Backup workflow"
               @click="backupWorkflowsToCloud(workflow.id)"
             >

src/components/newtab/shared/SharedCard.vue

@@ -1,9 +1,9 @@
 <template>
   <ui-card
-    class="hover:ring-2 flex flex-col group hover:ring-accent dark:hover:ring-gray-200"
+    class="group flex flex-col hover:ring-2 hover:ring-accent dark:hover:ring-gray-200"
   >
     <slot name="header">
-      <div class="flex items-center mb-4">
+      <div class="mb-4 flex items-center">
         <ui-img
           v-if="data.icon?.startsWith('http')"
           :src="data.icon"
@@ -11,10 +11,10 @@
           style="height: 40px; width: 40px"
           alt="Can not display"
         />
-        <span v-else class="p-2 rounded-lg bg-box-transparent">
+        <span v-else class="bg-box-transparent rounded-lg p-2">
           <v-remixicon :name="data.icon || icon" />
         </span>
-        <div class="flex-grow"></div>
+        <div class="grow"></div>
         <span
           v-if="data.isDisabled"
           class="text-sm text-gray-600 dark:text-gray-200"
@@ -28,7 +28,7 @@
         >
           <v-remixicon name="riPlayLine" />
         </button>
-        <ui-popover v-if="showDetails" class="h-6 ml-2">
+        <ui-popover v-if="showDetails" class="ml-2 h-6">
           <template #trigger>
             <button>
               <v-remixicon name="riMoreLine" />
@@ -50,13 +50,13 @@
         </ui-popover>
       </div>
     </slot>
-    <div class="cursor-pointer flex-1" @click="$emit('click', data)">
+    <div class="flex-1 cursor-pointer" @click="$emit('click', data)">
       <p class="line-clamp font-semibold leading-tight">
         {{ data.name }}
       </p>
       <p
         v-show="data.description"
-        class="text-gray-600 dark:text-gray-200 line-clamp leading-tight mb-1"
+        class="line-clamp mb-1 leading-tight text-gray-600 dark:text-gray-200"
       >
         {{ data.description }}
       </p>

src/components/newtab/shared/SharedCodemirror.vue

@@ -6,9 +6,9 @@
   >
     <div
       v-if="!hideLang"
-      class="absolute text-xs text-gray-300 px-2 items-center bottom-0 left-0 w-full h-6 flex z-10"
+      class="absolute bottom-0 left-0 z-10 flex h-6 w-full items-center px-2 text-xs text-gray-300"
     >
-      <div class="flex-grow" />
+      <div class="grow" />
       <span>
         {{ lang }}
       </span>

src/components/newtab/shared/SharedConditionBuilder/ConditionBuilderInputs.vue

@@ -6,11 +6,11 @@
   >
     <div
       v-if="item.category === 'value'"
-      class="flex items-end space-x-2 flex-wrap"
+      class="flex flex-wrap items-end space-x-2"
     >
       <ui-select
         :model-value="item.type"
-        class="flex-shrink-0"
+        class="shrink-0"
         @change="updateValueType($event, index)"
       >
         <optgroup

src/components/newtab/shared/SharedConditionBuilder/index.vue

@@ -4,14 +4,14 @@
       {{ t('workflow.conditionBuilder.add') }}
     </ui-button>
     <div v-for="(item, index) in conditions" :key="item.id">
-      <div class="flex relative condition-group">
+      <div class="condition-group relative flex">
         <div
           v-show="item.conditions.length > 1"
-          class="and-text mr-4 relative mb-12 flex items-center"
+          class="and-text relative mr-4 mb-12 flex items-center"
           :class="{ 'add-line': item.conditions.length > 1 }"
         >
           <span
-            class="py-1 w-14 text-center text-white dark:text-black rounded-md dark:bg-blue-300 bg-blue-500 inline-block z-10 relative"
+            class="relative z-10 inline-block w-14 rounded-md bg-blue-500 py-1 text-center text-white dark:bg-blue-300 dark:text-black"
           >
             {{ t('workflow.conditionBuilder.and') }}
           </span>
@@ -28,11 +28,11 @@
             <template #item="{ element: inputs, index: inputsIndex }">
               <div class="condition-item">
                 <ui-expand
-                  class="border rounded-lg w-full"
+                  class="w-full rounded-lg border"
                   header-class="px-4 py-2 w-full flex items-center h-full rounded-lg overflow-hidden group focus:ring-0"
                 >
                   <template #header>
-                    <p class="text-overflow flex-1 text-left space-x-2 w-64">
+                    <p class="text-overflow w-64 flex-1 space-x-2 text-left">
                       <span
                         v-for="input in inputs.items"
                         :key="`text-${input.id}`"
@@ -47,12 +47,12 @@
                     </p>
                     <v-remixicon
                       name="riDeleteBin7Line"
-                      class="ml-4 group-hover:visible invisible"
+                      class="invisible ml-4 group-hover:visible"
                       @click.stop="deleteCondition(index, inputsIndex)"
                     />
                     <v-remixicon
                       name="mdiDrag"
-                      class="ml-2 cursor-move handle"
+                      class="handle ml-2 cursor-move"
                     />
                   </template>
                   <div class="space-y-2 px-4 py-2">
@@ -68,7 +68,7 @@
               </div>
             </template>
           </draggable>
-          <div class="space-x-2 text-sm mt-2 condition-action">
+          <div class="condition-action mt-2 space-x-2 text-sm">
             <ui-button @click="addAndCondition(index)">
               <v-remixicon name="riAddLine" class="-ml-2 mr-1" size="20" />
               {{ t('workflow.conditionBuilder.and') }}
@@ -85,14 +85,14 @@
       </div>
       <div
         v-show="index !== conditions.length - 1"
-        class="text-left or-text relative mt-4"
+        class="or-text relative mt-4 text-left"
       >
         <span
-          class="line bg-indigo-500 dark:bg-indigo-400 w-full absolute top-1/2 -translate-y-1/2 left-0"
+          class="line absolute top-1/2 left-0 w-full -translate-y-1/2 bg-indigo-500 dark:bg-indigo-400"
           style="height: 2px"
         ></span>
         <span
-          class="py-1 dark:text-black rounded-md dark:bg-indigo-300 bg-indigo-500 w-14 relative z-10 inline-block text-white text-center"
+          class="relative z-10 inline-block w-14 rounded-md bg-indigo-500 py-1 text-center text-white dark:bg-indigo-300 dark:text-black"
         >
           {{ t('workflow.conditionBuilder.or') }}
         </span>

src/components/newtab/shared/SharedLogsTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="logs-table overflow-x-auto scroll">
+  <div class="logs-table scroll overflow-x-auto">
     <transition-expand>
       <div v-if="state.selected.length > 0" class="border-x border-t px-4 py-2">
         <ui-button @click="stopSelectedWorkflow"> Stop selected </ui-button>
@@ -8,7 +8,7 @@
     <table class="w-full">
       <tbody class="divide-y dark:divide-gray-800">
         <template v-if="running && running[0]?.state">
-          <tr v-for="item in running" :key="item.id" class="p-2 border">
+          <tr v-for="item in running" :key="item.id" class="border p-2">
             <td v-if="!hideSelect" class="w-8">
               <ui-checkbox
                 :model-value="state.selected.includes(item.id)"
@@ -43,7 +43,7 @@
             </td>
             <td title="Executing block" class="text-overflow">
               <ui-spinner color="text-accent" size="20" />
-              <span class="align-middle inline-block ml-3 text-overflow">
+              <span class="text-overflow ml-3 inline-block align-middle">
                 {{
                   getTranslation(
                     `workflow.blocks.${item.state.currentBlock[0].name}.name`,
@@ -54,7 +54,7 @@
             </td>
             <td class="text-right">
               <span
-                class="inline-block py-1 w-16 text-center text-sm rounded-md dark:text-black bg-blue-300"
+                class="inline-block w-16 rounded-md bg-blue-300 py-1 text-center text-sm dark:text-black"
               >
                 {{ t('common.running') }}
               </span>
@@ -112,7 +112,7 @@
             <span
               :class="statusColors[log.status]"
               :title="log.status === 'error' ? getErrorMessage(log) : null"
-              class="inline-block py-1 w-24 text-center text-sm rounded-md dark:text-black"
+              class="inline-block w-24 rounded-md py-1 text-center text-sm dark:text-black"
             >
               {{ t(`logStatus.${log.status}`) }}
             </span>

src/components/newtab/shared/SharedPermissionsModal.vue

@@ -15,13 +15,13 @@
           <p class="leading-tight">
             {{ t(`workflowPermissions.${permission}.title`) }}
           </p>
-          <p class="text-gray-600 dark:text-gray-200 leading-tight">
+          <p class="leading-tight text-gray-600 dark:text-gray-200">
             {{ t(`workflowPermissions.${permission}.description`) }}
           </p>
         </div>
       </ui-list-item>
     </ui-list>
-    <div class="text-right mt-8">
+    <div class="mt-8 text-right">
       <ui-button class="mr-2" @click="emit('update:modelValue', false)">
         {{ t('common.cancel') }}
       </ui-button>

src/components/newtab/shared/SharedWorkflowState.vue

@@ -1,10 +1,10 @@
 <template>
   <ui-card>
-    <div class="flex items-center mb-4">
-      <div class="flex-1 text-overflow mr-4">
-        <p class="w-full mr-2 text-overflow">{{ data.state.name }}</p>
+    <div class="mb-4 flex items-center">
+      <div class="text-overflow mr-4 flex-1">
+        <p class="text-overflow mr-2 w-full">{{ data.state.name }}</p>
         <p
-          class="w-full mr-2 text-gray-600 dark:text-gray-200 leading-tight text-overflow"
+          class="text-overflow mr-2 w-full leading-tight text-gray-600 dark:text-gray-200"
           :title="`Started at: ${formatDate(
             data.state.startedTimestamp,
             'DD MMM, hh:mm A'
@@ -27,14 +27,14 @@
         <span>{{ t('common.stop') }}</span>
       </ui-button>
     </div>
-    <div class="divide-y bg-box-transparent divide-y px-4 rounded-lg">
+    <div class="bg-box-transparent divide-y rounded-lg px-4">
       <div
         v-for="block in data.state.currentBlock"
         :key="block.id || block.name"
         class="flex items-center py-2"
       >
         <v-remixicon :name="blocks[block.name].icon" />
-        <p class="flex-1 ml-2 mr-4 text-overflow">
+        <p class="text-overflow ml-2 mr-4 flex-1">
           {{ blocks[block.name].name }}
         </p>
         <ui-spinner color="text-accent" size="20" />
@@ -42,7 +42,7 @@
     </div>
     <div
       v-if="data.parentState"
-      class="py-2 px-4 bg-yellow-200 rounded-lg mt-2 text-sm"
+      class="mt-2 rounded-lg bg-yellow-200 py-2 px-4 text-sm"
     >
       {{ t('workflow.state.executeBy', { name: data.parentState.name }) }}
       <span class="lowercase">

src/components/newtab/shared/SharedWorkflowTriggers.vue

@@ -1,12 +1,12 @@
 <template>
   <div
-    class="overflow-auto scroll"
+    class="scroll overflow-auto"
     style="min-height: 350px; max-height: calc(100vh - 14rem)"
   >
     <ui-expand
       v-for="(trigger, index) in triggersList"
       :key="index"
-      class="border rounded-lg mb-2 trigger-item"
+      class="trigger-item mb-2 rounded-lg border"
     >
       <template #header>
         <p class="flex-1">

src/components/newtab/shared/SharedWysiwyg.vue

@@ -3,7 +3,7 @@
     <slot v-if="editor" name="prepend" :editor="editor" />
     <div
       v-if="editor && toolbar && !readonly"
-      class="p-2 rounded-lg backdrop-blur flex items-center sticky top-0 z-50 bg-box-transparent space-x-1 mb-2"
+      class="bg-box-transparent sticky top-0 z-50 mb-2 flex items-center space-x-1 rounded-lg p-2 backdrop-blur"
     >
       <button
         :class="{
@@ -30,7 +30,7 @@
         <v-remixicon name="riH2" />
       </button>
       <span
-        class="w-px h-5 bg-gray-300 dark:bg-gray-600"
+        class="h-5 w-px bg-gray-300 dark:bg-gray-600"
         style="margin: 0 12px"
       ></span>
       <button
@@ -46,7 +46,7 @@
         <v-remixicon :name="item.icon" />
       </button>
       <span
-        class="w-px h-5 bg-gray-300 dark:bg-gray-600"
+        class="h-5 w-px bg-gray-300 dark:bg-gray-600"
         style="margin: 0 12px"
       ></span>
       <button

src/components/newtab/storage/StorageCredentials.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="flex mt-6">
+  <div class="mt-6 flex">
     <ui-input
       v-model="state.query"
       :placeholder="t('common.search')"
       prepend-icon="riSearch2Line"
     />
-    <div class="flex-grow"></div>
+    <div class="grow"></div>
     <ui-button
       variant="accent"
       style="min-width: 120px"
@@ -20,7 +20,7 @@
     :headers="tableHeaders"
     :items="credentials"
     :search="state.query"
-    class="w-full mt-4"
+    class="mt-4 w-full"
   >
     <template #item-value> ************ </template>
     <template #item-createdAt="{ item }">
@@ -29,7 +29,7 @@
     <template #item-actions="{ item }">
       <v-remixicon
         name="riDeleteBin7Line"
-        class="cursor-pointer inline-block"
+        class="inline-block cursor-pointer"
         @click="deleteCredential(item)"
       />
     </template>
@@ -39,9 +39,9 @@
     <ui-textarea
       v-model="addState.value"
       placeholder="value"
-      class="w-full mt-4"
+      class="mt-4 w-full"
     />
-    <div class="text-right mt-8">
+    <div class="mt-8 text-right">
       <ui-button class="mr-4" @click="addState.show = false">
         {{ t('common.cancel') }}
       </ui-button>

src/components/newtab/storage/StorageEditTable.vue

@@ -2,20 +2,20 @@
   <ui-modal :model-value="modelValue" persist custom-content>
     <ui-card
       padding="p-0"
-      class="max-w-xl w-full flex flex-col"
+      class="flex w-full max-w-xl flex-col"
       style="height: 600px"
     >
       <p class="p-4 font-semibold">
         {{ t('storage.table.add') }}
       </p>
-      <div class="overflow-auto scroll px-4 pb-4 flex-1">
+      <div class="scroll flex-1 overflow-auto px-4 pb-4">
         <ui-input
           v-model="state.name"
-          class="w-full -mt-1"
+          class="-mt-1 w-full"
           label="Table name"
           placeholder="My table"
         />
-        <div class="flex items-center mt-4">
+        <div class="mt-4 flex items-center">
           <p class="flex-1">Columns</p>
           <ui-button icon :title="t('common.add')" @click="addColumn">
             <v-remixicon name="riAddLine" />
@@ -23,7 +23,7 @@
         </div>
         <p
           v-if="state.columns && state.columns.length === 0"
-          class="text-center my-4 text-gray-600 dark:text-gray-300"
+          class="my-4 text-center text-gray-600 dark:text-gray-300"
         >
           {{ t('message.noData') }}
         </p>
@@ -54,7 +54,7 @@
           </li>
         </ul>
       </div>
-      <div class="text-right p-4">
+      <div class="p-4 text-right">
         <ui-button class="mr-4" @click="clearTempTables(true)">
           {{ t('common.cancel') }}
         </ui-button>

src/components/newtab/storage/StorageTables.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="flex mt-6">
+  <div class="mt-6 flex">
     <ui-input
       v-model="state.query"
       :placeholder="t('common.search')"
       prepend-icon="riSearch2Line"
     />
-    <div class="flex-grow"></div>
+    <div class="grow"></div>
     <ui-button
       variant="accent"
       class="ml-4"
@@ -15,18 +15,18 @@
       {{ t('storage.table.add') }}
     </ui-button>
   </div>
-  <div class="overflow-x-auto w-full scroll">
+  <div class="scroll w-full overflow-x-auto">
     <ui-table
       item-key="id"
       :headers="tableHeaders"
       :items="items"
       :search="state.query"
-      class="w-full mt-4"
+      class="mt-4 w-full"
     >
       <template #item-name="{ item }">
         <router-link
           :to="`/storage/tables/${item.id}`"
-          class="w-full block"
+          class="block w-full"
           style="min-height: 29px"
         >
           {{ item.name }}

src/components/newtab/storage/StorageVariables.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="flex mt-6">
+  <div class="mt-6 flex">
     <ui-input
       v-model="state.query"
       :placeholder="t('common.search')"
       prepend-icon="riSearch2Line"
     />
-    <div class="flex-grow"></div>
+    <div class="grow"></div>
     <ui-button
       variant="accent"
       style="min-width: 125px"
@@ -20,17 +20,17 @@
     :headers="tableHeaders"
     :items="variables"
     :search="state.query"
-    class="w-full mt-4"
+    class="mt-4 w-full"
   >
     <template #item-actions="{ item }">
       <v-remixicon
         name="riPencilLine"
-        class="cursor-pointer inline-block mr-4"
+        class="mr-4 inline-block cursor-pointer"
         @click="editVariable(item)"
       />
       <v-remixicon
         name="riDeleteBin7Line"
-        class="cursor-pointer inline-block"
+        class="inline-block cursor-pointer"
         @click="deleteVariable(item)"
       />
     </template>
@@ -43,9 +43,9 @@
     <ui-textarea
       v-model="editState.value"
       placeholder="value"
-      class="w-full mt-4"
+      class="mt-4 w-full"
     />
-    <div class="text-right mt-8">
+    <div class="mt-8 text-right">
       <ui-button class="mr-4" @click="editState.show = false">
         {{ t('common.cancel') }}
       </ui-button>

src/components/newtab/workflow/WorkflowBlockList.vue

@@ -5,22 +5,22 @@
   >
     <template #header="{ show }">
       <span :class="category.color" class="h-3 w-3 rounded-full"></span>
-      <p class="capitalize flex-1 ml-2">
+      <p class="ml-2 flex-1 capitalize">
         {{ category.name }}
       </p>
       <v-remixicon :name="show ? 'riSubtractLine' : 'riAddLine'" size="20" />
     </template>
-    <div class="grid grid-cols-2 gap-2 mb-4">
+    <div class="mb-4 grid grid-cols-2 gap-2">
       <div
         v-for="block in blocks"
         :key="block.id"
         :title="getBlockTitle(block)"
         draggable="true"
-        class="transform select-none cursor-move relative p-4 rounded-lg bg-input transition group"
+        class="bg-input group relative cursor-move select-none rounded-lg p-4 transition"
         @dragstart="$event.dataTransfer.setData('block', JSON.stringify(block))"
       >
         <div
-          class="flex items-center absolute right-2 invisible group-hover:visible top-2 text-gray-600 dark:text-gray-300"
+          class="invisible absolute right-2 top-2 flex items-center text-gray-600 group-hover:visible dark:text-gray-300"
         >
           <a
             :href="`https://docs.automa.site/blocks/${block.id}.html`"
@@ -32,7 +32,7 @@
           </a>
           <span
             :title="`${pinned.includes(block.id) ? 'Unpin' : 'Pin'} block`"
-            class="cursor-pointer ml-1"
+            class="ml-1 cursor-pointer"
             @click="$emit('pin', block)"
           >
             <v-remixicon
@@ -49,7 +49,7 @@
           size="24"
           class="mb-2"
         />
-        <p class="leading-tight text-overflow capitalize">
+        <p class="text-overflow capitalize leading-tight">
           {{ block.name }}
         </p>
       </div>

src/components/newtab/workflow/WorkflowDataTable.vue

@@ -5,7 +5,7 @@
         <ui-button> Connect to a storage table </ui-button>
       </template>
       <p>Select a table</p>
-      <ui-list class="mt-2 space-y-1 max-h-80 overflow-auto w-64">
+      <ui-list class="mt-2 max-h-80 w-64 space-y-1 overflow-auto">
         <p v-if="state.tableList.length === 0">
           {{ t('message.noData') }}
         </p>
@@ -19,7 +19,7 @@
         </ui-list-item>
       </ui-list>
     </ui-popover>
-    <div class="flex mb-4">
+    <div class="mb-4 flex">
       <ui-input
         v-model="state.query"
         autofocus
@@ -36,7 +36,7 @@
   </template>
   <div
     v-else-if="state.connectedTable"
-    class="py-2 px-4 rounded-md bg-green-200 dark:bg-green-300 flex items-center mb-4 text-black"
+    class="mb-4 flex items-center rounded-md bg-green-200 py-2 px-4 text-black dark:bg-green-300"
   >
     <p class="mr-1">
       This workflow is connected to the
@@ -56,10 +56,10 @@
     />
   </div>
   <div
-    class="overflow-y-auto scroll px-1"
+    class="scroll overflow-y-auto px-1"
     style="max-height: calc(100vh - 16rem); min-height: 300px"
   >
-    <p v-if="columns.length === 0" class="text-center mt-4">
+    <p v-if="columns.length === 0" class="mt-4 text-center">
       {{ t('message.noData') }}
     </p>
     <ul v-else class="space-y-2 py-1">

src/components/newtab/workflow/WorkflowDetailsCard.vue

@@ -1,26 +1,26 @@
 <template>
-  <div class="px-4 flex items-start mb-2 mt-1">
+  <div class="mb-2 mt-1 flex items-start px-4">
     <ui-popover class="mr-2 h-8">
       <template #trigger>
         <span
           :title="t('workflow.sidebar.workflowIcon')"
-          class="cursor-pointer inline-block h-full"
+          class="inline-block h-full cursor-pointer"
         >
           <ui-img
             v-if="workflow.icon.startsWith('http')"
             :src="workflow.icon"
-            class="w-8 h-8"
+            class="h-8 w-8"
           />
           <v-remixicon v-else :name="workflow.icon" size="26" class="mt-1" />
         </span>
       </template>
       <div class="w-56">
         <p class="mb-2">{{ t('workflow.sidebar.workflowIcon') }}</p>
-        <div class="grid grid-cols-5 mb-2 gap-1">
+        <div class="mb-2 grid grid-cols-5 gap-1">
           <span
             v-for="icon in icons"
             :key="icon"
-            class="cursor-pointer rounded-lg inline-block text-center p-2 hoverable"
+            class="hoverable inline-block cursor-pointer rounded-lg p-2 text-center"
             @click="$emit('update', { icon })"
           >
             <v-remixicon :name="icon" />
@@ -36,11 +36,11 @@
       </div>
     </ui-popover>
     <div class="flex-1 overflow-hidden">
-      <p class="font-semibold mt-1 text-overflow text-lg leading-tight">
+      <p class="text-overflow mt-1 text-lg font-semibold leading-tight">
         {{ workflow.name }}
       </p>
       <p
-        class="leading-tight cursor-pointer"
+        class="cursor-pointer leading-tight"
         :class="descriptionCollapsed ? 'line-clamp' : 'whitespace-pre-wrap'"
         @click="descriptionCollapsed = !descriptionCollapsed"
       >
@@ -55,9 +55,9 @@
       shortcut['action:search'].readable
     })`"
     prepend-icon="riSearch2Line"
-    class="px-4 mt-4 mb-2 w-full"
+    class="mt-4 mb-2 w-full px-4"
   />
-  <div class="scroll bg-scroll px-4 flex-1 relative overflow-auto">
+  <div class="scroll relative flex-1 overflow-auto bg-scroll px-4">
     <workflow-block-list
       v-if="pinnedBlocksList.length > 0"
       :model-value="true"

src/components/newtab/workflow/WorkflowEditBlock.vue

@@ -1,15 +1,15 @@
 <template>
-  <div id="workflow-edit-block" class="px-4 overflow-auto scroll pb-1 h-full">
+  <div id="workflow-edit-block" class="scroll h-full overflow-auto px-4 pb-1">
     <div
-      class="sticky top-0 z-20 bg-white dark:bg-gray-800 pb-4 mb-2 flex items-center space-x-2"
+      class="sticky top-0 z-20 mb-2 flex items-center space-x-2 bg-white pb-4 dark:bg-gray-800"
     >
       <button @click="$emit('close')">
         <v-remixicon name="riArrowLeftLine" />
       </button>
-      <p class="font-semibold inline-block capitalize">
+      <p class="inline-block font-semibold capitalize">
         {{ getBlockName() }}
       </p>
-      <div class="flex-grow"></div>
+      <div class="grow"></div>
       <a
         :title="t('common.docs')"
         :href="`https://docs.automa.site/blocks/${data.id}.html`"

src/components/newtab/workflow/WorkflowEditor.vue

@@ -17,11 +17,11 @@
     />
     <div
       v-if="editorControls"
-      class="flex items-center absolute w-full p-4 left-0 bottom-0 z-10 md:pr-60"
+      class="absolute left-0 bottom-0 z-10 flex w-full items-center p-4 md:pr-60"
     >
       <slot name="controls-prepend" />
       <editor-search-blocks :editor="editor" />
-      <div class="flex-grow pointer-events-none" />
+      <div class="pointer-events-none grow" />
       <slot name="controls-append" />
       <button
         v-tooltip.group="t('workflow.editor.resetZoom')"
@@ -30,18 +30,18 @@
       >
         <v-remixicon name="riFullscreenLine" />
       </button>
-      <div class="rounded-lg bg-white dark:bg-gray-800 inline-block">
+      <div class="inline-block rounded-lg bg-white dark:bg-gray-800">
         <button
           v-tooltip.group="t('workflow.editor.zoomOut')"
-          class="p-2 rounded-lg relative z-10"
+          class="relative z-10 rounded-lg p-2"
           @click="editor.zoomOut()"
         >
           <v-remixicon name="riSubtractLine" />
         </button>
-        <hr class="h-6 border-r inline-block" />
+        <hr class="inline-block h-6 border-r" />
         <button
           v-tooltip.group="t('workflow.editor.zoomIn')"
-          class="p-2 rounded-lg"
+          class="rounded-lg p-2"
           @click="editor.zoomIn()"
         >
           <v-remixicon name="riAddLine" />

src/components/newtab/workflow/WorkflowProtect.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <form
-      class="mb-4 flex items-center w-full"
+      class="mb-4 flex w-full items-center"
       @submit.prevent="protectWorkflow"
     >
       <ui-input
@@ -10,7 +10,7 @@
         :type="state.showPassword ? 'text' : 'password'"
         input-class="pr-10"
         autofocus
-        class="flex-1 mr-6"
+        class="mr-6 flex-1"
       >
         <template #append>
           <v-remixicon

src/components/newtab/workflow/WorkflowRunning.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="grid grid-cols-2 gap-4">
     <ui-card v-for="item in data" :key="item">
-      <div class="flex items-center mb-4">
-        <div class="flex-1 text-overflow mr-4">
-          <p class="w-full mr-2 text-overflow">{{ item.state.name }}</p>
+      <div class="mb-4 flex items-center">
+        <div class="text-overflow mr-4 flex-1">
+          <p class="text-overflow mr-2 w-full">{{ item.state.name }}</p>
           <p
-            class="w-full mr-2 text-gray-600 dark:text-gray-200 leading-tight text-overflow"
+            class="text-overflow mr-2 w-full leading-tight text-gray-600 dark:text-gray-200"
             :title="`Started at: ${formatDate(
               item.state.startedTimestamp,
               'DD MMM, hh:mm A'
@@ -28,10 +28,10 @@
           <span>{{ t('common.stop') }}</span>
         </ui-button>
       </div>
-      <div class="flex items-center bg-box-transparent px-4 py-2 rounded-lg">
+      <div class="bg-box-transparent flex items-center rounded-lg px-4 py-2">
         <template v-if="item.state.currentBlock">
           <v-remixicon :name="getBlock(item).icon" />
-          <p class="flex-1 ml-2 mr-4">{{ getBlock(item).name }}</p>
+          <p class="ml-2 mr-4 flex-1">{{ getBlock(item).name }}</p>
           <ui-spinner color="text-accent" size="20" />
         </template>
         <p v-else>{{ t('message.noBlock') }}</p>

src/components/newtab/workflow/WorkflowSettings.vue

@@ -19,7 +19,7 @@
     </div>
     <ui-tab-panels
       v-model="activeTab"
-      class="overflow-auto scroll pt-4 px-4 pb-4 settings-content"
+      class="scroll settings-content overflow-auto p-4"
       style="height: calc(100vh - 10rem); max-height: 600px"
     >
       <ui-tab-panel v-for="tab in tabs" :key="tab.value" :value="tab.value">

src/components/newtab/workflow/WorkflowShare.vue

@@ -1,9 +1,9 @@
 <template>
-  <ui-card class="w-full max-w-2xl share-workflow overflow-auto scroll">
+  <ui-card class="share-workflow scroll w-full max-w-2xl overflow-auto">
     <template v-if="!userStore.user?.username">
-      <div class="flex items-center mb-12">
+      <div class="mb-12 flex items-center">
         <p>{{ t('workflow.share.title') }}</p>
-        <div class="flex-grow"></div>
+        <div class="grow"></div>
         <button @click="$emit('close')">
           <v-remixicon name="riCloseLine" />
         </button>
@@ -20,9 +20,9 @@
       </p>
     </template>
     <template v-else>
-      <div v-if="!isUpdate" class="flex items-center mb-4">
+      <div v-if="!isUpdate" class="mb-4 flex items-center">
         <p>{{ t('workflow.share.title') }}</p>
-        <div class="flex-grow"></div>
+        <div class="grow"></div>
         <ui-button class="mr-2" @click="$emit('close')">
           {{ t('common.cancel') }}
         </ui-button>
@@ -36,13 +36,13 @@
         </ui-button>
       </div>
       <slot name="prepend"></slot>
-      <div class="flex mb-4">
+      <div class="mb-4 flex">
         <input
           v-model="state.workflow.name"
           :placeholder="t('workflow.name')"
           type="text"
           name="workflow name"
-          class="font-semibold leading-none text-2xl focus:ring-0 block w-full bg-transparent mr-4 flex-1"
+          class="mr-4 block w-full flex-1 bg-transparent text-2xl font-semibold leading-none focus:ring-0"
         />
         <ui-select v-model="state.workflow.category">
           <option value="">{{ t('common.category') }} (none)</option>
@@ -60,10 +60,10 @@
           v-model="state.workflow.description"
           :max="300"
           placeholder="Short description"
-          class="w-full h-32 scroll resize-none"
+          class="scroll h-32 w-full resize-none"
         />
         <p
-          class="text-sm text-gray-600 dark:text-gray-200 absolute bottom-2 right-2"
+          class="absolute bottom-2 right-2 text-sm text-gray-600 dark:text-gray-200"
         >
           {{ state.workflow.description.length }}/300
         </p>
@@ -72,12 +72,12 @@
         v-model="state.workflow.content"
         :placeholder="t('common.description')"
         :limit="5000"
-        class="prose prose-zinc dark:prose-invert max-w-none content-editor p-4 bg-box-transparent rounded-lg relative"
+        class="content-editor bg-box-transparent prose prose-zinc relative max-w-none rounded-lg p-4 dark:prose-invert"
         @count="state.contentLength = $event"
       >
         <template #append>
           <p
-            class="text-sm text-gray-600 dark:text-gray-200 absolute bottom-2 right-2"
+            class="absolute bottom-2 right-2 text-sm text-gray-600 dark:text-gray-200"
           >
             {{ state.contentLength }}/5000
           </p>

src/components/newtab/workflow/WorkflowShareTeam.vue

@@ -1,5 +1,5 @@
 <template>
-  <ui-card class="w-full max-w-4xl share-workflow overflow-auto scroll">
+  <ui-card class="share-workflow scroll w-full max-w-4xl overflow-auto">
     <template v-if="!isUpdate">
       <h1 class="text-xl font-semibold">Share workflow with team</h1>
       <p class="text-gray-600 dark:text-gray-200">
@@ -7,8 +7,8 @@
       </p>
     </template>
     <p v-else class="font-semibold">Update workflow</p>
-    <div class="flex items-start mt-4">
-      <div class="flex-1 mr-8">
+    <div class="mt-4 flex items-start">
+      <div class="mr-8 flex-1">
         <div class="flex items-center">
           <ui-input
             v-model="state.workflow.name"
@@ -33,10 +33,10 @@
             </option>
           </ui-select>
         </div>
-        <div class="relative mb-2 mt-2">
+        <div class="relative my-2">
           <label
             for="short-description"
-            class="text-sm ml-2 text-gray-600 dark:text-gray-200"
+            class="ml-2 text-sm text-gray-600 dark:text-gray-200"
           >
             Short description
           </label>
@@ -46,10 +46,10 @@
             :max="300"
             label="Short description"
             placeholder="Write here..."
-            class="w-full h-28 scroll resize-none"
+            class="scroll h-28 w-full resize-none"
           />
           <p
-            class="text-sm text-gray-600 dark:text-gray-200 absolute bottom-2 right-2"
+            class="absolute bottom-2 right-2 text-sm text-gray-600 dark:text-gray-200"
           >
             {{ state.workflow.description.length }}/300
           </p>
@@ -58,19 +58,19 @@
           v-model="state.workflow.content"
           :placeholder="t('common.description')"
           :limit="5000"
-          class="prose prose-zinc dark:prose-invert max-w-none content-editor p-4 bg-box-transparent rounded-lg relative"
+          class="content-editor bg-box-transparent prose prose-zinc relative max-w-none rounded-lg p-4 dark:prose-invert"
           @count="state.contentLength = $event"
         >
           <template #append>
             <p
-              class="text-sm text-gray-600 dark:text-gray-200 absolute bottom-2 right-2"
+              class="absolute bottom-2 right-2 text-sm text-gray-600 dark:text-gray-200"
             >
               {{ state.contentLength }}/5000
             </p>
           </template>
         </shared-wysiwyg>
       </div>
-      <div class="w-64 sticky top-4 pb-4">
+      <div class="sticky top-4 w-64 pb-4">
         <template v-if="isUpdate">
           <ui-button
             variant="accent"
@@ -79,7 +79,7 @@
           >
             Save
           </ui-button>
-          <ui-button class="w-full mt-2" @click="$emit('close')">
+          <ui-button class="mt-2 w-full" @click="$emit('close')">
             {{ t('common.cancel') }}
           </ui-button>
         </template>
@@ -97,7 +97,7 @@
               :loading="state.isPublishing"
               :disabled="!state.workflow.name.trim()"
               variant="accent"
-              class="w-full ml-2"
+              class="ml-2 w-full"
               @click="publishWorkflow"
             >
               Publish
@@ -125,7 +125,7 @@
             {{ category }}
           </option>
         </ui-select>
-        <span class="text-sm ml-2 text-gray-600 dark:text-gray-200 mt-5 block">
+        <span class="ml-2 mt-5 block text-sm text-gray-600 dark:text-gray-200">
           Environment
         </span>
         <ui-tabs v-model="state.workflow.tag" type="fill" fill>

src/components/newtab/workflow/WorkflowSharedActions.vue

@@ -12,7 +12,7 @@
     <button
       v-if="data.hasLocal"
       v-tooltip.group="t('workflow.share.fetchLocal')"
-      class="hoverable p-2 rounded-lg"
+      class="hoverable rounded-lg p-2"
       @click="$emit('fetchLocal')"
     >
       <v-remixicon name="riRefreshLine" />
@@ -20,14 +20,14 @@
     <button
       v-if="!data.hasLocal"
       v-tooltip.group="t('workflow.share.download')"
-      class="hoverable p-2 rounded-lg"
+      class="hoverable rounded-lg p-2"
       @click="$emit('insertLocal')"
     >
       <v-remixicon name="riDownloadLine" />
     </button>
     <button
       v-tooltip.group="t('workflow.share.edit')"
-      class="hoverable p-2 rounded-lg"
+      class="hoverable rounded-lg p-2"
       @click="state.showModal = true"
     >
       <v-remixicon name="riFileEditLine" />
@@ -36,7 +36,7 @@
   <ui-card padding="p-1 flex ml-4">
     <button
       v-tooltip.group="t('workflow.share.unpublish')"
-      class="hoverable p-2 mr-2 rounded-lg relative"
+      class="hoverable relative mr-2 rounded-lg p-2"
       @click="$emit('unpublish')"
     >
       <ui-spinner
@@ -57,13 +57,13 @@
     >
       <span
         v-if="data.isChanged"
-        class="flex h-3 w-3 absolute top-0 left-0 -ml-1 -mt-1"
+        class="absolute top-0 left-0 -ml-1 -mt-1 flex h-3 w-3"
       >
         <span
-          class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"
+          class="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-75"
         ></span>
         <span
-          class="relative inline-flex rounded-full h-3 w-3 bg-blue-600"
+          class="relative inline-flex h-3 w-3 rounded-full bg-blue-600"
         ></span>
       </span>
       {{ t('workflow.share.update') }}
@@ -76,7 +76,7 @@
       @change="onDescriptionUpdated"
     >
       <template #prepend>
-        <div class="flex justify-between mb-6">
+        <div class="mb-6 flex justify-between">
           <p>{{ t('workflow.share.edit') }}</p>
           <v-remixicon
             name="riCloseLine"

src/components/newtab/workflow/edit/BlockSetting/BlockSettingGeneral.vue

@@ -6,7 +6,7 @@
           <p class="text-overflow">
             {{ t('workflow.blocks.base.settings.blockTimeout.title') }}
           </p>
-          <p class="line-clamp leading-tight dark:text-gray-300 text-gray-600">
+          <p class="line-clamp leading-tight text-gray-600 dark:text-gray-300">
             {{ t('workflow.blocks.base.settings.blockTimeout.description') }}
           </p>
         </div>
@@ -22,7 +22,7 @@
             {{ t('workflow.settings.debugMode.title') }}
           </p>
           <p
-            class="text-overflow leading-tight dark:text-gray-300 text-gray-600"
+            class="text-overflow leading-tight text-gray-600 dark:text-gray-300"
           >
             Execute block using the Chrome DevTools Protocol
           </p>

src/components/newtab/workflow/edit/BlockSetting/BlockSettingLines.vue

@@ -17,8 +17,8 @@
         class="w-full"
         @change="updateActiveEdge('label', $event)"
       />
-      <div class="flex items-center mt-4">
-        <label class="flex items-center mr-4 block">
+      <div class="mt-4 flex items-center">
+        <label class="mr-4 block flex items-center">
           <ui-switch
             :model-value="activeEdge.animated"
             @change="updateActiveEdge('animated', $event)"
@@ -33,7 +33,7 @@
             :value="activeEdge.style?.stroke ?? null"
             type="color"
             name="color"
-            class="h-10 w-10 rounded-lg bg-input p-1"
+            class="bg-input h-10 w-10 rounded-lg p-1"
             @input="updateActiveEdge('style', { stroke: $event.target.value })"
           />
           <span class="ml-2">

src/components/newtab/workflow/edit/BlockSetting/BlockSettingOnError.vue

@@ -1,13 +1,13 @@
 <template>
   <div
-    class="on-block-error overflow-auto scroll"
+    class="on-block-error scroll overflow-auto"
     style="max-height: calc(100vh - 13rem)"
   >
     <div
-      class="p-4 rounded-lg bg-green-200 dark:bg-green-300 flex items-start text-black"
+      class="flex items-start rounded-lg bg-green-200 p-4 text-black dark:bg-green-300"
     >
       <v-remixicon name="riInformationLine" />
-      <p class="flex-1 ml-4">
+      <p class="ml-4 flex-1">
         {{ t('workflow.blocks.base.onError.info') }}
       </p>
     </div>
@@ -46,7 +46,7 @@
                 class="w-20"
               />
             </div>
-            <div class="inline-flex items-center ml-12">
+            <div class="ml-12 inline-flex items-center">
               <span>
                 {{ t('workflow.blocks.base.onError.interval.name') }}
               </span>
@@ -68,7 +68,7 @@
             </div>
           </div>
         </transition-expand>
-        <ui-select v-model="state.toDo" class="w-56 mt-2">
+        <ui-select v-model="state.toDo" class="mt-2 w-56">
           <option
             v-for="type in toDoTypes"
             :key="type"
@@ -143,7 +143,7 @@
                 <td>
                   <v-remixicon
                     name="riCloseLine"
-                    class="text-gray-600 dark:text-gray-200 cursor-pointer"
+                    class="cursor-pointer text-gray-600 dark:text-gray-200"
                     @click="state.dataToInsert.splice(index, 1)"
                   />
                 </td>

src/components/newtab/workflow/edit/EditBrowserEvent.vue

@@ -34,7 +34,7 @@
         v-if="!data.activeTabLoaded"
         :model-value="data.tabLoadedUrl"
         type="url"
-        class="w-full mt-1"
+        class="mt-1 w-full"
         placeholder="https://example.org/*"
         @change="updateData({ tabLoadedUrl: $event })"
       >
@@ -47,7 +47,7 @@
             title="Examples"
           >
             <v-remixicon
-              class="inline-block ml-1"
+              class="ml-1 inline-block"
               name="riInformationLine"
               size="18"
             />
@@ -67,7 +67,7 @@
         :model-value="data.tabUrl"
         type="url"
         label="Filter"
-        class="w-full mt-1"
+        class="mt-1 w-full"
         placeholder="URL or Regex"
         @change="updateData({ tabUrl: $event })"
       />

src/components/newtab/workflow/edit/EditCloseTab.vue

@@ -9,7 +9,7 @@
     <ui-select
       :model-value="data.closeType"
       :placeholder="Close"
-      class="w-full mt-2"
+      class="mt-2 w-full"
       @change="updateData({ closeType: $event })"
     >
       <option
@@ -33,7 +33,7 @@
       <edit-autocomplete v-if="!data.activeTab">
         <ui-input
           :model-value="data.url"
-          class="w-full mt-1"
+          class="mt-1 w-full"
           placeholder="http://example.com/*"
           @change="updateData({ url: $event })"
         >

src/components/newtab/workflow/edit/EditConditions.vue

@@ -19,7 +19,7 @@
       >
         {{ t('workflow.blocks.conditions.add') }}
       </ui-button>
-      <div class="flex-grow"></div>
+      <div class="grow"></div>
       <ui-button
         v-tooltip:bottom="t('common.settings')"
         icon
@@ -31,7 +31,7 @@
       </ui-button>
     </div>
     <template v-if="state.showSettings">
-      <label class="flex items-center mt-6">
+      <label class="mt-6 flex items-center">
         <ui-switch
           :model-value="data.retryConditions"
           @change="updateData({ retryConditions: $event })"
@@ -45,7 +45,7 @@
           :model-value="data.retryCount"
           :title="t('workflow.blocks.element-exists.tryFor.title')"
           :label="t('workflow.blocks.element-exists.tryFor.label')"
-          class="w-full mb-1"
+          class="mb-1 w-full"
           type="number"
           min="1"
           @change="updateData({ retryCount: +$event })"
@@ -72,11 +72,11 @@
       <template #item="{ element, index }">
         <ui-list-item class="group cursor-move">
           <v-remixicon name="riGuideLine" size="20" class="mr-2 -ml-1" />
-          <p class="flex-1 text-overflow" :title="element.name">
+          <p class="text-overflow flex-1" :title="element.name">
             {{ element.name }}
           </p>
           <v-remixicon
-            class="cursor-pointer group-hover:visible invisible"
+            class="invisible cursor-pointer group-hover:visible"
             name="riPencilLine"
             size="20"
             @click="editCondition(index)"
@@ -92,7 +92,7 @@
     </draggable>
     <ui-modal v-model="state.showModal" custom-content>
       <ui-card padding="p-0" class="w-full max-w-3xl">
-        <div class="px-4 pt-4 flex items-center">
+        <div class="flex items-center px-4 pt-4">
           <p class="flex-1">
             {{ t('workflow.conditionBuilder.title') }}
           </p>
@@ -103,12 +103,12 @@
           />
         </div>
         <div
-          class="overflow-auto p-4 scroll"
+          class="scroll overflow-auto p-4"
           style="height: calc(100vh - 8rem)"
         >
           <input
             v-model="conditions[state.conditionsIndex].name"
-            class="text-xl font-semibold mb-4 bg-transparent focus:ring-0"
+            class="mb-4 bg-transparent text-xl font-semibold focus:ring-0"
           />
           <shared-condition-builder
             :model-value="conditions[state.conditionsIndex].conditions"

src/components/newtab/workflow/edit/EditCookie.vue

@@ -9,7 +9,7 @@
     <template v-if="permission.has.cookies">
       <ui-select
         :model-value="data.type"
-        class="w-full mt-4"
+        class="mt-4 w-full"
         @change="updateData({ type: $event })"
       >
         <option v-for="type in types" :key="type" :value="type">
@@ -37,7 +37,7 @@
           :model-value="data.jsonCode"
           :extensions="codemirrorExts"
           lang="json"
-          class="mt-4 cookie-editor"
+          class="cookie-editor mt-4"
           @change="updateData({ jsonCode: $event })"
         />
         <a
@@ -45,7 +45,7 @@
             data.type === 'get' && data.getAll ? 'getAll' : data.type
           }`"
           rel="noopener"
-          class="underline mt-2 inline-block"
+          class="mt-2 inline-block underline"
           target="_blank"
         >
           See all available properties
@@ -128,7 +128,7 @@
           </ui-checkbox>
         </div>
       </template>
-      <div v-if="data.type === 'get'" class="pt-4 border-t mt-4 cookie-data">
+      <div v-if="data.type === 'get'" class="cookie-data mt-4 border-t pt-4">
         <insert-workflow-data :data="data" variables @update="updateData" />
       </div>
     </template>

src/components/newtab/workflow/edit/EditCreateElement.vue

@@ -8,7 +8,7 @@
     <ui-select
       v-model="blockData.insertAt"
       :label="$t('workflow.blocks.create-element.insertEl.title')"
-      class="w-full mt-4"
+      class="mt-4 w-full"
     >
       <option v-for="item in insertOptions" :key="item" :value="item">
         {{ $t(`workflow.blocks.create-element.insertEl.items.${item}`) }}
@@ -23,7 +23,7 @@
     </ui-checkbox>
     <ui-button
       variant="accent"
-      class="w-full mt-4"
+      class="mt-4 w-full"
       @click="state.showModal = true"
     >
       {{ $t('workflow.blocks.create-element.edit') }}
@@ -34,7 +34,7 @@
       padding="p-0"
     >
       <template #header>
-        <ui-tabs v-model="state.activeTab" class="border-none space-x-1">
+        <ui-tabs v-model="state.activeTab" class="space-x-1 border-none">
           <ui-tab v-for="tab in tabs" :key="tab.id" :value="tab.id">
             {{ tab.name }}
           </ui-tab>
@@ -45,7 +45,7 @@
       </template>
       <ui-tab-panels
         :model-value="state.activeTab"
-        class="overflow-auto scroll px-4 mb-4"
+        class="scroll mb-4 overflow-auto px-4"
         style="height: calc(100vh - 12rem)"
       >
         <ui-tab-panel value="html" class="h-full">
@@ -74,7 +74,7 @@
                 :href="`https://docs.automa.site/blocks/javascript-code.html#${func.id}`"
                 target="_blank"
                 rel="noopener"
-                class="inline-block text-sm rounded-md p-1 bg-box-transparent"
+                class="bg-box-transparent inline-block rounded-md p-1 text-sm"
               >
                 <code>
                   {{ func.name }}

src/components/newtab/workflow/edit/EditDataMapping.vue

@@ -9,7 +9,7 @@
     <ui-select
       :label="t('workflow.blocks.data-mapping.dataSource')"
       :model-value="data.dataSource"
-      class="w-full mt-4"
+      class="mt-4 w-full"
       @change="updateData({ dataSource: $event })"
     >
       <option v-for="source in dataSources" :key="source.id" :value="source.id">
@@ -38,7 +38,7 @@
       content-class="max-w-2xl data-map"
     >
       <div
-        class="px-4 my-4 overflow-auto scroll"
+        class="scroll my-4 overflow-auto px-4"
         style="min-height: 400px; max-height: calc(100vh - 12rem)"
       >
         <table class="w-full">
@@ -54,7 +54,7 @@
           </thead>
           <tbody class="divide-y">
             <tr v-for="(source, index) in state.sources" :key="source.id">
-              <td class="align-baseline group relative pr-4">
+              <td class="group relative pr-4 align-baseline">
                 <div class="flex items-center space-x-2">
                   <ui-autocomplete
                     :items="state.autocompleteItems"
@@ -69,7 +69,7 @@
                   </ui-autocomplete>
                   <v-remixicon
                     name="riDeleteBin7Line"
-                    class="invisible group-hover:visible cursor-pointer"
+                    class="invisible cursor-pointer group-hover:visible"
                     @click="state.sources.splice(index, 1)"
                   />
                   <v-remixicon
@@ -79,12 +79,12 @@
                   />
                 </div>
               </td>
-              <td class="align-baseline pl-4">
+              <td class="pl-4 align-baseline">
                 <ul class="space-y-1">
                   <li
                     v-for="(destination, destIndex) in source.destinations"
                     :key="destination.id"
-                    class="flex items-center space-x-2 group"
+                    class="group flex items-center space-x-2"
                   >
                     <ui-input
                       :model-value="destination.name"
@@ -101,7 +101,7 @@
                     />
                     <v-remixicon
                       name="riDeleteBin7Line"
-                      class="invisible group-hover:visible cursor-pointer"
+                      class="invisible cursor-pointer group-hover:visible"
                       @click="
                         state.sources[index].destinations.splice(destIndex, 1)
                       "

src/components/newtab/workflow/edit/EditDeleteData.vue

@@ -10,7 +10,7 @@
       <li
         v-for="(item, index) in deleteList"
         :key="item.id"
-        class="mb-2 pb-4 border-b"
+        class="mb-2 border-b pb-4"
       >
         <div class="flex items-end space-x-2">
           <ui-select
@@ -32,13 +32,13 @@
           :placeholder="t('workflow.variables.name')"
           :title="t('workflow.variables.name')"
           autocomplete="off"
-          class="w-full mt-2"
+          class="mt-2 w-full"
         />
         <ui-select
           v-else
           v-model="deleteList[index].columnId"
           :label="t('workflow.table.select')"
-          class="w-full mt-1"
+          class="mt-1 w-full"
         >
           <option value="[all]">
             {{ t('workflow.blocks.delete-data.allColumns') }}

src/components/newtab/workflow/edit/EditElementExists.vue

@@ -9,7 +9,7 @@
     <ui-select
       :model-value="data.findBy || 'cssSelector'"
       :placeholder="t('workflow.blocks.base.findElement.placeholder')"
-      class="w-full mb-1 mt-4"
+      class="mb-1 mt-4 w-full"
       @change="updateData({ findBy: $event })"
     >
       <option v-for="type in selectorTypes" :key="type" :value="type">
@@ -30,7 +30,7 @@
       :model-value="data.tryCount"
       :title="t('workflow.blocks.element-exists.tryFor.title')"
       :label="t('workflow.blocks.element-exists.tryFor.label')"
-      class="w-full mb-1"
+      class="mb-1 w-full"
       type="number"
       min="1"
       @change="updateData({ tryCount: +$event })"
@@ -44,7 +44,7 @@
       min="200"
       @change="updateData({ timeout: +$event })"
     />
-    <label class="flex items-center mt-4">
+    <label class="mt-4 flex items-center">
       <ui-switch
         :model-value="data.throwError"
         class="mr-2"

src/components/newtab/workflow/edit/EditExecuteWorkflow.vue

@@ -4,13 +4,13 @@
       :model-value="data.description"
       :placeholder="t('common.description')"
       autoresize
-      class="w-full mb-2"
+      class="mb-2 w-full"
       @change="updateData({ description: $event })"
     />
     <ui-select
       :model-value="data.workflowId"
       :placeholder="t('workflow.blocks.execute-workflow.select')"
-      class="w-full mb-2"
+      class="mb-2 w-full"
       @change="updateData({ workflowId: $event })"
     >
       <optgroup label="Local">
@@ -40,25 +40,25 @@
       class="w-full"
       @change="updateData({ executeId: $event })"
     />
-    <p class="text-sm mt-4 text-gray-600 dark:text-gray-200 ml-1 mb-1">
+    <p class="mt-4 ml-1 mb-1 text-sm text-gray-600 dark:text-gray-200">
       {{ t('common.globalData') }}
     </p>
     <pre
       v-if="!state.showGlobalData"
-      class="rounded-lg text-gray-200 p-4 max-h-80 bg-gray-900 overflow-auto"
+      class="max-h-80 overflow-auto rounded-lg bg-gray-900 p-4 text-gray-200"
       @click="state.showGlobalData = true"
       v-text="data.globalData || '____'"
     />
     <ui-checkbox
       :model-value="data.insertAllVars"
-      class="leading-tight mt-4"
+      class="mt-4 leading-tight"
       @change="updateData({ insertAllVars: $event })"
     >
       {{ t('workflow.blocks.execute-workflow.insertAllVars') }}
     </ui-checkbox>
     <template v-if="!data.insertAllVars">
       <label class="mt-4 block">
-        <span class="text-sm ml-1 block text-gray-600 dark:text-gray-200">
+        <span class="ml-1 block text-sm text-gray-600 dark:text-gray-200">
           {{ t('workflow.blocks.execute-workflow.insertVars') }}
         </span>
         <ui-textarea
@@ -68,7 +68,7 @@
         />
       </label>
       <span
-        class="text-sm ml-1 block text-gray-600 dark:text-gray-200 leading-tight"
+        class="ml-1 block text-sm leading-tight text-gray-600 dark:text-gray-200"
       >
         {{ t('workflow.blocks.execute-workflow.useCommas') }}
       </span>
@@ -82,7 +82,7 @@
       <shared-codemirror
         :model-value="data.globalData"
         lang="json"
-        class="w-full scroll"
+        class="scroll w-full"
         style="height: calc(100vh - 10rem)"
         @change="updateData({ globalData: $event })"
       />

src/components/newtab/workflow/edit/EditExportData.vue

@@ -18,7 +18,7 @@
       <ui-select
         :model-value="data.dataToExport"
         :label="t('workflow.blocks.export-data.dataToExport.placeholder')"
-        class="w-full mt-2"
+        class="mt-2 w-full"
         @change="updateData({ dataToExport: $event })"
       >
         <option v-for="option in dataToExport" :key="option" :value="option">
@@ -30,7 +30,7 @@
         :model-value="data.refKey"
         :title="t('workflow.blocks.export-data.refKey')"
         :placeholder="t('workflow.blocks.export-data.refKey')"
-        class="w-full mt-2"
+        class="mt-2 w-full"
         @change="updateData({ refKey: $event })"
       />
       <ui-input
@@ -38,7 +38,7 @@
         :model-value="data.variableName"
         :title="t('workflow.variables.name')"
         :placeholder="t('workflow.variables.name')"
-        class="w-full mt-2"
+        class="mt-2 w-full"
         @change="updateData({ variableName: $event })"
       />
       <edit-autocomplete class="mt-2">
@@ -64,7 +64,7 @@
       <ui-select
         :model-value="data.type"
         :label="t('workflow.blocks.export-data.exportAs')"
-        class="w-full mt-2"
+        class="mt-2 w-full"
         @change="updateData({ type: $event })"
       >
         <option v-for="type in dataExportTypes" :key="type.id" :value="type.id">
@@ -80,11 +80,11 @@
           <v-remixicon
             :rotate="show ? 270 : 180"
             name="riArrowLeftSLine"
-            class="transition-transform text-gray-600 dark:text-gray-300"
+            class="text-gray-600 transition-transform dark:text-gray-300"
           />
           {{ t('common.options') }}
         </template>
-        <div class="pl-6 mt-1">
+        <div class="mt-1 pl-6">
           <ui-checkbox
             v-if="data.type === 'csv'"
             :model-value="data.addBOMHeader"

src/components/newtab/workflow/edit/EditForms.vue

@@ -16,7 +16,7 @@
     <template v-else>
       <ui-select
         :model-value="data.type"
-        class="block w-full mb-2 mt-4"
+        class="mb-2 mt-4 block w-full"
         :placeholder="t('workflow.blocks.forms.type')"
         @change="updateData({ type: $event })"
       >
@@ -32,7 +32,7 @@
         {{ t('workflow.blocks.forms.selected') }}
       </ui-checkbox>
       <template v-if="data.type === 'text-field'">
-        <edit-autocomplete class="w-full mb-1">
+        <edit-autocomplete class="mb-1 w-full">
           <ui-textarea
             :model-value="data.value"
             :placeholder="t('workflow.blocks.forms.text-field.value')"
@@ -62,7 +62,7 @@
           </optgroup>
         </ui-select>
         <div v-if="data.selectOptionBy === 'value'" class="mt-2">
-          <edit-autocomplete class="w-full mb-1">
+          <edit-autocomplete class="mb-1 w-full">
             <ui-textarea
               :model-value="data.value"
               :placeholder="t('workflow.blocks.forms.text-field.value')"
@@ -91,7 +91,7 @@
         :model-value="data.delay"
         :label="t('workflow.blocks.forms.text-field.delay.label')"
         :placeholder="t('workflow.blocks.forms.text-field.delay.placeholder')"
-        class="w-full mt-1"
+        class="mt-1 w-full"
         min="0"
         @change="updateData({ delay: $event })"
       />

src/components/newtab/workflow/edit/EditGetText.vue

@@ -1,7 +1,7 @@
 <template>
   <edit-interaction-base v-bind="{ data }" @change="updateData">
     <hr />
-    <div class="flex rounded-lg bg-input px-4 items-center transition">
+    <div class="bg-input flex items-center rounded-lg px-4 transition">
       <span>/</span>
       <input
         :value="data.regex"

src/components/newtab/workflow/edit/EditGoogleSheets.vue

@@ -2,13 +2,13 @@
   <div class="mb-10">
     <ui-textarea
       :model-value="data.description"
-      class="w-full mb-2"
+      class="mb-2 w-full"
       :placeholder="t('common.description')"
       @change="updateData({ description: $event })"
     />
     <ui-select
       :model-value="data.type"
-      class="w-full mb-2"
+      class="mb-2 w-full"
       @change="onActionChange"
     >
       <option v-for="action in actions" :key="action" :value="action">
@@ -40,7 +40,7 @@
       href="https://docs.automa.site/blocks/google-sheets.html#access-to-spreadsheet"
       target="_blank"
       rel="noopener"
-      class="text-sm leading-tight inline-block ml-1"
+      class="ml-1 inline-block text-sm leading-tight"
     >
       Automa doesn't have access to the spreadsheet
       <v-remixicon name="riInformationLine" size="18" class="inline" />
@@ -48,7 +48,7 @@
     <edit-autocomplete>
       <ui-input
         :model-value="data.range"
-        class="w-full mt-1"
+        class="mt-1 w-full"
         placeholder="Sheet1!A1:B2"
         @change="updateData({ range: $event })"
       >
@@ -106,7 +106,7 @@
     <template v-else-if="['update', 'append'].includes(data.type)">
       <ui-select
         :model-value="data.valueInputOption"
-        class="w-full mt-2"
+        class="mt-2 w-full"
         @change="updateData({ valueInputOption: $event })"
       >
         <template #label>
@@ -130,7 +130,7 @@
       <ui-select
         v-if="data.type === 'append'"
         :model-value="data.insertDataOption || 'INSERT_ROWS'"
-        class="w-full mt-2"
+        class="mt-2 w-full"
         @change="updateData({ insertDataOption: $event })"
       >
         <template #label>
@@ -154,7 +154,7 @@
       <ui-select
         :model-value="data.dataFrom"
         :label="t('workflow.blocks.google-sheets.dataFrom.label')"
-        class="w-full mt-2"
+        class="mt-2 w-full"
         @change="updateData({ dataFrom: $event })"
       >
         <option v-for="item in dataFrom" :key="item" :value="item">
@@ -171,7 +171,7 @@
       </ui-checkbox>
       <ui-button
         v-else
-        class="w-full mt-2"
+        class="mt-2 w-full"
         variant="accent"
         @click="customDataState.showModal = true"
       >
@@ -188,7 +188,7 @@
       :line-numbers="false"
       readonly
       hide-lang
-      class="mt-4 max-h-96 scroll"
+      class="scroll mt-4 max-h-96"
     />
     <ui-modal
       v-model="customDataState.showModal"

src/components/newtab/workflow/edit/EditHandleDownload.vue

@@ -12,13 +12,13 @@
         :label="t('workflow.blocks.handle-download.timeout')"
         placeholder="1000"
         type="number"
-        class="w-full mt-2"
+        class="mt-2 w-full"
         @change="updateData({ timeout: +$event || 1000 })"
       />
       <ui-input
         :model-value="data.downloadId"
         :label="t('workflow.blocks.handle-download.downloadId')"
-        class="w-full mt-2"
+        class="mt-2 w-full"
         placeholder="0"
         @change="updateData({ downloadId: $event })"
       />
@@ -50,7 +50,7 @@
       </ui-checkbox>
       <template v-if="data.waitForDownload">
         <hr class="my-4 w-full" />
-        <p class="text-sm dark:text-gray-300 text-gray-600">
+        <p class="text-sm text-gray-600 dark:text-gray-300">
           {{ t('workflow.blocks.handle-download.filePath') }}
         </p>
         <insert-workflow-data :data="data" variables @update="updateData" />

src/components/newtab/workflow/edit/EditIncreaseVariable.vue

@@ -18,7 +18,7 @@
       :label="t('workflow.blocks.increase-variable.increase')"
       placeholder="0"
       type="number"
-      class="w-full mt-2"
+      class="mt-2 w-full"
       @change="updateData({ increaseBy: +$event })"
     />
   </div>

src/components/newtab/workflow/edit/EditInsertData.vue

@@ -7,7 +7,7 @@
       @change="updateData({ description: $event })"
     />
     <ui-button
-      class="w-full mt-4 mb-2"
+      class="mt-4 mb-2 w-full"
       variant="accent"
       @click="showModal = !showModal"
     >
@@ -20,7 +20,7 @@
       content-class="max-w-3xl insert-data-modal"
     >
       <ul
-        class="mt-4 data-list px-4 pb-4 overflow-auto scroll"
+        class="data-list scroll mt-4 overflow-auto px-4 pb-4"
         style="max-height: calc(100vh - 13rem)"
       >
         <li
@@ -28,10 +28,10 @@
           :key="index"
           class="mb-4 rounded-lg border"
         >
-          <div class="p-2 border-b flex items-center">
+          <div class="flex items-center border-b p-2">
             <ui-select
               :model-value="item.type"
-              class="mr-2 flex-shrink-0"
+              class="mr-2 shrink-0"
               @change="changeItemType(index, $event)"
             >
               <option value="table">
@@ -61,7 +61,7 @@
                 {{ column.name }}
               </option>
             </ui-select>
-            <div class="flex-grow" />
+            <div class="grow" />
             <v-remixicon
               name="riDeleteBin7Line"
               class="cursor-pointer"
@@ -107,7 +107,7 @@
                 class="w-full"
               />
             </edit-autocomplete>
-            <div class="flex mt-2 items-center">
+            <div class="mt-2 flex items-center">
               <ui-button
                 v-tooltip="
                   hasFileAccess
@@ -133,7 +133,7 @@
                 >
                   <v-remixicon name="riBrush2Line" />
                 </ui-button>
-                <div class="flex-grow" />
+                <div class="grow" />
                 <ui-select
                   :model-value="item.action || item.csvAction"
                   placeholder="File Action"
@@ -158,7 +158,7 @@
               :model-value="previewState.data"
               readonly
               hide-lang
-              class="w-full mt-4"
+              class="mt-4 w-full"
               lang="json"
               style="max-height: 500px"
             />

src/components/newtab/workflow/edit/EditInteractionBase.vue

@@ -6,15 +6,15 @@
         v-if="!hideDescription"
         :model-value="data.description"
         :placeholder="t('common.description')"
-        class="w-full mb-2"
+        class="mb-2 w-full"
         @change="updateData({ description: $event })"
       />
       <slot name="prepend:selector" />
-      <div v-if="!hideSelector" class="flex items-center mb-2">
+      <div v-if="!hideSelector" class="mb-2 flex items-center">
         <ui-select
           :model-value="data.findBy || 'cssSelector'"
           :placeholder="t('workflow.blocks.base.findElement.placeholder')"
-          class="flex-1 mr-2"
+          class="mr-2 flex-1"
           @change="updateData({ findBy: $event })"
         >
           <option v-for="type in selectorTypes" :key="type" :value="type">
@@ -47,7 +47,7 @@
           <v-remixicon
             name="riArrowLeftSLine"
             :rotate="show ? 270 : 180"
-            class="mr-1 transition-transform -ml-1"
+            class="mr-1 -ml-1 transition-transform"
           />
           {{ t('workflow.blocks.base.selectorOptions') }}
         </template>

src/components/newtab/workflow/edit/EditJavascriptCode.vue

@@ -4,7 +4,7 @@
       :model-value="data.description"
       autoresize
       :placeholder="t('common.description')"
-      class="w-full mb-1"
+      class="mb-1 w-full"
       @change="updateData({ description: $event })"
     />
     <template v-if="!data.everyNewTab">
@@ -36,12 +36,12 @@
         </option>
       </ui-select>
     </template>
-    <p class="text-sm ml-1 text-gray-600 dark:text-gray-200">
+    <p class="ml-1 text-sm text-gray-600 dark:text-gray-200">
       {{ t('workflow.blocks.javascript-code.name') }}
     </p>
     <pre
       v-if="!state.showCodeModal"
-      class="rounded-lg overflow-auto text-gray-200 p-4 max-h-80 bg-gray-900"
+      class="max-h-80 overflow-auto rounded-lg bg-gray-900 p-4 text-gray-200"
       @click="state.showCodeModal = true"
       v-text="data.code"
     />
@@ -85,20 +85,20 @@
             class="overflow-auto"
           />
           <template v-if="!data.everyNewTab">
-            <p class="mt-1 text-sm flex justify-between">
+            <p class="mt-1 flex justify-between text-sm">
               <span>{{
                 t('workflow.blocks.javascript-code.availabeFuncs')
               }}</span>
               <span>
                 <span
-                  class="underline cursor-pointer select-none"
+                  class="cursor-pointer select-none underline"
                   @click="modifyWhiteSpace"
                   >wrap line</span
                 >
               </span>
             </p>
             <p
-              class="space-x-1 whitespace-nowrap overflow-x-auto overflow-y-hidden pb-1 scroll"
+              class="scroll space-x-1 overflow-x-auto overflow-y-hidden whitespace-nowrap pb-1"
             >
               <a
                 v-for="func in availableFuncs"
@@ -119,7 +119,7 @@
           <div
             v-for="(script, index) in state.preloadScripts"
             :key="index"
-            class="flex items-center mt-4"
+            class="mt-4 flex items-center"
           >
             <v-remixicon
               name="riDeleteBin7Line"
@@ -129,7 +129,7 @@
             <ui-input
               v-model="state.preloadScripts[index].src"
               placeholder="http://example.com/script.js"
-              class="flex-1 mr-4"
+              class="mr-4 flex-1"
             />
             <ui-checkbox
               v-if="
@@ -140,7 +140,7 @@
               {{ t('workflow.blocks.javascript-code.removeAfterExec') }}
             </ui-checkbox>
           </div>
-          <ui-button variant="accent" class="w-20 mt-4" @click="addScript">
+          <ui-button variant="accent" class="mt-4 w-20" @click="addScript">
             {{ t('common.add') }}
           </ui-button>
         </ui-tab-panel>

src/components/newtab/workflow/edit/EditLogData.vue

@@ -20,7 +20,7 @@
         {{ workflow.name }}
       </option>
     </ui-select>
-    <div class="mb-8 log-data">
+    <div class="log-data mb-8">
       <template v-if="data.workflowId">
         <p class="mt-4 mb-2">
           {{ t('workflow.blocks.log-data.data') }}

src/components/newtab/workflow/edit/EditLoopData.vue

@@ -3,12 +3,12 @@
     <ui-textarea
       :model-value="data.description"
       :placeholder="t('common.description')"
-      class="w-full mb-1"
+      class="mb-1 w-full"
       @change="updateData({ description: $event })"
     />
     <ui-input
       :model-value="data.loopId"
-      class="w-full mb-2"
+      class="mb-2 w-full"
       :label="t('workflow.blocks.loop-data.loopId')"
       :placeholder="t('workflow.blocks.loop-data.loopId')"
       @change="updateLoopID"
@@ -28,7 +28,7 @@
       :model-value="data.referenceKey"
       :label="t('workflow.blocks.loop-data.refKey')"
       placeholder="abc123"
-      class="w-full mt-2"
+      class="mt-2 w-full"
       @change="updateData({ referenceKey: $event })"
     />
     <ui-input
@@ -36,7 +36,7 @@
       :model-value="data.variableName"
       :label="t('workflow.variables.name')"
       placeholder="abc123"
-      class="w-full mt-2"
+      class="mt-2 w-full"
       @change="updateData({ variableName: $event })"
     />
     <template v-else-if="data.loopThrough === 'elements'">
@@ -46,7 +46,7 @@
           :label="t('workflow.blocks.base.selector')"
           autocomplete="off"
           placeholder="CSS Selector or XPath"
-          class="flex-1 mr-2"
+          class="mr-2 flex-1"
           @change="updateData({ elementSelector: $event })"
         />
         <shared-el-selector-actions
@@ -73,7 +73,7 @@
     </template>
     <ui-button
       v-else-if="data.loopThrough === 'custom-data'"
-      class="w-full mt-4"
+      class="mt-4 w-full"
       variant="accent"
       @click="state.showDataModal = true"
     >
@@ -81,7 +81,7 @@
     </ui-button>
     <div
       v-else-if="data.loopThrough === 'numbers'"
-      class="flex items-center space-x-2 mt-2"
+      class="mt-2 flex items-center space-x-2"
     >
       <ui-input
         :model-value="data.fromNumber"
@@ -110,7 +110,7 @@
         :model-value="data.maxLoop"
         :label="t('workflow.blocks.loop-data.maxLoop.label')"
         :title="t('workflow.blocks.loop-data.maxLoop.title')"
-        class="w-full mt-2"
+        class="mt-2 w-full"
         @change="updateData({ maxLoop: $event })"
       />
       <ui-input
@@ -118,7 +118,7 @@
         :model-value="data.startIndex"
         :label="t('workflow.blocks.loop-data.startIndex')"
         placeholder="0"
-        class="w-full mt-2"
+        class="mt-2 w-full"
         @change="updateData({ startIndex: $event })"
       />
       <ui-checkbox
@@ -141,7 +141,7 @@
       title="Data"
       content-class="max-w-3xl"
     >
-      <div class="flex mb-4 items-center">
+      <div class="mb-4 flex items-center">
         <ui-button variant="accent" @click="importFile">
           {{ t('workflow.blocks.loop-data.buttons.import') }}
         </ui-button>
@@ -154,7 +154,7 @@
         >
           <v-remixicon name="riSettings3Line" />
         </ui-button>
-        <p class="flex-1 text-overflow mx-4">{{ file.name }}</p>
+        <p class="text-overflow mx-4 flex-1">{{ file.name }}</p>
         <p>{{ t('workflow.blocks.loop-data.modal.maxFile') }}</p>
       </div>
       <div style="height: calc(100vh - 11rem)">
@@ -166,7 +166,7 @@
           @change="updateLoopData"
         />
         <div v-show="state.showOptions">
-          <p class="font-semibold mb-2">CSV</p>
+          <p class="mb-2 font-semibold">CSV</p>
           <ui-checkbox v-model="options.header">
             {{ t('workflow.blocks.loop-data.modal.options.firstRow') }}
           </ui-checkbox>

src/components/newtab/workflow/edit/EditLoopElements.vue

@@ -8,7 +8,7 @@
     <template #prepend:selector>
       <ui-input
         :model-value="data.loopId"
-        class="w-full mb-4"
+        class="mb-4 w-full"
         :label="t('workflow.blocks.loop-data.loopId')"
         :placeholder="t('workflow.blocks.loop-data.loopId')"
         @change="updateLoopId"
@@ -18,7 +18,7 @@
       :model-value="data.maxLoop"
       :label="t('workflow.blocks.loop-data.maxLoop.label')"
       :title="t('workflow.blocks.loop-data.maxLoop.title')"
-      class="w-full mt-3"
+      class="mt-3 w-full"
       @change="updateData({ maxLoop: $event })"
     />
     <ui-checkbox
@@ -28,7 +28,7 @@
     >
       {{ t('workflow.blocks.loop-data.reverse') }}
     </ui-checkbox>
-    <div class="mt-4 border-t pt-4 mb-8">
+    <div class="mt-4 mb-8 border-t pt-4">
       <p class="text-sm text-gray-600 dark:text-gray-200">
         {{ t('workflow.blocks.loop-elements.loadMore') }}
       </p>
@@ -67,7 +67,7 @@
         "
         :model-value="data.actionElMaxWaitTime"
         label="Max seconds wait for more elements"
-        class="w-full mt-2"
+        class="mt-2 w-full"
         placeholder="0"
         type="number"
         @change="updateData({ actionElMaxWaitTime: +$event })"
@@ -92,7 +92,7 @@
         v-if="data.loadMoreAction === 'click-link'"
         :model-value="data.actionPageMaxWaitTime"
         label="Max seconds wait for the page to load"
-        class="w-full mt-2"
+        class="mt-2 w-full"
         placeholder="0"
         type="number"
         @change="updateData({ actionPageMaxWaitTime: +$event })"

src/components/newtab/workflow/edit/EditNewTab.vue

@@ -22,7 +22,7 @@
     </edit-autocomplete>
     <ui-checkbox
       :model-value="data.updatePrevTab"
-      class="leading-tight mt-2"
+      class="mt-2 leading-tight"
       :title="t('workflow.blocks.new-tab.updatePrevTab.title')"
       @change="updateData({ updatePrevTab: $event })"
     >
@@ -30,7 +30,7 @@
     </ui-checkbox>
     <ui-checkbox
       :model-value="data.waitTabLoaded"
-      class="leading-tight mt-2"
+      class="mt-2 leading-tight"
       :title="t('workflow.blocks.new-tab.waitTabLoaded')"
       @change="updateData({ waitTabLoaded: $event })"
     >

src/components/newtab/workflow/edit/EditNewWindow.vue

@@ -25,7 +25,7 @@
     />
     <ui-select
       :model-value="data.windowState"
-      class="w-full mt-2"
+      class="mt-2 w-full"
       :label="t('workflow.blocks.new-window.windowState.placeholder')"
       @change="updateData({ windowState: $event })"
     >
@@ -47,7 +47,7 @@
     <div v-if="data.windowState === 'normal'" class="mt-2">
       <div
         :title="t('workflow.blocks.new-window.position')"
-        class="flex items-center space-x-2 mb-1"
+        class="mb-1 flex items-center space-x-2"
       >
         <ui-input
           :model-value="data.top"

src/components/newtab/workflow/edit/EditNotification.vue

@@ -3,7 +3,7 @@
     <ui-textarea
       :model-value="data.description"
       :placeholder="t('common.description')"
-      class="w-full mb-2"
+      class="mb-2 w-full"
       @change="updateData({ description: $event })"
     />
     <template v-if="permission.has.notifications">

src/components/newtab/workflow/edit/EditParameterPrompt.vue

@@ -10,11 +10,11 @@
       :model-value="data.timeout"
       type="number"
       label="Timeout (millisecond) (0 to disable)"
-      class="w-full mt-2"
+      class="mt-2 w-full"
       @change="updateData({ timeout: +$event })"
     />
     <ui-button
-      class="w-full mt-4"
+      class="mt-4 w-full"
       variant="accent"
       @click="showModal = !showModal"
     >
@@ -23,6 +23,7 @@
     <ui-modal v-model="showModal" title="Parameters" content-class="max-w-4xl">
       <edit-workflow-parameters
         :data="data.parameters"
+        hide-prefer-tab
         @update="updateData({ parameters: $event })"
       />
     </ui-modal>

src/components/newtab/workflow/edit/EditPressKey.vue

@@ -9,7 +9,7 @@
     <edit-autocomplete class="mt-2" trigger-class="!flex items-end">
       <ui-input
         :model-value="data.selector"
-        class="flex-1 mr-2"
+        class="mr-2 flex-1"
         autocomplete="off"
         label="Target element (Optional)"
         placeholder="CSS Selector or XPath"
@@ -23,7 +23,7 @@
     <ui-select
       :model-value="data.action || 'press-key'"
       :label="t('workflow.blocks.base.action')"
-      class="w-full mt-2"
+      class="mt-2 w-full"
       @change="updateData({ action: $event })"
     >
       <option
@@ -71,7 +71,7 @@
     <ui-textarea
       v-else
       :model-value="data.keysToPress"
-      class="w-full mt-2"
+      class="mt-2 w-full"
       placeholder="keys"
       @change="updateData({ keysToPress: $event })"
     />

src/components/newtab/workflow/edit/EditProxy.vue

@@ -3,13 +3,13 @@
     <ui-textarea
       :model-value="data.description"
       :placeholder="t('common.description')"
-      class="w-full mb-2"
+      class="mb-2 w-full"
       @change="updateData({ description: $event })"
     />
     <ui-input
       :model-value="data.host"
       placeholder="socks5://1.2.3.4:1080"
-      class="w-full mb-2"
+      class="mb-2 w-full"
       @change="updateData({ host: $event })"
     >
       <template #label>
@@ -26,7 +26,7 @@
       :model-value="data.port"
       label="Port"
       placeholder="443"
-      class="w-full mb-2"
+      class="mb-2 w-full"
       @change="updateData({ port: $event })"
     />
     <label for="input-bypass" class="input-label">
@@ -47,7 +47,7 @@
       @change="updateData({ bypassList: $event })"
     >
     </ui-textarea>
-    <p class="text-gray-600 dark:text-gray-200 text-sm">
+    <p class="text-sm text-gray-600 dark:text-gray-200">
       {{ t('workflow.blocks.proxy.bypass.note') }}
     </p>
     <ui-checkbox

src/components/newtab/workflow/edit/EditRegexVariable.vue

@@ -31,23 +31,23 @@
       class="mt-2 w-full"
       @change="updateData({ replaceVal: $event })"
     />
-    <div class="flex items-end mt-3">
-      <div class="flex-1 mr-2">
+    <div class="mt-3 flex items-end">
+      <div class="mr-2 flex-1">
         <label
-          class="ml-1 block text-gray-600 dark:text-gray-200 text-sm"
+          class="ml-1 block text-sm text-gray-600 dark:text-gray-200"
           for="var-expression"
         >
           RegEx
         </label>
         <div
-          class="flex items-center bg-input transition-colors px-4 rounded-lg"
+          class="bg-input flex items-center rounded-lg px-4 transition-colors"
         >
           <span>/</span>
           <input
             id="var-expression"
             :value="data.expression"
             placeholder="Expression"
-            class="py-2 w-11/12 bg-transparent focus:ring-0 px-1"
+            class="w-11/12 bg-transparent py-2 px-1 focus:ring-0"
             @input="updateData({ expression: $event.target.value })"
           />
           <span class="text-right">/</span>
@@ -55,7 +55,7 @@
       </div>
       <ui-popover>
         <template #trigger>
-          <button class="p-2 rounded-lg bg-input" title="Flags">
+          <button class="bg-input rounded-lg p-2" title="Flags">
             {{ data.flag.length === 0 ? 'flags' : data.flag.join('') }}
           </button>
         </template>

src/components/newtab/workflow/edit/EditSaveAssets.vue

@@ -58,7 +58,7 @@
           {{ t(`workflow.blocks.base.downloads.onConflict.${item}`) }}
         </option>
       </ui-select>
-      <hr class="w-full my-4" />
+      <hr class="my-4 w-full" />
       <label class="flex items-center">
         <ui-switch
           :model-value="data.saveDownloadIds"

src/components/newtab/workflow/edit/EditScrollElement.vue

@@ -1,6 +1,6 @@
 <template>
   <edit-interaction-base v-bind="{ data, hide: hideBase }" @change="updateData">
-    <div v-if="!data.scrollIntoView" class="flex items-center mt-3 space-x-2">
+    <div v-if="!data.scrollIntoView" class="mt-3 flex items-center space-x-2">
       <ui-input
         :model-value="data.scrollX || 0"
         :label="t('workflow.blocks.element-scroll.scrollX')"

src/components/newtab/workflow/edit/EditSliceVariable.vue

@@ -26,7 +26,7 @@
           :model-value="data[param.id]"
           placeholder="0"
           type="number"
-          class="w-full mb-2"
+          class="mb-2 w-full"
           @change="updateData({ [param.id]: +$event })"
         />
       </li>

src/components/newtab/workflow/edit/EditSortData.vue

@@ -9,7 +9,7 @@
     <ui-select
       :label="t('workflow.blocks.data-mapping.dataSource')"
       :model-value="data.dataSource"
-      class="w-full mt-4"
+      class="mt-4 w-full"
       @change="updateData({ dataSource: $event })"
     >
       <option v-for="source in dataSources" :key="source.id" :value="source.id">
@@ -24,7 +24,7 @@
       class="mt-2 w-full"
       @change="updateData({ varSourceName: $event })"
     />
-    <label class="flex items-center mt-4">
+    <label class="mt-4 flex items-center">
       <ui-switch
         :model-value="data.sortByProperty"
         @change="updateData({ sortByProperty: $event })"
@@ -53,7 +53,7 @@
               class="w-full"
             />
           </ui-autocomplete>
-          <div class="flex items-center mt-2">
+          <div class="mt-2 flex items-center">
             <ui-select v-model="property.order" class="flex-1">
               <option value="asc">Ascending</option>
               <option value="desc">Descending</option>

src/components/newtab/workflow/edit/EditSwitchTab.vue

@@ -9,7 +9,7 @@
     <ui-select
       :model-value="data.findTabBy"
       label="Find tab by"
-      class="w-full mb-2 mt-3"
+      class="mb-2 mt-3 w-full"
       @change="updateData({ findTabBy: $event })"
     >
       <option v-for="type in types" :key="type.id" :value="type.id">
@@ -31,7 +31,7 @@
               href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns#examples"
               target="_blank"
               rel="noopener"
-              class="inline-block ml-1"
+              class="ml-1 inline-block"
             >
               <v-remixicon
                 name="riInformationLine"

src/components/newtab/workflow/edit/EditSwitchTo.vue

@@ -32,7 +32,7 @@
         :label="t('workflow.blocks.switch-to.iframeSelector')"
         placeholder="CSS Selector or XPath"
         autocomplete="off"
-        class="w-full mr-2"
+        class="mr-2 w-full"
         @change="updateData({ selector: $event })"
       />
       <shared-el-selector-actions

src/components/newtab/workflow/edit/EditTabURL.vue

@@ -16,7 +16,7 @@
         {{ t(`workflow.blocks.tab-url.types.${type}`) }}
       </option>
     </ui-select>
-    <div v-if="data.type === 'all'" class="mt-4 p-2 rounded-lg border">
+    <div v-if="data.type === 'all'" class="mt-4 rounded-lg border p-2">
       <p class="text-sm text-gray-600">
         {{ t('workflow.blocks.tab-url.query.title') }}
       </p>

src/components/newtab/workflow/edit/EditTakeScreenshot.vue

@@ -9,7 +9,7 @@
     <ui-select
       :model-value="data.type"
       :label="t('workflow.blocks.take-screenshot.types.title')"
-      class="w-full mt-2"
+      class="mt-2 w-full"
       @change="updateData({ type: $event })"
     >
       <option v-for="type in types" :key="type" :value="type">
@@ -25,14 +25,14 @@
       @change="updateData({ selector: $event })"
     />
     <template v-if="data.ext === 'jpeg'">
-      <p class="text-sm text-gray-600 dark:text-gray-200 ml-2 mt-4">
+      <p class="ml-2 mt-4 text-sm text-gray-600 dark:text-gray-200">
         {{ t('workflow.blocks.take-screenshot.imageQuality') }}
       </p>
-      <div class="bg-box-transparent px-4 py-2 rounded-lg flex items-center">
+      <div class="bg-box-transparent flex items-center rounded-lg px-4 py-2">
         <input
           :value="data.quality"
           :title="t('workflow.blocks.take-screenshot.imageQuality')"
-          class="focus:outline-none flex-1"
+          class="flex-1 focus:outline-none"
           type="range"
           min="0"
           max="100"
@@ -48,13 +48,13 @@
     >
       {{ t('workflow.blocks.take-screenshot.saveToComputer') }}
     </ui-checkbox>
-    <div v-if="data.saveToComputer" class="flex items-center mt-1">
-      <edit-autocomplete class="flex-1 mr-2">
+    <div v-if="data.saveToComputer" class="mt-1 flex items-center">
+      <edit-autocomplete class="mr-2 flex-1">
         <ui-input
           :model-value="data.fileName"
           :placeholder="t('common.fileName')"
           autocomplete="off"
-          class="flex-1 mr-2"
+          class="mr-2 flex-1"
           title="File name"
           @change="updateData({ fileName: $event })"
         />
@@ -79,7 +79,7 @@
       v-if="data.saveToColumn"
       :model-value="data.dataColumn"
       placeholder="Select column"
-      class="w-full mt-1"
+      class="mt-1 w-full"
       @change="updateData({ dataColumn: $event })"
     >
       <option

src/components/newtab/workflow/edit/EditTrigger.vue

@@ -4,12 +4,12 @@
       :model-value="data.description"
       autoresize
       :placeholder="t('common.description')"
-      class="w-full mb-2"
+      class="mb-2 w-full"
       @change="updateData({ description: $event })"
     />
     <ui-button
       variant="accent"
-      class="w-full mt-4"
+      class="mt-4 w-full"
       @click="state.showTriggersModal = true"
     >
       Edit Triggers

src/components/newtab/workflow/edit/EditTriggerEvent.vue

@@ -3,7 +3,7 @@
     <ui-select
       :model-value="data.eventName"
       :placeholder="t('workflow.blocks.trigger-event.selectEvent')"
-      class="w-full mt-4"
+      class="mt-4 w-full"
       @change="handleSelectChange"
     >
       <option v-for="event in eventList" :key="event.id" :value="event.id">
@@ -11,12 +11,12 @@
       </option>
     </ui-select>
     <button
-      class="mb-2 block flex items-center w-full text-left mt-1 focus:ring-0"
+      class="mb-2 mt-1 block flex w-full items-center text-left focus:ring-0"
       @click="showOptions = !showOptions"
     >
       <v-remixicon
         name="riArrowLeftSLine"
-        class="mr-1 transition-transform -ml-1"
+        class="mr-1 -ml-1 transition-transform"
         :rotate="showOptions ? 270 : 180"
       />
       <span class="flex-1">{{ t('common.options') }}</span>
@@ -32,7 +32,7 @@
     </button>
     <transition-expand>
       <div v-if="showOptions">
-        <div class="grid grid-cols-2 gap-2 mb-4">
+        <div class="mb-4 grid grid-cols-2 gap-2">
           <ui-checkbox
             :model-value="params.bubbles"
             @change="updateParams({ ...params, bubbles: $event })"

src/components/newtab/workflow/edit/EditUploadFile.vue

@@ -7,10 +7,10 @@
     <template v-if="hasFileAccess || browserType === 'firefox'">
       <div
         v-if="browserType === 'firefox'"
-        class="mt-4 p-2 rounded-lg bg-primary mt-4 flex text-white items-start"
+        class="mt-4 flex items-start rounded-lg bg-primary p-2 text-white"
       >
         <v-remixicon name="riErrorWarningLine" size="20" />
-        <div class="ml-2 flex-1 leading-tight text-sm">
+        <div class="ml-2 flex-1 text-sm leading-tight">
           <p>{{ t('workflow.blocks.upload-file.onlyURL') }}</p>
         </div>
       </div>
@@ -18,7 +18,7 @@
         <div
           v-for="(path, index) in filePaths"
           :key="index"
-          class="flex items-center group"
+          class="group flex items-center"
         >
           <edit-autocomplete class="mr-2">
             <ui-input
@@ -41,7 +41,7 @@
     </template>
     <template v-else>
       <div
-        class="mt-4 p-2 rounded-lg bg-red-200 dark:bg-red-400 flex items-start"
+        class="mt-4 flex items-start rounded-lg bg-red-200 p-2 dark:bg-red-400"
       >
         <v-remixicon name="riErrorWarningLine" />
         <div class="ml-2 flex-1 leading-tight">
@@ -52,7 +52,7 @@
         href="https://docs.automa.site/blocks/upload-file.html#requirements"
         target="_blank"
         rel="noopener"
-        class="leading-tight inline-block text-primary mt-2"
+        class="mt-2 inline-block leading-tight text-primary"
       >
         {{ t('workflow.blocks.upload-file.requirement') }}
       </a>

src/components/newtab/workflow/edit/EditWaitConnections.vue

@@ -11,7 +11,7 @@
       :label="t('workflow.blocks.base.timeout')"
       placeholder="10000"
       type="number"
-      class="w-full mt-1"
+      class="mt-1 w-full"
       @change="updateData({ timeout: +$event })"
     />
     <ui-checkbox
@@ -25,7 +25,7 @@
       v-if="data.specificFlow"
       :model-value="data.flowBlockId"
       :label="t('workflow.blocks.wait-connections.selectFlow')"
-      class="w-full mt-1"
+      class="mt-1 w-full"
       @change="updateData({ flowBlockId: $event })"
     >
       <option v-for="item in connections" :key="item.id" :value="item.id">