fix(web): keep the header on one line between md and lg

Tailwind's container is 768px wide across the whole 768–1023 range
(736px content box). Measured at 768: logo 128 + nav 297 + gaps 48 +
utility cluster 387 = 860, so the document scrolled to 845px and
"Help Wanted" wrapped onto two lines.

Hide the GitHub icon link below lg (the mobile sheet keeps its own
GitHub row) and narrow the desktop search to w-24 there, restoring
w-48 / focus-within:w-72 at lg. The results dropdown is anchored
right-0 with min-w-72 instead of stretching left-0 right-0, so it
stays 288px wide over the narrow input — the width it already had at
lg. After: 728px used at 768, no horizontal scroll; 1024 fits with
the icon and wide search back.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RdRwHvDupRLV8GuJpYKzEr

Author: themightychris

apps/web/src/components/AppHeader.tsx

@@ -189,7 +189,10 @@ const navLinkClass = ({ isActive }: { isActive: boolean }) =>
 
 function GitHubLink() {
   return (
-    <Button asChild variant="ghost" size="icon-sm">
+    // Desktop-only: between md and lg the header has no room for it (the
+    // utility cluster would push "Help Wanted" onto two lines); the mobile
+    // sheet carries its own GitHub row.
+    <Button asChild variant="ghost" size="icon-sm" className="hidden lg:inline-flex">
       <a
         href={GITHUB_URL}
         target="_blank"

apps/web/src/components/SearchBox.tsx

@@ -66,7 +66,7 @@ export function SearchBox({ inline = false }: SearchBoxProps) {
 
   return (
     <div
-      className={`relative ${inline ? 'w-full' : 'w-48 focus-within:w-72 transition-all duration-200'}`}
+      className={`relative ${inline ? 'w-full' : 'w-24 lg:w-48 lg:focus-within:w-72 transition-all duration-200'}`}
     >
       <Input
         ref={inputRef}
@@ -88,7 +88,7 @@ export function SearchBox({ inline = false }: SearchBoxProps) {
           id="search-results-dropdown"
           role="listbox"
           aria-label="Search results"
-          className="absolute top-full left-0 right-0 mt-1 bg-popover border border-border rounded-md shadow-lg z-50 py-1 max-h-[28rem] overflow-y-auto"
+          className="absolute top-full right-0 min-w-72 mt-1 bg-popover border border-border rounded-md shadow-lg z-50 py-1 max-h-[28rem] overflow-y-auto"
         >
           {loading && results.length === 0 && (
             <p className="px-3 py-2 text-sm text-muted-foreground">Searching…</p>