Merge pull request #701 from devforth/feature/AdminForth/1798/could-you-please-check-the-but

fix: update button height and wrap text in spans for better styling c…

Author: SerVitasik

adminforth/spa/src/components/ResourceListTable.vue

@@ -364,7 +364,7 @@
         :placeholder="pageSizeInternal?.toString()"        
         class="text-sm min-w-20 af-page-size-button" 
         classesForInput="
-        af-page-size-btn h-[34px] min-h-0 py-1 pl-2 pr-6 text-left text-sm font-medium transition-all 
+        af-page-size-btn h-[2.125rem] min-h-0 py-1 pl-2 pr-6 text-left text-sm font-medium transition-all 
         outline-none cursor-pointer af-button-shadow rounded-default bg-lightListViewButtonBackground 
         text-lightListViewButtonText border-lightListViewButtonBorder 
         dark:bg-darkListViewButtonBackground dark:text-darkListViewButtonText dark:border-darkListViewButtonBorder 

adminforth/spa/src/views/ListView.vue

@@ -121,7 +121,7 @@
           dark:hover:text-darkListViewButtonTextHover dark:hover:bg-darkListViewButtonBackgroundHover rounded-default gap-1"
       >
         <IconPlusOutline class="w-4 h-4"/>
-        {{ $t('Create') }}
+        <span>{{ $t('Create') }}</span>
       </RouterLink>
 
       <button
@@ -135,7 +135,7 @@
         v-if="coreStore.resource?.options?.allowedActions?.filter"
       >
         <IconFilterOutline class="w-4 h-4"/>
-        {{ $t('Filter') }}
+        <span>{{ $t('Filter') }}</span>
         <div v-if="filtersStore.visibleFiltersCount" class="flex items-center gap-1 ms-1">
           <span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">
               {{ filtersStore.visibleFiltersCount }}

adminforth/spa/src/views/ShowView.vue

@@ -15,7 +15,7 @@
         :to="nextRecordRoute ?? $route"
         @click="handleNextClick()"
         :class="!nextRecordRoute ? 'opacity-50 pointer-events-none cursor-not-allowed' : ''"
-        class="af-button-shadow h-[34px] inline-flex items-center gap-1 px-3 py-2 text-sm font-medium transition-all border outline-none bg-lightListViewButtonBackground text-lightListViewButtonText border-lightListViewButtonBorder dark:bg-darkListViewButtonBackground dark:text-darkListViewButtonText dark:border-darkListViewButtonBorder hover:bg-lightListViewButtonBackgroundHover hover:text-lightListViewButtonTextHover rounded-default dark:hover:text-darkListViewButtonTextHover dark:hover:bg-darkListViewButtonBackgroundHover"
+        class="af-button-shadow h-[2.125rem] inline-flex items-center gap-1 px-3 py-2 text-sm font-medium transition-all border outline-none bg-lightListViewButtonBackground text-lightListViewButtonText border-lightListViewButtonBorder dark:bg-darkListViewButtonBackground dark:text-darkListViewButtonText dark:border-darkListViewButtonBorder hover:bg-lightListViewButtonBackgroundHover hover:text-lightListViewButtonTextHover rounded-default dark:hover:text-darkListViewButtonTextHover dark:hover:bg-darkListViewButtonBackgroundHover"
       >
         <Spinner v-if="isFetchingNextPage" class="w-4 h-4 text-gray-200 dark:text-gray-500 fill-gray-500 dark:fill-gray-300" />
         {{ $t('Next') }}