feat(design): the header search is a 40 glass pill; a wrapper field dims for its input only (E28 S3c)

frontend/src/components/ui/Button.tsx

@@ -69,7 +69,8 @@ const PRESSED =
 // B1, the whole ladder: explicit heights, so a toolbar's `sm` button, search pill, dropdown trigger and
 // small icon button all line up at 28. A call site picks a rung; it does not invent one. rem-derived, so
 // the Settings text-size slider (--font-scale) grows the box with the label. A1: r8 on every rung; a
-// button on a picture is a pill instead (A2: round means "on media", and nothing else).
+// button on a picture, or nested in a pill (the header search's Go), is a pill instead (A2: round
+// means "floats over something", and a pill's inner button follows its radius).
 const SIZES: Record<ButtonSize, string> = {
   xs: "h-6 px-2 text-xs gap-1 whitespace-nowrap",
   sm: "h-7 px-2.5 text-sm gap-1.5 whitespace-nowrap",
@@ -97,8 +98,9 @@ interface ButtonOwnProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   loading?: boolean;
   /** A toggle: sets aria-pressed and paints the pressed state (the solid accent). */
   pressed?: boolean;
-  /** Sits on a picture (a thumbnail, a poster): the pill shape. Implied by the `media` variant. */
-  onMedia?: boolean;
+  /** Sits on a picture (a thumbnail, a poster) or inside a pill field: the pill shape. Implied by the
+   *  `media` variant. */
+  round?: boolean;
   fullWidth?: boolean;
 }
 
@@ -119,7 +121,7 @@ const ButtonImpl = forwardRef<HTMLButtonElement, ButtonOwnProps>(function Button
     label,
     loading = false,
     pressed,
-    onMedia = false,
+    round = false,
     fullWidth = false,
     className,
     children,
@@ -158,7 +160,7 @@ const ButtonImpl = forwardRef<HTMLButtonElement, ButtonOwnProps>(function Button
         VARIANTS[variant],
         pressed !== undefined && PRESSED,
         SIZES[resolvedSize],
-        resolvedSize !== "none" && (onMedia || variant === "media" ? "rounded-full" : "rounded-lg"),
+        resolvedSize !== "none" && (round || variant === "media" ? "rounded-full" : "rounded-lg"),
         touchTarget && "touch-target",
         fullWidth && "w-full",
         className,