⚠️ refactor (form): refactor label component for improved styling and responsiveness

app/components/pub/ui/pagination/PaginationEllipsis.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { PaginationEllipsisProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import { cn } from '@/lib/utils'
 import { PaginationEllipsis } from 'radix-vue'
 import { computed } from 'vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes['class'] }>()
 

app/components/pub/ui/pagination/PaginationFirst.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import type { PaginationFirstProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import {
-  Button,
-} from '@/components/ui/button'
-import { cn } from '@/lib/utils'
 import { PaginationFirst } from 'radix-vue'
 import { computed } from 'vue'
+import { Button } from '@/components/pub/ui/button'
+import { cn } from '@/lib/utils'
 
 const props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
@@ -21,7 +19,7 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationFirst v-bind="delegatedProps">
-    <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
+    <Button :class="cn('h-9 w-9 p-0', props.class)" variant="outline">
       <slot>
         <Icon name="i-radix-icons-double-arrow-left" />
       </slot>

app/components/pub/ui/pagination/PaginationLast.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import type { PaginationLastProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import {
-  Button,
-} from '@/components/ui/button'
-import { cn } from '@/lib/utils'
 import { PaginationLast } from 'radix-vue'
 import { computed } from 'vue'
+import { Button } from '@/components/pub/ui/button'
+import { cn } from '@/lib/utils'
 
 const props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
@@ -21,7 +19,7 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationLast v-bind="delegatedProps">
-    <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
+    <Button :class="cn('h-9 w-9 p-0', props.class)" variant="outline">
       <slot>
         <Icon name="i-radix-icons-double-arrow-right" />
       </slot>

app/components/pub/ui/pagination/PaginationNext.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import type { PaginationNextProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import {
-  Button,
-} from '@/components/ui/button'
-import { cn } from '@/lib/utils'
 import { PaginationNext } from 'radix-vue'
 import { computed } from 'vue'
+import { Button } from '@/components/pub/ui/button'
+import { cn } from '@/lib/utils'
 
 const props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
@@ -21,7 +19,7 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationNext v-bind="delegatedProps">
-    <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
+    <Button :class="cn('h-9 w-9 p-0', props.class)" variant="outline">
       <slot>
         <Icon name="i-radix-icons-chevron-right" />
       </slot>

app/components/pub/ui/pagination/PaginationPrev.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import type { PaginationPrevProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
-import {
-  Button,
-} from '@/components/ui/button'
-import { cn } from '@/lib/utils'
 import { PaginationPrev } from 'radix-vue'
 import { computed } from 'vue'
+import { Button } from '@/components/pub/ui/button'
+import { cn } from '@/lib/utils'
 
 const props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
@@ -21,7 +19,7 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationPrev v-bind="delegatedProps">
-    <Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
+    <Button :class="cn('h-9 w-9 p-0', props.class)" variant="outline">
       <slot>
         <Icon name="i-radix-icons-chevron-left" />
       </slot>