fix: Update ColumnValueInput and ColumnValueInputWrapper for improved layout and responsiveness; clean up ResourceListTable rendering

Author: SerVitasik

adminforth/spa/src/components/ColumnValueInput.vue

@@ -16,7 +16,7 @@
     <Select
       v-else-if="column.foreignResource"
       ref="input"
-      class="w-full"
+      class="w-full min-w-24"
       :options="columnOptions[column.name] || []"
       teleportToBody
       :placeholder = "columnOptions[column.name]?.length ?$t('Select...'): $t('There are no options available')"
@@ -27,7 +27,7 @@
     <Select
       v-else-if="column.enum"
       ref="input"
-      class="w-full"
+      class="w-full min-w-24"
       :options="column.enum"
       teleportToBody
       :modelValue="value"
@@ -37,7 +37,7 @@
     <Select
       v-else-if="(type || column.type) === 'boolean'"
       ref="input"
-      class="w-full"
+      class="w-full min-w-24"
       :options="getBooleanOptions(column)"
       teleportToBody
       :modelValue="value"

adminforth/spa/src/components/ColumnValueInputWrapper.vue

@@ -21,16 +21,18 @@
         @delete="setCurrentValue(column.name, currentValues[column.name].filter((_, index) => index !== arrayItemIndex))"
       />
     </div>
-    <button
-      v-if="!column.editReadonly"
-      type="button"
+    <div class="flex items-center">
+      <button
+        v-if="!column.editReadonly"
+        type="button"
       @click="addArrayItem"
       class="flex items-center py-1 px-3 me-2 text-sm font-medium rounded-default text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
       :class="{'mt-2': currentValues[column.name].length}"
     >
       <IconPlusOutline class="w-4 h-4 me-2"/>
-      {{ $t('Add') }}
-    </button>
+        {{ $t('Add') }}
+      </button>
+    </div>
   </template>
   <ColumnValueInput
     v-else

adminforth/spa/src/components/ResourceListTable.vue

@@ -14,7 +14,6 @@
     <table v-else class=" w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 rounded-default">
 
       <tbody>
-        
         <!-- table header -->
         <tr class="t-header sticky z-10 top-0 text-xs  bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-gray-400">
           <td scope="col" class="p-4">
@@ -60,10 +59,8 @@
             {{ $t('Actions') }}
           </td>
         </tr>
-        <tr v-for="c in tableBodyStartInjection" :key="c.id">
-          <td :colspan="resource?.columns.length + 2">
-            <component :is="getCustomComponent(c)" :meta="c.meta" :resource="resource" :adminUser="coreStore.adminUser" />
-          </td>
+        <tr v-for="c in tableBodyStartInjection" :key="c.id" class="align-top">
+          <component :is="getCustomComponent(c)" :meta="c.meta" :resource="resource" :adminUser="coreStore.adminUser" />
         </tr>
         <!-- table header end -->
         <SkeleteLoader