fix: improve view mode filters sizes

Author: alexdln

app/components/Package/ListToolbar.vue

@@ -179,7 +179,7 @@ function getSortKeyLabelKey(key: SortKey): string {
           <button
             v-if="!searchContext || currentSort.key !== 'relevance'"
             type="button"
-            class="p-1.5 rounded border border-border bg-bg-subtle text-fg-muted hover:text-fg hover:border-border-hover transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
+            class="p-2.5 rounded-md border border-border bg-bg-subtle text-fg-muted hover:text-fg hover:border-border-hover transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-2 focus-visible:ring-offset-bg"
             :aria-label="$t('filters.sort.toggle_direction')"
             :title="
               currentSort.direction === 'asc'

app/components/ViewModeToggle.vue

@@ -6,13 +6,13 @@ const viewMode = defineModel<ViewMode>({ default: 'cards' })
 
 <template>
   <div
-    class="inline-flex rounded-md border border-border p-0.5 bg-bg-muted"
+    class="flex rounded-md border border-border p-0.5 bg-bg-muted"
     role="group"
     :aria-label="$t('filters.view_mode.label')"
   >
     <button
       type="button"
-      class="inline-flex items-center px-2.5 py-1.5 text-sm font-medium rounded-sm border transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+      class="flex items-center px-2.5 py-2 text-sm font-medium rounded-sm border transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
       :class="
         viewMode === 'cards'
           ? 'bg-bg-subtle text-fg border-fg-subtle'
@@ -22,12 +22,12 @@ const viewMode = defineModel<ViewMode>({ default: 'cards' })
       :aria-label="$t('filters.view_mode.cards')"
       @click="viewMode = 'cards'"
     >
-      <span class="i-lucide:rows-2 w-4 h-4" aria-hidden="true" />
+      <span class="block i-lucide:rows-2 w-4 h-4" aria-hidden="true" />
       <span class="sr-only">{{ $t('filters.view_mode.cards') }}</span>
     </button>
     <button
       type="button"
-      class="inline-flex items-center px-2.5 py-1.5 text-sm font-medium rounded-sm border transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
+      class="flex items-center px-2.5 py-2 text-sm font-medium rounded-sm border transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-fg focus-visible:ring-offset-1"
       :class="
         viewMode === 'table'
           ? 'bg-bg-subtle  text-fg border-fg-subtle'
@@ -37,7 +37,7 @@ const viewMode = defineModel<ViewMode>({ default: 'cards' })
       :aria-label="$t('filters.view_mode.table')"
       @click="viewMode = 'table'"
     >
-      <span class="i-lucide:table w-4 h-4" aria-hidden="true" />
+      <span class="block i-lucide:table w-4 h-4" aria-hidden="true" />
       <span class="sr-only">{{ $t('filters.view_mode.table') }}</span>
     </button>
   </div>