Updated list style

components/ui/pagination/PaginationEllipsis.vue

@@ -16,7 +16,7 @@ const delegatedProps = computed(() => {
 <template>
   <PaginationEllipsis
     v-bind="delegatedProps"
-    :class="cn('size-9 flex items-center justify-center', props.class)"
+    :class="cn('size-8 md:size-10 flex items-center justify-center', props.class)"
   >
     <slot>
       <PhArrowsHorizontal />

components/ui/pagination/PaginationFirst.vue

@@ -21,7 +21,7 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationFirst v-bind="delegatedProps">
-    <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
+    <Button :class="cn('size-8 md:size-10 p-0', props.class)" variant="outline">
       <slot>
         <PhCaretDoubleLeft class="size-4" />
       </slot>

components/ui/pagination/PaginationLast.vue

@@ -21,7 +21,7 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationLast v-bind="delegatedProps">
-    <Button :class="cn('size-10 p-0', props.class)" variant="outline">
+    <Button :class="cn('size-8 md:size-10 p-0', props.class)" variant="outline">
       <slot>
         <PhCaretDoubleRight class="size-4" />
       </slot>

components/ui/pagination/PaginationNext.vue

@@ -21,7 +21,7 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationNext v-bind="delegatedProps">
-    <Button :class="cn('size-10 p-0', props.class)" variant="outline">
+    <Button :class="cn('size-8 md:size-10 p-0', props.class)" variant="outline">
       <slot>
         <PhCaretRight class="size-4" />
       </slot>

components/ui/pagination/PaginationPrev.vue

@@ -21,7 +21,7 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationPrev v-bind="delegatedProps">
-    <Button :class="cn('size-10 p-0', props.class)" variant="outline">
+    <Button :class="cn('size-8 md:size-10 p-0', props.class)" variant="outline">
       <slot>
         <PhCaretLeft class="size-4" />
       </slot>