refactor: sort windi class names

packages/hoppscotch-app/components/collections/my/Collection.vue

@@ -10,7 +10,7 @@
       @dragend="dragging = false"
     >
       <span
-        class="cursor-pointer flex px-4 justify-center items-center"
+        class="flex items-center justify-center px-4 cursor-pointer"
         @click="toggleShowChildren()"
       >
         <SmartIcon
@@ -21,13 +21,14 @@
       </span>
       <span
         class="
-          cursor-pointer
-          flex flex-1
+          flex
+          group-hover:text-secondaryDark
+          flex-1
           min-w-0
           py-2
           pr-2
           transition
-          group-hover:text-secondaryDark
+          cursor-pointer
         "
         @click="toggleShowChildren()"
       >
@@ -176,23 +177,25 @@
               collection.requests.length === 0)
           "
           class="
-            flex flex-col
+            flex
             text-secondaryLight
-            p-4
+            flex-col
             items-center
             justify-center
+            p-4
           "
         >
           <img
             :src="`/images/states/${$colorMode.value}/pack.svg`"
             loading="lazy"
             class="
-              flex-col
-              mb-4
-              object-contain object-center
-              h-16
-              w-16
+              object-contain
               inline-flex
+              flex-col
+              object-center
+              w-16
+              h-16
+              mb-4
             "
             :alt="$t('empty.collection')"
           />

packages/hoppscotch-app/components/collections/my/Folder.vue

@@ -10,7 +10,7 @@
       @dragend="dragging = false"
     >
       <span
-        class="cursor-pointer flex px-4 justify-center items-center"
+        class="flex items-center justify-center px-4 cursor-pointer"
         @click="toggleShowChildren()"
       >
         <SmartIcon
@@ -21,13 +21,14 @@
       </span>
       <span
         class="
-          cursor-pointer
-          flex flex-1
+          flex
+          group-hover:text-secondaryDark
+          flex-1
           min-w-0
           py-2
           pr-2
           transition
-          group-hover:text-secondaryDark
+          cursor-pointer
         "
         @click="toggleShowChildren()"
       >
@@ -158,23 +159,25 @@
             folder.requests.length === 0
           "
           class="
-            flex flex-col
+            flex
             text-secondaryLight
-            p-4
+            flex-col
             items-center
             justify-center
+            p-4
           "
         >
           <img
             :src="`/images/states/${$colorMode.value}/pack.svg`"
             loading="lazy"
             class="
-              flex-col
-              mb-4
-              object-contain object-center
-              h-16
-              w-16
+              object-contain
               inline-flex
+              flex-col
+              object-center
+              w-16
+              h-16
+              mb-4
             "
             :alt="$t('empty.folder')"
           />

packages/hoppscotch-app/components/collections/my/Request.vue

@@ -10,13 +10,13 @@
     >
       <span
         class="
-          cursor-pointer
           flex
-          px-2
-          w-16
-          justify-center
           items-center
+          justify-center
+          w-16
+          px-2
           truncate
+          cursor-pointer
         "
         :class="getRequestLabelColor(request.method)"
         @click="!doc ? selectRequest() : {}"
@@ -33,14 +33,15 @@
       </span>
       <span
         class="
-          cursor-pointer
-          flex flex-1
+          group-hover:text-secondaryDark
+          flex
+          items-center
+          flex-1
           min-w-0
           py-2
           pr-2
           transition
-          items-center
-          group-hover:text-secondaryDark
+          cursor-pointer
         "
         @click="!doc ? selectRequest() : {}"
       >