fix(ui): use the shared field radius in the phone header

The phone search field was forced to border-radius:999px. That looked
out of place next to the 6px used everywhere else, and at that radius the
1px border vanished along both arcs - the element's overflow:hidden
rounded clip cuts the outline, so the field read as a broken frame.

Use var(--border-radius-sm, 6px), i.e. exactly the wide-screen value.
Verified at 320/390/520/600 and focused, light and dark.

static/css/components/header.css

@@ -937,9 +937,12 @@
     margin: 0 4px;
   }
 
+  /* Same corner radius as the wide-screen field. With a pill radius the 1px
+     border disappeared along both arcs (the container's overflow:hidden
+     rounded clip), which read as a broken outline. */
   .header-search .search-container {
     width: 100%;
-    border-radius: 999px;
+    border-radius: var(--border-radius-sm, 6px);
   }
 
   .header-search input {