refactor: sort windi class names

packages/hoppscotch-app/components/lenses/HeadersRenderer.vue

@@ -3,14 +3,16 @@
     <div
       class="
         bg-primary
-        border-b border-dividerLight
-        flex flex-1
+        border-dividerLight
         top-lowerSecondaryStickyFold
-        pl-4
-        z-10
         sticky
+        z-10
+        flex
         items-center
         justify-between
+        flex-1
+        pl-4
+        border-b
       "
     >
       <label class="font-semibold text-secondaryLight">
@@ -31,37 +33,41 @@
       v-for="(header, index) in headers"
       :key="`header-${index}`"
       class="
-        divide-x divide-dividerLight
-        border-b border-dividerLight
-        flex
+        divide-dividerLight
+        border-dividerLight
         group
+        flex
+        border-b
+        divide-x
       "
     >
       <span
         class="
-          flex flex-1
-          min-w-0
-          py-2
-          px-4
-          transition
+          flex
           group-hover:text-secondaryDark
+          flex-1
+          min-w-0
+          px-4
+          py-2
+          transition
         "
       >
-        <span class="rounded-sm select-all truncate">
+        <span class="truncate rounded-sm select-all">
           {{ header.key }}
         </span>
       </span>
       <span
         class="
-          flex flex-1
-          min-w-0
-          py-2
-          px-4
-          transition
+          flex
           group-hover:text-secondaryDark
+          flex-1
+          min-w-0
+          px-4
+          py-2
+          transition
         "
       >
-        <span class="rounded-sm select-all truncate">
+        <span class="truncate rounded-sm select-all">
           {{ header.value }}
         </span>
       </span>

packages/hoppscotch-app/components/lenses/renderers/HTMLLensRenderer.vue

@@ -3,14 +3,16 @@
     <div
       class="
         bg-primary
-        border-b border-dividerLight
-        flex flex-1
+        border-dividerLight
         top-lowerSecondaryStickyFold
-        pl-4
-        z-10
         sticky
+        z-10
+        flex
         items-center
         justify-between
+        flex-1
+        pl-4
+        border-b
       "
     >
       <label class="font-semibold text-secondaryLight">

packages/hoppscotch-app/components/lenses/renderers/ImageLensRenderer.vue

@@ -3,14 +3,16 @@
     <div
       class="
         bg-primary
-        border-b border-dividerLight
-        flex flex-1
+        border-dividerLight
         top-lowerSecondaryStickyFold
-        pl-4
-        z-10
         sticky
+        z-10
+        flex
         items-center
         justify-between
+        flex-1
+        pl-4
+        border-b
       "
     >
       <label class="font-semibold text-secondaryLight">
@@ -28,7 +30,7 @@
       </div>
     </div>
     <img
-      class="border-b border-dividerLight flex max-w-full flex-1"
+      class="flex flex-1 max-w-full border-b border-dividerLight"
       :src="imageSource"
       loading="lazy"
       :alt="imageSource"

packages/hoppscotch-app/components/lenses/renderers/JSONLensRenderer.vue

@@ -3,14 +3,16 @@
     <div
       class="
         bg-primary
-        border-b border-dividerLight
-        flex flex-1
+        border-dividerLight
         top-lowerSecondaryStickyFold
-        pl-4
-        z-10
         sticky
+        z-10
+        flex
         items-center
         justify-between
+        flex-1
+        pl-4
+        border-b
       "
     >
       <label class="font-semibold text-secondaryLight">{{
@@ -47,15 +49,18 @@
     <div
       v-if="outlinePath"
       class="
+        flex
         bg-primaryLight
-        border-t border-dividerLight
-        flex flex-nowrap flex-1
-        px-2
+        border-dividerLight
+        flex-nowrap
+        hide-scrollbar
+        sticky
         bottom-0
         z-10
-        sticky
+        flex-1
+        px-2
         overflow-auto
-        hide-scrollbar
+        border-t
       "
     >
       <div
@@ -135,7 +140,7 @@
         </tippy>
         <i
           v-if="index + 1 !== outlinePath.length"
-          class="text-secondaryLight opacity-50 material-icons"
+          class="opacity-50 text-secondaryLight material-icons"
           >chevron_right</i
         >
       </div>

packages/hoppscotch-app/components/lenses/renderers/RawLensRenderer.vue

@@ -3,14 +3,16 @@
     <div
       class="
         bg-primary
-        border-b border-dividerLight
-        flex flex-1
+        border-dividerLight
         top-lowerSecondaryStickyFold
-        pl-4
-        z-10
         sticky
+        z-10
+        flex
         items-center
         justify-between
+        flex-1
+        pl-4
+        border-b
       "
     >
       <label class="font-semibold text-secondaryLight">

packages/hoppscotch-app/components/lenses/renderers/XMLLensRenderer.vue

@@ -3,14 +3,16 @@
     <div
       class="
         bg-primary
-        border-b border-dividerLight
-        flex flex-1
+        border-dividerLight
         top-lowerSecondaryStickyFold
-        pl-4
-        z-10
         sticky
+        z-10
+        flex
         items-center
         justify-between
+        flex-1
+        pl-4
+        border-b
       "
     >
       <label class="font-semibold text-secondaryLight">