Use Card components instead of buttons for product selection

app/pages/catalog/hubs/[id].vue

@@ -43,16 +43,18 @@
         </template>
 
         <template #filters>
-          <div class="flex gap-2 flex-wrap">
-            <button
+          <div class="flex gap-3 overflow-x-auto pb-2">
+            <Card
               v-for="product in products"
               :key="product.uuid"
-              class="btn btn-sm"
-              :class="selectedProductUuid === product.uuid ? 'btn-primary' : 'btn-outline'"
+              padding="sm"
+              interactive
+              class="min-w-32 cursor-pointer shrink-0"
+              :class="selectedProductUuid === product.uuid ? 'ring-2 ring-primary' : ''"
               @click="selectedProductUuid = product.uuid"
             >
-              {{ product.name }}
-            </button>
+              <Text weight="semibold" size="sm">{{ product.name }}</Text>
+            </Card>
           </div>
         </template>