feat: makes button for page size smaller (#2707)

assets/components/ContainerTable.vue

@@ -3,7 +3,7 @@
   <div class="text-right">
     Show per page
     <dropdown-menu
-      class="dropdown-left"
+      class="dropdown-left btn-xs md:btn-sm"
       v-model="perPage"
       :options="pageSizes.map((i) => ({ label: i.toLocaleString(), value: i }))"
       v-if="containers.length > 0"

assets/components/common/Dropdown.vue

@@ -5,7 +5,7 @@
     </label>
     <div
       tabindex="0"
-      class="min-w-52 dropdown-content rounded-box z-50 mt-1 border border-base-content/20 bg-base p-2 shadow"
+      class="dropdown-content z-50 mt-1 min-w-52 rounded-box border border-base-content/20 bg-base p-2 shadow"
     >
       <slot name="content"></slot>
     </div>

assets/components/common/DropdownMenu.vue

@@ -23,11 +23,16 @@ type DropdownItem = {
   label: string;
   value: T;
 };
-const { options = [], defaultLabel = "" } = defineProps<{ options?: DropdownItem[]; defaultLabel?: string }>();
+
 const { modelValue } = defineModels<{
   modelValue: T;
 }>();
 
+const { options = [], defaultLabel = "" } = defineProps<{
+  options?: DropdownItem[];
+  defaultLabel?: string;
+}>();
+
 const label = computed(() => options.find((item) => item.value === modelValue.value)?.label ?? defaultLabel);
 const details = ref<HTMLElement | null>(null);
 const close = () => details.value?.removeAttribute("open");