feat: add dynamic width adjustment

Author: kulikp1

adminforth/spa/src/components/ResourceListTable.vue

@@ -342,13 +342,15 @@
     </span>
     <div v-if="totalRows > 0 && pageSizeOptionsComputed?.length" 
       class="flex items-center gap-2 ml-auto" > 
-      <span class="text-sm text-lightListTablePaginationHelpText dark:text-darkListTablePaginationHelpText"> 
+      <span class="text-sm text-lightListTablePaginationHelpText dark:text-darkListTablePaginationHelpText whitespace-nowrap"> 
         {{ $t('Rows per page') }} 
       </span> 
-      <Select v-model="pageSizeInternal" 
+      <Select 
+        v-model="pageSizeInternal" 
         :options="pageSizeOptionsComputed" 
         :searchDisabled="true" 
-        class="text-sm w-[68px]" 
+        :style="{ width: selectDynamicWidth }"        
+        class="text-sm " 
         classesForInput="h-[34px] min-h-0 py-1 pl-2 pr-6 text-sm rounded-md cursor-pointer af-button-shadow
         bg-lightDropdownButtonsBackground text-lightDropdownButtonsText border-lightDropdownButtonsBorder
         dark:bg-darkDropdownButtonsBackground dark:text-darkDropdownButtonsText dark:border-darkDropdownButtonsBorder"
@@ -418,6 +420,12 @@ const rowsToRender = computed(() => {
   }
 });
 
+const selectDynamicWidth = computed(() => {
+  const length = pageSizeInternal.value?.toString().length || 2;
+  const calculatedWidth = length * 9 + 50;
+  return `${Math.max(68, calculatedWidth)}px`;
+});
+
 // emits, update page
 const emits = defineEmits([
   'update:page',