fix: product variant select ui

Author: KaiUweCZE

apps/herbatika/src/components/product-detail/sections/product-detail-purchase-panel.tsx

@@ -163,12 +163,13 @@ export function ProductDetailPurchasePanel({
           onValueChange={(details) => {
             onVariantChange(details.value[0] ?? null)
           }}
-          size="sm"
+          className="max-w-xs"
+          size="lg"
           value={selectedVariantId ? [selectedVariantId] : []}
         >
           <Select.Label>Varianta</Select.Label>
           <Select.Control>
-            <Select.Trigger>
+            <Select.Trigger className="rounded-select-lg">
               <Select.ValueText placeholder="Vyberte variantu" />
             </Select.Trigger>
           </Select.Control>

apps/herbatika/src/styles/tokens/components/components.css

@@ -1,3 +1,5 @@
+@import "./_herbatika-form-control.css";
+
 @import "./atoms/_herbatika-badge.css";
 @import "./atoms/_herbatika-button.css";
 @import "./atoms/_herbatika-checkbox.css";

apps/herbatika/src/styles/tokens/components/molecules/_herbatika-select.css

@@ -1,6 +1,8 @@
 @theme static {
   --gap-select-root: var(--spacing-100);
-  --radius-select-md: var(--radius-xs);
+  --radius-select: var(--radius-xs);
+  --radius-select-lg: var(--radius-xs);
+  --radius-select-md: var(--radius-xs);  
 
   --color-select-content-bg: var(--color-surface);
   --color-select-content-border: var(--color-border-primary);