feat(vad-ska-vi-ata): identisk vy i alla flikar + enhetliga rutor

Alla kategori-flikar anvander nu SAMMA rekommendations-motor (what-to-eat)
som 'Rekommenderat', sa vyn blir identisk overallt:
- sok fungerar i alla flikar, %-hemma och stjarnor visas, samma kort-layout,
  och samma paginering med 'Visa fler' (5 at gangen).
- Backend: what-to-eat tar nu valfri ?tag= (Baka-fliken filtrerar pa 'baking'
  i stallet for maltidstyp; mealType styr bara poangsattningen).
- Enhetliga chip-rutor: Button far en style-prop, flikarna ligger i 2 kolumner
  med lika bred ruta (48%), centrerad text som krymper vid behov.
- 'Toppval' visas bara pa forsta sidan. 'Alla recept & sok' kvar som lank.

Full typecheck 20/20.

apps/mobile/src/components/ui.tsx

@@ -96,7 +96,12 @@ export function Card({
     return (
       <Pressable
         onPress={withHaptic(onPress)}
-        style={({ pressed }) => [styles.card, style, pressed && { opacity: 0.85, transform: [{ scale: 0.98 }] }]}>
+        style={({ pressed }) => [
+          styles.card,
+          style,
+          pressed && { opacity: 0.85, transform: [{ scale: 0.98 }] },
+        ]}
+      >
         {children}
       </Pressable>
     );
@@ -110,12 +115,14 @@ export function Button({
   variant = "primary",
   disabled = false,
   loading = false,
+  style,
 }: {
   label: string;
   onPress: () => void;
   variant?: "primary" | "secondary" | "ghost" | "danger";
   disabled?: boolean;
   loading?: boolean;
+  style?: StyleProp<ViewStyle>;
 }) {
   const bg =
     variant === "primary"
@@ -133,14 +140,25 @@ export function Button({
       disabled={disabled || loading}
       style={({ pressed }) => [
         styles.button,
-        { backgroundColor: bg, opacity: disabled ? 0.5 : pressed ? 0.85 : 1, transform: [{ scale: pressed ? 0.97 : 1 }] },
+        {
+          backgroundColor: bg,
+          opacity: disabled ? 0.5 : pressed ? 0.85 : 1,
+          transform: [{ scale: pressed ? 0.97 : 1 }],
+        },
         variant === "ghost" && { borderWidth: 1, borderColor: colors.border },
+        style,
       ]}
     >
       {loading ? (
         <ActivityIndicator color={fg} />
       ) : (
-        <Text style={{ color: fg, fontWeight: "600", fontSize: 15 }}>{label}</Text>
+        <Text
+          numberOfLines={1}
+          adjustsFontSizeToFit
+          style={{ color: fg, fontWeight: "600", fontSize: 15, textAlign: "center" }}
+        >
+          {label}
+        </Text>
       )}
     </Pressable>
   );