IMPROVE: preset body more space for op presets

launcher/public/output.css

@@ -2118,6 +2118,10 @@ video {
   max-height: 100%;
 }
 
+.max-h-\[180px\]{
+  max-height: 180px;
+}
+
 .min-h-11{
   min-height: 2.75rem;
 }
@@ -2166,6 +2170,10 @@ video {
   min-height: 55px;
 }
 
+.min-h-\[35px\]{
+  min-height: 35px;
+}
+
 .w-1\/2{
   width: 50%;
 }
@@ -2550,6 +2558,12 @@ video {
           flex: none;
 }
 
+.flex-1{
+  -webkit-box-flex: 1;
+      -ms-flex: 1 1 0%;
+          flex: 1 1 0%;
+}
+
 .flex-shrink{
   -ms-flex-negative: 1;
       flex-shrink: 1;
@@ -2976,6 +2990,10 @@ video {
   gap: 1.25rem;
 }
 
+.gap-3{
+  gap: 0.75rem;
+}
+
 .gap-x-1{
   -webkit-column-gap: 0.25rem;
      -moz-column-gap: 0.25rem;
@@ -4791,6 +4809,10 @@ video {
   padding-top: 2px;
 }
 
+.pt-3{
+  padding-top: 0.75rem;
+}
+
 .text-left{
   text-align: left;
 }

launcher/src/components/UI/one-click/components/presets/PresetBody.vue

@@ -1,13 +1,23 @@
 import { ref, onMounted, watch } from 'vue';
 <template>
-  <div class="w-full h-full col-start-1 col-span-full row-start-3 row-end-11 grid grid-cols-12 grid-rows-7 p-2 mx-auto">
-    <div class="w-full h-full col-start-3 col-end-11 row-start-1 row-span-full bg-[#1E2429] rounded-md grid grid-cols-12 grid-rows-7 p-2">
-      <div class="col-start-1 col-span-full row-start-1 row-span-1 flex justify-center items-center">
-        <span class="text-center text-gray-200 text-sm uppercase">{{ $t("oneClick.chooseNetwork") }}</span>
+  <div
+    class="w-full h-full col-start-1 col-span-full row-start-3 row-end-11 grid grid-cols-12 grid-rows-7 p-2 mx-auto"
+  >
+    <div
+      class="w-full h-full col-start-3 col-end-11 row-start-1 row-span-full bg-[#1E2429] rounded-md grid grid-cols-12 grid-rows-7 p-2"
+    >
+      <div
+        class="col-start-1 col-span-full row-start-1 row-span-1 flex justify-center items-center"
+      >
+        <span class="text-center text-gray-200 text-sm uppercase">{{
+          $t("oneClick.chooseNetwork")
+        }}</span>
       </div>
-      <div class="col-start-1 col-span-full row-start-2 row-span-full grid grid-cols-12 grid-rows-7 pt-5">
+      <div
+        class="col-start-1 col-span-full row-start-2 row-span-full grid grid-cols-12 grid-rows-7 pt-5"
+      >
         <div
-          class="col-start-3 col-span-8 row-start-1 row-span-1 bg-gray-200 rounded-md grid grid-cols-6 cursor-pointer"
+          class="col-start-4 col-span-6 row-start-1 row-span-1 bg-gray-200 rounded-md grid grid-cols-6 cursor-pointer"
           @click="dropdownHandler"
         >
           <img
@@ -16,9 +26,10 @@ import { ref, onMounted, watch } from 'vue';
             :src="displayItem?.icon"
             alt="Arrow icon"
           />
-          <span class="col-start-2 col-end-6 justify-self-center self-center text-center text-gray-800 text-lg font-semibold">{{
-            displayItem?.name ? displayItem?.name : displayItem
-          }}</span>
+          <span
+            class="col-start-2 col-end-6 justify-self-center self-center text-center text-gray-800 text-lg font-semibold"
+            >{{ displayItem?.name ? displayItem?.name : displayItem }}</span
+          >
 
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -34,7 +45,7 @@ import { ref, onMounted, watch } from 'vue';
         <Transition name="slide-fade">
           <ul
             v-if="openDropdown"
-            class="col-start-3 col-span-8 row-start-2 row-span-full transition-all max-h-[200px] duration-400 ease-in-out bg-gray-700 rounded-lg shadow-lg pb-1 w-full z-10 divide-y overflow-y-auto flex flex-col justify-start items-center mt-2"
+            class="col-start-4 col-span-6 row-start-2 row-span-full transition-all max-h-[200px] duration-400 ease-in-out bg-gray-700 rounded-lg shadow-lg pb-1 w-full z-10 divide-y overflow-y-auto flex flex-col justify-start items-center mt-2"
           >
             <li
               v-for="item in manageStore.networkList"
@@ -43,7 +54,11 @@ import { ref, onMounted, watch } from 'vue';
               :class="item?.state === 'disabled' ? 'pointer-events-none opacity-50' : ''"
               @click="getNetwork(item)"
             >
-              <img class="h-[30px] col-start-1 col-end-2 self-center justify-self-center" :src="item.icon" alt="service Icon" />
+              <img
+                class="h-[30px] col-start-1 col-end-2 self-center justify-self-center"
+                :src="item.icon"
+                alt="service Icon"
+              />
               <span
                 class="col-start-3 col-end-6 px-4 py-1 flex justify-start items-center outline-0 whitespace-nowrap cursor-pointer text-lg text-gray-200 font-semibold"
                 >{{ item.name }}</span
@@ -52,19 +67,21 @@ import { ref, onMounted, watch } from 'vue';
           </ul>
         </Transition>
         <div
-          class="col-start-1 col-span-full row-start-2 row-span-full py-4 px-8 grid grid-cols-5 grid-rows-2 overflow-x-hidden overflow-y-auto"
+          class="col-start-1 col-span-full row-start-2 row-span-full py-4 px-8 grid grid-cols-6 grid-rows-3 overflow-x-hidden overflow-y-auto"
         >
           <div
             v-for="preset in clickStore.presets"
             :key="preset.name"
             class="col-span-1 row-span-1 justify-self-center self-center hover:border hover:border-teal-500 rounded-md hover:shadow-lg hover:shadow-[#050505] transition-all duration-300 ease-in-out active:scale-100 active:shadow-none cursor-pointer"
             :class="{
-              'opacity-30 pointer-events-none': !manageStore.currentNetwork?.support?.includes(preset.name) || !displayItem?.name,
+              'opacity-30 pointer-events-none':
+                !manageStore.currentNetwork?.support?.includes(preset.name) ||
+                !displayItem?.name,
             }"
             @click="getPreset(preset)"
           >
             <img
-              class="w-20"
+              class="w-16"
               :class="
                 preset.selected
                   ? 'scale-125 border-2 border-blue-400 rounded-md hover:scale-125 shadow-xl shadow-[#101010] transition-all duration-300 ease-in-out'