Fixed UI Issue...

Author: amit-webkul

composer.lock

@@ -598,7 +598,7 @@
         background: transparent;
         background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
         background-repeat: no-repeat;
-        background-position-x: calc(100% - 10px);
+        background-position-x: calc(100% - 5px);
         background-position-y: 50%;
     }
 
@@ -607,7 +607,7 @@
     }
 
     [dir="rtl"] .custom-select {
-        background-position-x: calc(100% - (100% - 10px));
+        background-position-x: calc(100% - (100% - 5px));
     }
 
     .draggable-ghost {

packages/Webkul/Admin/src/Resources/assets/css/app.css

@@ -175,7 +175,7 @@ class="flex w-full items-center overflow-hidden rounded-md border text-sm text-g
                 name="{{ $name }}"
                 v-bind="field"
                 :class="[errors.length ? 'border border-red-500' : '']"
-                {{ $attributes->except(['value', ':value', 'v-model', 'rules', ':rules', 'label', ':label'])->merge(['class' => 'custom-select w-full rounded border border-gray-200 px-2.5 py-2 text-sm font-normal text-gray-800 transition-all hover:border-gray-400 focus:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400']) }}
+                {{ $attributes->except(['value', ':value', 'v-model', 'rules', ':rules', 'label', ':label'])->merge(['class' => 'custom-select w-full rounded border border-gray-200 pl-2.5 pr-8 py-2 text-sm font-normal text-gray-800 transition-all hover:border-gray-400 focus:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400']) }}
             >
                 {{ $slot }}
             </select>

packages/Webkul/Admin/src/Resources/views/components/form/control-group/control.blade.php

@@ -153,7 +153,7 @@ class="text-gray-600 dark:text-gray-300"
                         :name="name"
                         v-bind="data.field"
                         :class="[data.errors.length ? 'border border-red-500' : '']"
-                        class="custom-select w-full rounded-md border bg-white px-3 py-2.5 text-sm font-normal text-gray-600 transition-all hover:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400"
+                        class="custom-select w-full rounded-md border bg-white py-2.5 pl-2.5 pr-3 text-sm font-normal text-gray-600 transition-all hover:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400"
                     >
                         <option
                             v-for="option in field.options"
@@ -180,7 +180,7 @@ class="custom-select w-full rounded-md border bg-white px-3 py-2.5 text-sm font-
                         :name="`${name}[]`"
                         v-bind="data.field"
                         :class="[data.errors.length ? 'border border-red-500' : '']"
-                        class="custom-select w-full rounded-md border bg-white px-3 py-2.5 text-sm font-normal text-gray-600 transition-all hover:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400"
+                        class="custom-select w-full rounded-md border bg-white py-2.5 pl-2.5 pr-3 text-sm font-normal text-gray-600 transition-all hover:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400"
                         multiple
                     >
                         <option

packages/Webkul/Admin/src/Resources/views/configuration/field-type.blade.php

@@ -345,7 +345,7 @@ class="text-md flex max-w-max items-center gap-2 text-brandColor"
                     <select
                         :name="['conditions[' + index + '][attribute]']"
                         :id="['conditions[' + index + '][attribute]']"
-                        class="custom-select min:w-1/3 flex h-10 w-1/3 rounded-md border bg-white px-3 py-2.5 text-sm font-normal text-gray-600 transition-all hover:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 max-sm:max-w-full max-sm:flex-auto"
+                        class="custom-select min:w-1/3 flex h-10 w-1/3 rounded-md border bg-white py-2.5 pl-2.5 pr-3 text-sm font-normal text-gray-600 transition-all hover:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 max-sm:max-w-full max-sm:flex-auto"
                         v-model="condition.attribute"
                     >
                         <option
@@ -359,7 +359,7 @@ class="custom-select min:w-1/3 flex h-10 w-1/3 rounded-md border bg-white px-3 p
                         <select
                             :name="['conditions[' + index + '][operator]']"
                             :id="['conditions[' + index + '][operator]']"
-                            class="custom-select min:w-1/3 inline-flex h-10 w-1/3 items-center justify-between gap-x-1 rounded-md border bg-white px-3 py-2.5 text-sm font-normal text-gray-600 transition-all hover:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 max-sm:max-w-full max-sm:flex-auto"
+                            class="custom-select min:w-1/3 inline-flex h-10 w-1/3 items-center justify-between gap-x-1 rounded-md border bg-white py-2.5 pl-2.5 pr-3 text-sm font-normal text-gray-600 transition-all hover:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 max-sm:max-w-full max-sm:flex-auto"
                             v-model="condition.operator"
                         >
                             <option
@@ -452,7 +452,7 @@ class="min:w-1/3 flex w-full rounded-md border px-3 py-2 text-sm text-gray-600 t
                         <template v-if="matchedAttribute.type == 'boolean'">
                             <select
                                 :name="['conditions[' + index + '][value]']"
-                                class="custom-select inline-flex h-10 w-1/3 items-center justify-between gap-x-1 rounded-md border bg-white px-3 py-2.5 text-sm font-normal text-gray-600 transition-all hover:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 max-sm:max-w-full max-sm:flex-auto"
+                                class="custom-select inline-flex h-10 w-1/3 items-center justify-between gap-x-1 rounded-md border bg-white py-2.5 pl-2.5 pr-3 text-sm font-normal text-gray-600 transition-all hover:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 max-sm:max-w-full max-sm:flex-auto"
                                 v-model="condition.value"
                             >
                                 <option value="1">
@@ -476,7 +476,7 @@ class="custom-select inline-flex h-10 w-1/3 items-center justify-between gap-x-1
                             <template v-if="! matchedAttribute.lookup_type">
                                 <select
                                     :name="['conditions[' + index + '][value]']"
-                                    class="custom-select inline-flex h-10 w-1/3 items-center justify-between gap-x-1 rounded-md border bg-white px-3 py-2.5 text-sm font-normal text-gray-600 transition-all hover:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400"
+                                    class="custom-select inline-flex h-10 w-1/3 items-center justify-between gap-x-1 rounded-md border bg-white py-2.5 pl-2.5 pr-3 text-sm font-normal text-gray-600 transition-all hover:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400"
                                     v-model="condition.value"
                                 >
                                     <option
@@ -566,11 +566,11 @@ class="custom-select flex h-10 w-full rounded-md border bg-white px-3 py-2.5 tex
                 <x-admin::table.td >
                     <div class="flex w-full justify-between gap-4">
                         <template v-if="matchedAction && matchedAction.attributes">
-                            <!-- Mattched Attribute -->
+                            <!-- Matched Attribute -->
                             <select
                                 :name="['actions[' + index + '][attribute]']"
                                 :id="['actions[' + index + '][attribute]']"
-                                class="custom-select inline-flex h-10 w-full items-center justify-between gap-x-1 rounded-md border bg-white px-3 py-2.5 text-sm font-normal text-gray-600 transition-all hover:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 max-sm:max-w-full max-sm:flex-auto"
+                                class="custom-select inline-flex h-10 w-full items-center justify-between gap-x-1 rounded-md border bg-white py-2.5 pl-2.5 pr-3 text-sm font-normal text-gray-600 transition-all hover:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 max-sm:max-w-full max-sm:flex-auto"
                                 v-model="action.attribute"
                             >
                                 <option
@@ -690,7 +690,7 @@ class="flex min-h-[39px] w-full rounded-md border px-3 py-2 text-sm text-gray-60
                                 <template v-if="matchedAttribute.type == 'boolean'">
                                     <select
                                         :name="['actions[' + index + '][value]']"
-                                        class="custom-select inline-flex h-10 w-full items-center justify-between gap-x-1 rounded-md border bg-white px-3 py-2.5 text-sm font-normal text-gray-600 transition-all hover:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 max-sm:max-w-full max-sm:flex-auto"
+                                        class="custom-select inline-flex h-10 w-full items-center justify-between gap-x-1 rounded-md border bg-white py-2.5 pl-2.5 pr-3 text-sm font-normal text-gray-600 transition-all hover:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 max-sm:max-w-full max-sm:flex-auto"
                                         v-model="action.value"
                                     >
                                         <option value="1">
@@ -715,7 +715,7 @@ class="custom-select inline-flex h-10 w-full items-center justify-between gap-x-
                                     <template v-if="! matchedAttribute.lookup_type">
                                         <select
                                             :name="['actions[' + index + '][value]']"
-                                            class="custom-select inline-flex h-10 w-full items-center justify-between gap-x-1 rounded-md border bg-white px-3 py-2.5 text-sm font-normal text-gray-600 transition-all hover:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400"
+                                            class="custom-select inline-flex h-10 w-full items-center justify-between gap-x-1 rounded-md border bg-white py-2.5 pl-2.5 pr-3 text-sm font-normal text-gray-600 transition-all hover:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400"
                                             v-model="action.value"
                                         >
                                             <option
@@ -765,7 +765,7 @@ class="inline-flex h-20 w-full items-center justify-between gap-x-1 rounded-md b
                         <template v-if="matchedAction && matchedAction.options">
                             <select
                                 :name="`actions[${index}][value]`"
-                                class="custom-select flex h-10 w-full rounded-md border bg-white px-3 py-2.5 text-sm font-normal text-gray-600 transition-all hover:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 max-sm:max-w-full max-sm:flex-auto"
+                                class="custom-select flex h-10 w-full rounded-md border bg-white py-2.5 pl-2.5 pr-3 text-sm font-normal text-gray-600 transition-all hover:border-gray-400 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300 dark:hover:border-gray-400 max-sm:max-w-full max-sm:flex-auto"
                                 v-model="action.value"
                             >
                                 <option