Merge pull request #87 from Twigpine/fix/header-fit

fix(header): the Launch button fits the desktop header in every wallet state

Author: kevincodex1

app/src/components/HeaderNav.tsx

@@ -95,15 +95,14 @@ function Rail({ children, className }: { children: React.ReactNode; className?:
 }
 
 /**
- * The header's way into search: the first tool in the rail, naming its shortcut beside the icon while the strip
- * rests at full width (xl and up). The home redesign gives search a proper field.
+ * The header's way into search: the first tool in the rail, its shortcut named in the tooltip (a ⌘K hint beside the
+ * icon pushed the Launch button out of the strip). The home redesign gives search a proper field.
  */
-function SearchTrigger({ onClick, compact = false }: { onClick: () => void; compact?: boolean }) {
+function SearchTrigger({ onClick }: { onClick: () => void }) {
   const shortcut = useShortcutLabel();
   return (
-    <button type="button" onClick={onClick} aria-label={`Search tokens and pages (${shortcut})`} title={`Search (${shortcut})`} className="inline-flex h-7.5 min-w-7.5 shrink-0 items-center justify-center gap-1.5 rounded-full px-[7px] text-body transition-colors hover:bg-line hover:text-ink motion-reduce:transition-none">
+    <button type="button" onClick={onClick} aria-label={`Search tokens and pages (${shortcut})`} title={`Search (${shortcut})`} className="inline-flex h-7.5 min-w-7.5 shrink-0 items-center justify-center rounded-full px-[7px] text-body transition-colors hover:bg-line hover:text-ink motion-reduce:transition-none">
       <Search size={16} aria-hidden />
-      {compact ? null : <kbd aria-hidden="true" className="hidden rounded-md border border-line bg-paper px-1.5 font-sans text-[10px] font-medium leading-4 text-muted xl:inline">{shortcut}</kbd>}
     </button>
   );
 }
@@ -152,10 +151,11 @@ function Desktop({ visible = false, pulse, isActive, quietCta, onSearch }: { vis
       <NavLinks isActive={isActive} compact={visible} />
 
       <div className="relative z-20 ml-auto flex items-center gap-2">
+        {/* icons only, resting or floating: the strip's room is fixed (the page column at rest, the 800px pill), and a
+            "Bridge" label or a ⌘K hint pushed the Launch button out of it */}
         <Rail>
-          <SearchTrigger onClick={onSearch} compact={visible} />
-          {/* the floating pill is 800px wide: the bridge gives up its label there */}
-          <BridgeButton compact={visible} />
+          <SearchTrigger onClick={onSearch} />
+          <BridgeButton compact />
           <NotificationSettings />
           <ThemeToggle />
         </Rail>

app/src/components/WalletMenu.module.css

@@ -16,6 +16,8 @@
 .trigger:hover, .trigger[data-popup-open] { border-color: var(--color-line-strong); background: var(--color-line); }
 .triggerMark { position: relative; display: flex; flex-shrink: 0; }
 .connectionDot { position: absolute; right: 0; bottom: 0; width: 7px; height: 7px; background: var(--color-up); border: 2px solid var(--color-card); border-radius: 50%; }
+/* the header chip on a network the site doesn't support: the corner the chain's mark would take, ringed like it */
+.networkWarn { position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; width: 18px; height: 18px; border: 2px solid var(--color-card); border-radius: 50%; background: var(--color-warm); color: var(--color-card); font: 700 9px/1 var(--font-sans); }
 .triggerAddress { font: 400 12px var(--font-code); font-variant-numeric: tabular-nums; }
 .triggerNetwork { padding-left: 8px; border-left: 1px solid var(--color-line-strong); font: 500 10px var(--font-sans); color: var(--color-muted); }
 .chevron { color: var(--color-muted); transition: transform 160ms; }

app/src/components/WalletMenu.tsx

@@ -9,6 +9,7 @@ import { CHAIN_LABELS, CHAIN_SHORT, chainKeyOf, explorerAddress, explorerName, s
 import { BRIDGE_CHAINS, isBridgeChainId } from "@/lib/bridge/types";
 import { VISIBLE_CHAINS } from "@/lib/launchpad/config";
 import WalletAvatar from "./WalletAvatar";
+import { ChainLogo } from "./launchpad/ChainLogo";
 import styles from "./WalletMenu.module.css";
 
 /** Official network marks (app/public/brand). A chain with a dark-mode variant lists both; the CSS swaps them by theme. */
@@ -30,6 +31,16 @@ function NetworkLogo({ chain }: { chain: ChainKey }) {
   );
 }
 
+/**
+ * The header chip's network, pinned to the avatar's corner like the chain on a token avatar, or a warm "!" on a
+ * network the site doesn't support. The chip's name for it pushed the Launch button out of the header, so only the
+ * mobile row spells it out.
+ */
+function NetworkBadge({ chain }: { chain: ChainKey | null }) {
+  if (!chain) return <span className={styles.networkWarn} aria-hidden>!</span>;
+  return <ChainLogo chain={chain} size={14} className="absolute -right-1 -bottom-1 ring-2 ring-card" />;
+}
+
 type WalletMenuProps = {
   address: string;
   chainId?: number;
@@ -100,11 +111,12 @@ function AccountMenu({ address, chainId, connectorName, block = false, switching
       <Popover.Trigger
         className={`${styles.trigger} ${block ? styles.block : ""}`}
         aria-label={`Wallet ${shortAddr(address)}, ${network}. Open account menu`}
+        title={block ? undefined : key || bridgeNetwork ? `On ${network}` : "Unsupported network. Open to switch"}
         data-unsupported={(!key && !bridgeNetwork) || undefined}
       >
-        <span className={styles.triggerMark}><WalletAvatar address={address} /><span className={styles.connectionDot} /></span>
+        <span className={styles.triggerMark}><WalletAvatar address={address} />{block ? <span className={styles.connectionDot} /> : <NetworkBadge chain={key ?? bridgeNetwork?.key ?? null} />}</span>
         <span className={styles.triggerAddress}>{shortAddr(address)}</span>
-        <span className={styles.triggerNetwork}>{key || bridgeNetwork ? network : "Switch"}</span>
+        {block ? <span className={styles.triggerNetwork}>{key || bridgeNetwork ? network : "Switch"}</span> : null}
         <ChevronDown size={13} className={styles.chevron} aria-hidden />
       </Popover.Trigger>
       <Popover.Portal>

app/src/components/bridge/BridgeDialog.module.css

@@ -35,7 +35,7 @@ export function useOpenBridge(): (() => void) | null {
   return useContext(BridgeContext);
 }
 
-/** `compact` drops the label (icon only) where the header has no room, as in the floating pill. */
+/** `compact` drops the label (icon only) where the header has no room: the whole desktop strip, resting or floating. */
 export function BridgeButton({ block = false, compact = false, onOpen }: { block?: boolean; compact?: boolean; onOpen?: () => void }) {
   const show = useContext(BridgeContext);
   return (

app/src/components/bridge/BridgeProvider.tsx

@@ -25,8 +25,8 @@ test("bridge uses bundled official asset marks rather than letter placeholders",
 
 test("bridge keeps one lazily loaded controller across desktop/mobile and dismissal", () => {
   assert.match(header, /<BridgeProvider>/);
-  // desktop: one button, icon-only while the header floats (the pill also carries search)
-  assert.match(header, /<BridgeButton compact=\{visible\} \/>/);
+  // desktop: one button, icon-only (its label pushed the Launch button out of the strip)
+  assert.match(header, /<BridgeButton compact \/>/);
   assert.match(header, /<BridgeButton block onOpen=\{\(\) => setOpen\(false\)\} \/>/);
   assert.match(provider, /dynamic\(\(\) => import\("\.\/BridgeDialog"\)/);
   assert.match(provider, /activated \? <BridgeDialog/);

app/src/components/bridge/bridge-ui.test.ts

@@ -17,6 +17,16 @@ test("mobile Launch closes its menu and route changes reset persistent header st
   assert.match(header, /quietCta=\{heroCtaOnScreen\}/, "the hero/header CTA handoff is preserved");
 });
 
+test("the desktop tools stay icons so the Launch button fits the strip", () => {
+  // the strip's room is fixed (the page column at rest, the 800px pill floating); a ⌘K hint or a "Bridge" label pushed
+  // the Launch button past it. The fit itself is checked in a browser (1024–2560px, every wallet state).
+  const desktop = header.slice(header.indexOf("function Desktop"), header.indexOf("function NavLinks"));
+  assert.match(desktop, /<SearchTrigger onClick=\{onSearch\} \/>/);
+  assert.match(desktop, /<BridgeButton compact \/>/);
+  assert.doesNotMatch(header, /<kbd\b/);
+  assert.match(navbar, /style=\{mobile \? undefined : \{ minWidth: 800 \}\}/);
+});
+
 test("Escape dismisses only an unconsumed menu event and returns focus to its toggle", () => {
   assert.match(navbar, /event\.key === "Escape" && !event\.defaultPrevented/);
   assert.match(navbar, /event\.preventDefault\(\);\s+onClose\(\)/);

app/src/components/header-nav.test.ts

@@ -75,6 +75,19 @@ test("network switcher uses official local logos with theme-correct Robinhood ma
   assert.match(css, /:global\(\.dark\) \.networkLogo \.darkLogo\s*\{\s*display: block/);
 });
 
+test("the header chip carries its network as an avatar badge; only the mobile row spells it out", () => {
+  // the network's name in the desktop chip pushed the Launch button out of the header (up to 49px in the floating pill)
+  const trigger = source.slice(source.indexOf("<Popover.Trigger"), source.indexOf("</Popover.Trigger>"));
+  assert.match(trigger, /\{block \? <span className=\{styles\.triggerNetwork\}>/);
+  assert.match(trigger, /block \? <span className=\{styles\.connectionDot\} \/> : <NetworkBadge chain=\{key \?\? bridgeNetwork\?\.key \?\? null\} \/>/);
+  assert.match(trigger, /title=\{block \? undefined : [^\n]*"Unsupported network\. Open to switch"\}/);
+  const badge = source.slice(source.indexOf("function NetworkBadge"), source.indexOf("type WalletMenuProps"));
+  assert.match(badge, /if \(!chain\) return <span className=\{styles\.networkWarn\} aria-hidden>!<\/span>/);
+  // the site's chain tile (Arc's white mark needs its dark tile), as on token avatars
+  assert.match(badge, /<ChainLogo chain=\{chain\} size=\{14\} className="absolute -right-1 -bottom-1 ring-2 ring-card" \/>/);
+  assert.match(css, /\.networkWarn\s*\{[^}]*position: absolute[^}]*background: var\(--color-warm\)/);
+});
+
 test("wallet shortcuts copy the full address and close the nested menu on navigation", () => {
   assert.match(source, /await navigator.clipboard.writeText\(address\)/);
   assert.match(source, /Address copied\./);