fix: move column name at the start of row for the show/edit/create views[2]

https://web.tracklify.com/project/2b7ZVgE5/AdminForth/1228/BBMiKsfJ/we-need-to-adjust-row-title-at

Author: yaroslav8765

adminforth/spa/src/components/GroupsTable.vue

@@ -22,21 +22,23 @@
           class="bg-lightForm dark:bg-darkForm dark:border-darkFormBorder block md:table-row"
           :class="{ 'border-b': i !== group.columns.length - 1}"
         >
-          <td class="px-6 py-4 flex items-center block pb-0 md:pb-4" 
+          <td class="px-6 py-4 flex items-center block pb-0 md:pb-4 relative md:table-cell" 
               :class="{'rounded-bl-lg border-b-none': i === group.columns.length - 1}"> <!--align-top-->
-            <span class="flex items-center gap-1">                     
-              {{ column.label }}
-              <Tooltip v-if="column.required[mode]">
+            <div class="absolute inset-0 flex items-center overflow-hidden px-6 py-4 max-h-32">
+              <span class="flex items-center gap-1">                     
+                {{ column.label }}
+                <Tooltip v-if="column.required[mode]">
 
-                <IconExclamationCircleSolid v-if="column.required[mode]" class="w-4 h-4" 
-                  :class="(columnError(column) && validating) ? 'text-lightInputErrorColor dark:text-darkInputErrorColor' : 'text-lightRequiredIconColor dark:text-darkRequiredIconColor'"
-                />
+                  <IconExclamationCircleSolid v-if="column.required[mode]" class="w-4 h-4" 
+                    :class="(columnError(column) && validating) ? 'text-lightInputErrorColor dark:text-darkInputErrorColor' : 'text-lightRequiredIconColor dark:text-darkRequiredIconColor'"
+                  />
 
-                <template #tooltip>
-                  {{ $t('Required field') }}
-                </template>
-              </Tooltip>
-            </span>
+                  <template #tooltip>
+                    {{ $t('Required field') }}
+                  </template>
+                </Tooltip>
+              </span>
+            </div>
           </td>
           <td
             class="px-6 py-4  whitespace-pre-wrap relative block md:table-cell"

adminforth/spa/src/components/ShowTable.vue

@@ -32,8 +32,10 @@
                   :record="coreStore.record"
               />
             <template v-else-if="checkShowIf(column, record, resource?.columns || [])">
-              <td class="px-6 py-4 relative block flex justify-start font-bold md:font-normal pb-0 md:pb-4">
-                {{ column.label }}
+              <td class="px-6 py-4 relative block flex justify-start font-bold md:font-normal pb-0 md:pb-4 relative md:table-cell">
+                <div class="absolute inset-0 flex items-center overflow-hidden px-6 py-4 max-h-32">
+                  {{ column.label }}
+                </div>
               </td>
               <td class="px-6 py-4 whitespace-pre-wrap" :data-af-column="column.name">
                 <component