From d681a2694348696dd841612e45ed518e511e1af8 Mon Sep 17 00:00:00 2001
From: Max Barvian <max@barvian.me>
Date: Tue, 25 Aug 2026 16:00:38 -0700
Subject: [PATCH 01/11] fix: layout animation when closing banner

---
 app/components/AppShell.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/components/AppShell.tsx b/app/components/AppShell.tsx
index b88f1e7..7c260c9 100644
--- a/app/components/AppShell.tsx
+++ b/app/components/AppShell.tsx
@@ -312,6 +312,10 @@ function NavRow({ icon, label, href, active, enabled, hasChildren, onNavigate, l
       {active && (
         <motion.div
           layoutId={`nav-active-bg-${layoutScope}`}
+          // Only remasure when the highlighted row changes. Theme toggles,
+          // banner dismiss, and other sidebar rerenders shift this pill's
+          // page position; without a dependency Motion would slide it there.
+          layoutDependency={href}
           style={{
             position: 'absolute',
             inset: 0,

From 8e878dcb621dc9fa325783099145cbc7e8b79b05 Mon Sep 17 00:00:00 2001
From: Max Barvian <max@barvian.me>
Date: Tue, 25 Aug 2026 16:13:27 -0700
Subject: [PATCH 02/11] animate banner close

---
 app/components/AppShell.tsx | 64 +++++++++++++++++++++----------------
 1 file changed, 37 insertions(+), 27 deletions(-)

diff --git a/app/components/AppShell.tsx b/app/components/AppShell.tsx
index 7c260c9..0c7738c 100644
--- a/app/components/AppShell.tsx
+++ b/app/components/AppShell.tsx
@@ -3,7 +3,7 @@
 import { CSSProperties, MouseEvent as ReactMouseEvent, PropsWithChildren, useEffect, useRef, useState } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { AnimatePresence, motion } from 'motion/react';
+import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
 import { Toaster } from 'sonner';
 
 import { getActiveParent, NAV_ITEMS, NavChild, NavIcon } from '../navigation';
@@ -660,34 +660,44 @@ type GlobalBannerProps = {
 };
 
 function GlobalBanner({ dismissed, onDismiss, className }: GlobalBannerProps) {
-  if (dismissed) return null;
+  const reducedMotion = useReducedMotion();
+  const transition = reducedMotion ? { duration: 0 } : slideTransition;
+
   return (
-    <div
-      className={cn(
-        'relative items-center justify-center border-b border-bds-gray-10 bg-bds-gray-5 py-2 pl-4 pr-10 sm:px-10',
-        className,
+    <AnimatePresence initial={false}>
+      {!dismissed && (
+        <motion.div
+          key="global-banner"
+          className={cn(className, 'relative overflow-clip after:inset-x-0 after:absolute after:bottom-0 after:border-b after:border-bds-gray-10 bg-bds-gray-5')}
+          initial={false}
+          animate={{ height: 'auto', opacity: 1 }}
+          exit={{ height: 0, opacity: 0 }}
+          transition={transition}
+        >
+          <div className="relative flex w-full items-center justify-center border-b border-transparent py-2 pl-4 pr-10 sm:px-10">
+            <div className="mx-auto flex w-full max-w-6xl flex-col items-center justify-center min-[860px]:flex-row min-[860px]:gap-5">
+              <div className="flex min-w-0 flex-wrap items-center justify-center gap-x-2 gap-y-1 min-[860px]:flex-nowrap">
+                <Text as="span" variant="label.medium" className="whitespace-nowrap">New!</Text>
+                <Text as="span" variant="label.medium" className="whitespace-nowrap">EIP-8130: Accounts</Text>
+                <span className="inline-block h-3.5 w-px shrink-0 bg-bds-gray-20"></span>
+                <Link href="/vibenet/demos/account" className="group flex shrink-0 items-center gap-1 no-underline">
+                  <Text as="span" variant="label.medium" className="text-base-blue">Test on Vibenet</Text>
+                  <AnimatedArrowIcon size={14} strokeWidth={2} className="text-base-blue transition-transform duration-200 ease-out group-hover:translate-x-[3px]" />
+                </Link>
+              </div>
+            </div>
+            <button
+              type="button"
+              onClick={onDismiss}
+              className="absolute right-4 top-1/2 flex h-5 w-5 -translate-y-1/2 items-center justify-center text-bds-gray-40 transition-colors hover:text-foreground"
+              aria-label="Dismiss banner"
+            >
+              <CloseIcon size={10} />
+            </button>
+          </div>
+        </motion.div>
       )}
-    >
-      <div className="mx-auto flex w-full max-w-6xl flex-col items-center justify-center min-[860px]:flex-row min-[860px]:gap-5">
-        <div className="flex min-w-0 flex-wrap items-center justify-center gap-x-2 gap-y-1 min-[860px]:flex-nowrap">
-          <Text as="span" variant="label.medium" className="whitespace-nowrap">New!</Text>
-          <Text as="span" variant="label.medium" className="whitespace-nowrap">EIP-8130: Accounts</Text>
-          <span className="inline-block h-3.5 w-px shrink-0 bg-bds-gray-20"></span>
-          <Link href="/vibenet/demos/account" className="group flex shrink-0 items-center gap-1 no-underline">
-            <Text as="span" variant="label.medium" className="text-base-blue">Test on Vibenet</Text>
-            <AnimatedArrowIcon size={14} strokeWidth={2} className="text-base-blue transition-transform duration-200 ease-out group-hover:translate-x-[3px]" />
-          </Link>
-        </div>
-      </div>
-      <button
-        type="button"
-        onClick={onDismiss}
-        className="absolute right-4 top-1/2 flex h-5 w-5 -translate-y-1/2 items-center justify-center text-bds-gray-40 transition-colors hover:text-foreground"
-        aria-label="Dismiss banner"
-      >
-        <CloseIcon size={10} />
-      </button>
-    </div>
+    </AnimatePresence>
   );
 }
 

From a91d3d3c415135ecaccc0962cea749969f03f002 Mon Sep 17 00:00:00 2001
From: Max Barvian <max@barvian.me>
Date: Tue, 25 Aug 2026 16:19:43 -0700
Subject: [PATCH 03/11] navigation fixes

---
 app/components/AppShell.tsx | 73 +++++++++++-----------------
 app/navigation.test.ts      | 95 +++++++++++++++++++++++++++++++++++++
 app/navigation.ts           | 42 ++++++++++++----
 3 files changed, 158 insertions(+), 52 deletions(-)
 create mode 100644 app/navigation.test.ts

diff --git a/app/components/AppShell.tsx b/app/components/AppShell.tsx
index 0c7738c..274d24a 100644
--- a/app/components/AppShell.tsx
+++ b/app/components/AppShell.tsx
@@ -6,12 +6,11 @@ import { usePathname } from 'next/navigation';
 import { AnimatePresence, motion, useReducedMotion } from 'motion/react';
 import { Toaster } from 'sonner';
 
-import { getActiveParent, NAV_ITEMS, NavChild, NavIcon } from '../navigation';
+import { getActiveParent, isChildActive, isTopNavActive, navActiveParent, navHighlightPath, NAV_ITEMS, NavIcon, titleForPath } from '../navigation';
 import { BLUE, BORDER, BRAND_BLUE, DISABLED, INK, MUTED, SELECTED } from '../theme';
 import { getChangeBySlug } from '../upgrades/data/changes';
 import { demoLabel } from '../vibenet/demos/catalogue';
 import { getUpgradeById } from '../upgrades/data/upgrades';
-import { titleForPath } from '../navigation';
 
 import { trackNavClick } from '../analytics/events';
 import { navSlideDirection } from './nav-motion';
@@ -369,11 +368,6 @@ function opensInNewTab(event: ReactMouseEvent): boolean {
   return event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.button !== 0;
 }
 
-function isChildActive(child: NavChild, pathname: string): boolean {
-  if (child.exact) return pathname === child.href;
-  return pathname === child.href || pathname.startsWith(`${child.href}/`);
-}
-
 const slideVariants = {
   enter: (direction: number) => ({ x: direction > 0 ? '60%' : '-60%', opacity: 0 }),
   center: { x: 0, opacity: 1 },
@@ -427,8 +421,8 @@ function SidebarContent({ dark, onToggleTheme, onNavigate, hideBrand, layoutScop
   // sub-nav slide sitting still for the whole navigation — the tap felt dead, then
   // everything moved at once.
   const [pendingPath, setPendingPath] = useState<string | null>(null);
-  const activePath = pendingPath ?? pathname;
-  const activeParent = getActiveParent(activePath);
+  const activePath = navHighlightPath(pendingPath, pathname);
+  const activeParent = navActiveParent(pendingPath, pathname);
   const directionRef = useRef(1);
   const prevParentRef = useRef<string | null>(activeParent?.href ?? null);
   const scrollViewportRef = useRef<HTMLDivElement>(null);
@@ -451,7 +445,9 @@ function SidebarContent({ dark, onToggleTheme, onNavigate, hideBrand, layoutScop
   }, [pathname]);
 
   useEffect(() => {
-    if (!pendingPath) return;
+    // '/' is the back-header view: the route will not commit, so a timeout
+    // would snap the submenu back. Only time out real pending navigations.
+    if (!pendingPath || pendingPath === '/') return;
     const timer = setTimeout(() => setPendingPath(null), PENDING_PATH_TIMEOUT_MS);
     return () => clearTimeout(timer);
   }, [pendingPath]);
@@ -465,7 +461,9 @@ function SidebarContent({ dark, onToggleTheme, onNavigate, hideBrand, layoutScop
 
   const selectPath = (href: string) => {
     setPendingPath(href);
-    onNavigate?.();
+    // Keep the drawer open when the tap is the section root (Vibenet,
+    // Benchmark). getActiveParent already knows which hrefs have a submenu.
+    if (getActiveParent(href)?.href !== href) onNavigate?.();
   };
 
   const direction = directionRef.current;
@@ -499,7 +497,10 @@ function SidebarContent({ dark, onToggleTheme, onNavigate, hideBrand, layoutScop
                     style={{ ...styles.navLink, display: 'flex', alignItems: 'center', padding: '9px 6px 9px 2px', marginBottom: 4, color: 'var(--bds-gray-50)' }}
                     onClick={(event) => {
                       if (opensInNewTab(event)) return;
-                      selectPath('/');
+                      // Stay on the current page and keep the mobile drawer
+                      // open. href="/" remains for modified clicks (new tab).
+                      event.preventDefault();
+                      setPendingPath('/');
                     }}
                   >
                     <svg
@@ -553,31 +554,19 @@ function SidebarContent({ dark, onToggleTheme, onNavigate, hideBrand, layoutScop
                   style={styles.navPane}
                 >
                   <nav style={styles.nav}>
-                    {NAV_ITEMS.filter((item) => item.icon).map((item) => {
-                      let active: boolean;
-                      if (item.href === '/') {
-                        active = activePath === '/';
-                      } else {
-                        const isMatch = activePath === item.href || activePath.startsWith(`${item.href}/`);
-                        const hasMoreSpecific = NAV_ITEMS.some(
-                          (other) => other.href !== item.href && other.href.startsWith(item.href) && (activePath === other.href || activePath.startsWith(`${other.href}/`)),
-                        );
-                        active = isMatch && !hasMoreSpecific;
-                      }
-                      return (
-                        <NavRow
-                          key={item.href}
-                          icon={item.icon}
-                          label={item.label}
-                          href={item.href}
-                          active={active}
-                          enabled={item.enabled}
-                          hasChildren={!!item.children}
-                          onNavigate={() => selectPath(item.href)}
-                          layoutScope={layoutScope}
-                        />
-                      );
-                    })}
+                    {NAV_ITEMS.filter((item) => item.icon).map((item) => (
+                      <NavRow
+                        key={item.href}
+                        icon={item.icon}
+                        label={item.label}
+                        href={item.href}
+                        active={isTopNavActive(item, activePath)}
+                        enabled={item.enabled}
+                        hasChildren={!!item.children}
+                        onNavigate={() => selectPath(item.href)}
+                        layoutScope={layoutScope}
+                      />
+                    ))}
                   </nav>
                 </motion.div>
               )}
@@ -726,10 +715,6 @@ export function AppShell({ children }: PropsWithChildren) {
     }
   };
 
-  useEffect(() => {
-    setMenuOpen(false);
-  }, [pathname]);
-
   useEffect(() => {
     if (!menuOpen) return;
     const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setMenuOpen(false); };
@@ -750,7 +735,7 @@ export function AppShell({ children }: PropsWithChildren) {
       <GlobalBanner
         dismissed={bannerDismissed}
         onDismiss={() => setBannerDismissed(true)}
-        className="hidden md:flex"
+        className="hidden md:block"
       />
       <div style={styles.root}>
         {/* Desktop sidebar */}
@@ -762,7 +747,7 @@ export function AppShell({ children }: PropsWithChildren) {
         <header className="mobile-header">
           {/* Static on touch: the morph is hover-driven, so base.org leaves its
               mobile mark static too. */}
-          <Link href="/" aria-label="Base home" style={styles.brandLink}>
+          <Link href="/" aria-label="Base home" style={styles.brandLink} onClick={() => setMenuOpen(false)}>
             <BaseMark size={MOBILE_BRAND_MARK_SIZE} />
           </Link>
           <button
@@ -805,7 +790,7 @@ export function AppShell({ children }: PropsWithChildren) {
           <GlobalBanner
             dismissed={bannerDismissed}
             onDismiss={() => setBannerDismissed(true)}
-            className="flex md:hidden"
+            className="block md:hidden"
           />
           <header className="topbar-desktop" style={{ ...styles.topbar, position: 'relative', zIndex: 40 }}>
             <div id="topbar-actions-slot" className="absolute right-7 top-1/2 z-10 flex -translate-y-1/2 items-center gap-2" />
diff --git a/app/navigation.test.ts b/app/navigation.test.ts
new file mode 100644
index 0000000..1185fcd
--- /dev/null
+++ b/app/navigation.test.ts
@@ -0,0 +1,95 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  getActiveParent,
+  isChildActive,
+  isTopNavActive,
+  navActiveParent,
+  navHighlightPath,
+  pathMatches,
+  titleForPath,
+} from './navigation';
+
+describe('pathMatches', () => {
+  it('matches a prefix unless exact', () => {
+    expect(pathMatches('/vibenet', '/vibenet/faucet')).toBe(true);
+    expect(pathMatches('/vibenet', '/vibenet/faucet', true)).toBe(false);
+  });
+
+  it('treats / as exact', () => {
+    expect(pathMatches('/', '/')).toBe(true);
+    expect(pathMatches('/', '/vibenet')).toBe(false);
+  });
+});
+
+describe('getActiveParent', () => {
+  it('returns the section for a child path', () => {
+    expect(getActiveParent('/vibenet')?.href).toBe('/vibenet');
+    expect(getActiveParent('/vibenet/faucet')?.href).toBe('/vibenet');
+  });
+
+  it('returns null on the root list', () => {
+    expect(getActiveParent('/')).toBeNull();
+    expect(getActiveParent('/snapshots')).toBeNull();
+  });
+
+  it('is the section root only for the parent href itself', () => {
+    expect(getActiveParent('/vibenet')?.href === '/vibenet').toBe(true);
+    expect(getActiveParent('/vibenet/faucet')?.href === '/vibenet/faucet').toBe(false);
+  });
+});
+
+describe('isChildActive', () => {
+  it('honors exact child hrefs', () => {
+    expect(isChildActive({ label: 'Overview', href: '/vibenet', exact: true }, '/vibenet')).toBe(true);
+    expect(isChildActive({ label: 'Overview', href: '/vibenet', exact: true }, '/vibenet/faucet')).toBe(false);
+  });
+});
+
+describe('isTopNavActive', () => {
+  it('does not highlight Upgrades on the changelog path', () => {
+    expect(isTopNavActive({ label: 'Upgrades', href: '/upgrades', icon: 'upgrades', enabled: true }, '/upgrades/changelog')).toBe(false);
+    expect(isTopNavActive({ label: 'Changelog', href: '/upgrades/changelog', icon: 'changelog', enabled: true }, '/upgrades/changelog')).toBe(true);
+  });
+
+  it('highlights a section root while inside it', () => {
+    expect(isTopNavActive({ label: 'Vibenet', href: '/vibenet', icon: 'vibenet', enabled: true, children: [] }, '/vibenet/faucet')).toBe(true);
+  });
+
+  it('does not mark Home active while Vibenet is on screen', () => {
+    const home = { label: 'Home', href: '/', icon: 'home' as const, enabled: true };
+    const vibenet = { label: 'Vibenet', href: '/vibenet', icon: 'vibenet' as const, enabled: true, children: [] };
+    const path = navHighlightPath('/', '/vibenet');
+    expect(isTopNavActive(home, path)).toBe(false);
+    expect(isTopNavActive(vibenet, path)).toBe(true);
+  });
+});
+
+describe('navHighlightPath', () => {
+  it('keeps the real page highlighted after the back header', () => {
+    expect(navHighlightPath('/', '/vibenet')).toBe('/vibenet');
+  });
+
+  it('follows a real pending navigation', () => {
+    expect(navHighlightPath('/vibenet', '/')).toBe('/vibenet');
+    expect(navHighlightPath(null, '/snapshots')).toBe('/snapshots');
+  });
+});
+
+describe('navActiveParent', () => {
+  it('shows the root list after the back header', () => {
+    expect(navActiveParent('/', '/vibenet')).toBeNull();
+  });
+
+  it('shows the section pane for a section path', () => {
+    expect(navActiveParent('/vibenet', '/')).toEqual(getActiveParent('/vibenet'));
+    expect(navActiveParent(null, '/vibenet/faucet')).toEqual(getActiveParent('/vibenet/faucet'));
+  });
+});
+
+describe('titleForPath', () => {
+  it('uses the child label inside a section', () => {
+    expect(titleForPath('/vibenet/faucet')).toBe('Faucet');
+    expect(titleForPath('/vibenet')).toBe('Overview');
+  });
+});
diff --git a/app/navigation.ts b/app/navigation.ts
index 42987c5..9730402 100644
--- a/app/navigation.ts
+++ b/app/navigation.ts
@@ -58,21 +58,22 @@ export const NAV_ITEMS: NavItem[] = [
     : []),
 ];
 
+/** Prefix match unless `exact` or the href is `/`. */
+export function pathMatches(href: string, pathname: string, exact = false): boolean {
+  if (exact || href === '/') return pathname === href;
+  return pathname === href || pathname.startsWith(`${href}/`);
+}
+
 export function titleForPath(pathname: string): string {
   if (pathname === '/') return 'Home';
   for (const item of NAV_ITEMS) {
     if (item.children) {
       for (const child of item.children) {
-        if (child.exact && pathname === child.href) return child.label;
-        if (!child.exact && (pathname === child.href || pathname.startsWith(`${child.href}/`))) {
-          return child.label;
-        }
+        if (pathMatches(child.href, pathname, child.exact)) return child.label;
       }
     }
   }
-  const matches = NAV_ITEMS.filter(
-    (item) => item.href !== '/' && (pathname === item.href || pathname.startsWith(`${item.href}/`)),
-  );
+  const matches = NAV_ITEMS.filter((item) => pathMatches(item.href, pathname));
   if (matches.length === 0) return '';
   matches.sort((a, b) => b.href.length - a.href.length);
   return matches[0].label;
@@ -80,6 +81,31 @@ export function titleForPath(pathname: string): string {
 
 export function getActiveParent(pathname: string): NavItem | null {
   return NAV_ITEMS.find(
-    (item) => item.children && item.enabled && (pathname === item.href || pathname.startsWith(`${item.href}/`)),
+    (item) => item.children && item.enabled && pathMatches(item.href, pathname),
   ) ?? null;
 }
+
+/**
+ * Path for the active-row pill. `pendingPath === '/'` is the back-header
+ * pane only — the page has not moved, so highlight still follows `pathname`.
+ */
+export function navHighlightPath(pendingPath: string | null, pathname: string): string {
+  return pendingPath && pendingPath !== '/' ? pendingPath : pathname;
+}
+
+/** Which sliding pane to show. Back-header (`'/'`) forces the root list. */
+export function navActiveParent(pendingPath: string | null, pathname: string): NavItem | null {
+  if (pendingPath === '/') return null;
+  return getActiveParent(pendingPath ?? pathname);
+}
+
+export function isChildActive(child: NavChild, pathname: string): boolean {
+  return pathMatches(child.href, pathname, child.exact);
+}
+
+export function isTopNavActive(item: NavItem, pathname: string): boolean {
+  if (!pathMatches(item.href, pathname)) return false;
+  return !NAV_ITEMS.some(
+    (other) => other.href !== item.href && other.href.startsWith(item.href) && pathMatches(other.href, pathname),
+  );
+}

From 8f99d67a85cb654f361539b6c87b5ef04c102895 Mon Sep 17 00:00:00 2001
From: Max Barvian <max@barvian.me>
Date: Tue, 25 Aug 2026 16:37:25 -0700
Subject: [PATCH 04/11] smaller default buttons

---
 app/components/ui/Button.tsx | 4 ++--
 app/components/ui/Text.tsx   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/ui/Button.tsx b/app/components/ui/Button.tsx
index 5522037..5afca88 100644
--- a/app/components/ui/Button.tsx
+++ b/app/components/ui/Button.tsx
@@ -41,9 +41,9 @@ export function Button({
   if (size === 'sm') {
     sizeClasses = 'h-[34px] px-3 gap-1 pb-px';
   } else if (arrow) {
-    sizeClasses = 'h-12 pl-5 pr-4 gap-1';
+    sizeClasses = 'h-10 pl-4 pr-3 gap-1';
   } else {
-    sizeClasses = 'h-12 pl-5 pr-5 gap-3';
+    sizeClasses = 'h-10 px-4 gap-2';
   }
 
   const classes = cn(
diff --git a/app/components/ui/Text.tsx b/app/components/ui/Text.tsx
index 2b5b74e..4008135 100644
--- a/app/components/ui/Text.tsx
+++ b/app/components/ui/Text.tsx
@@ -54,7 +54,7 @@ export const textVariantClasses: Record<TextVariant, string> = {
     'text-[13px] md:text-[14px] leading-[18px] md:leading-[20px] font-mono font-[400] tracking-[0px]',
   caption:
     'text-[11px] md:text-[12px] leading-[14px] md:leading-[16px] font-[500] tracking-[0px] uppercase',
-  button: 'text-[15px] md:text-[16px] leading-[140%] font-base font-[400] tracking-[-0.01em]',
+  button: 'text-[14px] md:text-[15px] leading-[20px] font-base font-[400] tracking-[-0.01em]',
   footnote: 'text-[11px] md:text-[12px] leading-[14px] md:leading-[16px] font-[400] tracking-[0px]',
 };
 

From 916ccd7d2a5fdc2e9dbbd2181fde706b86c4cf6f Mon Sep 17 00:00:00 2001
From: Max Barvian <max@barvian.me>
Date: Tue, 25 Aug 2026 17:01:17 -0700
Subject: [PATCH 05/11] limit large input fonts to ios

---
 app/globals.css | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 98138e2..ee8b182 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -821,10 +821,12 @@ button {
      button) off-screen. Force >=16px on mobile so focusing a field never zooms.
      !important is needed to beat per-input Tailwind text-[13px]/[14px] utilities;
      the smaller visual sizing is preserved on >=768px. */
-  input,
-  textarea,
-  select {
-    font-size: 16px !important;
+@supports (-webkit-touch-callout: none) {
+    input,
+    textarea,
+    select {
+      font-size: 16px !important;
+    }
   }
 }
 

From d6778670a25282ccf48fc9b4e896d3e44bce4589 Mon Sep 17 00:00:00 2001
From: Max Barvian <max@barvian.me>
Date: Tue, 25 Aug 2026 17:01:56 -0700
Subject: [PATCH 06/11] match token address button + input

---
 app/vibenet/demos/b20/components/PolicyModule.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/vibenet/demos/b20/components/PolicyModule.tsx b/app/vibenet/demos/b20/components/PolicyModule.tsx
index 31d0cc2..0898d92 100644
--- a/app/vibenet/demos/b20/components/PolicyModule.tsx
+++ b/app/vibenet/demos/b20/components/PolicyModule.tsx
@@ -136,7 +136,7 @@ export function PolicyModule({
                 onChange={(e) => setAddress(e.target.value)}
                 placeholder="Paste a token address"
               />
-              <Button size="sm" variant="outline" onClick={() => onInspect()} disabled={busy === 'inspect'}>
+              <Button variant="outline" onClick={() => onInspect()} disabled={busy === 'inspect'}>
                 {busy === 'inspect' ? 'Checking…' : 'Explore'}
               </Button>
             </div>

From 159e7ae8452c0a58127f669ee2ff2a020bf2c861 Mon Sep 17 00:00:00 2001
From: Max Barvian <max@barvian.me>
Date: Tue, 25 Aug 2026 17:04:14 -0700
Subject: [PATCH 07/11] 14px default button font

---
 app/components/ui/Text.tsx                        | 2 +-
 app/vibenet/demos/b20/components/DeployModule.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/ui/Text.tsx b/app/components/ui/Text.tsx
index 4008135..984e767 100644
--- a/app/components/ui/Text.tsx
+++ b/app/components/ui/Text.tsx
@@ -54,7 +54,7 @@ export const textVariantClasses: Record<TextVariant, string> = {
     'text-[13px] md:text-[14px] leading-[18px] md:leading-[20px] font-mono font-[400] tracking-[0px]',
   caption:
     'text-[11px] md:text-[12px] leading-[14px] md:leading-[16px] font-[500] tracking-[0px] uppercase',
-  button: 'text-[14px] md:text-[15px] leading-[20px] font-base font-[400] tracking-[-0.01em]',
+  button: 'text-[14px] leading-[20px] font-base font-[400] tracking-[-0.01em]',
   footnote: 'text-[11px] md:text-[12px] leading-[14px] md:leading-[16px] font-[400] tracking-[0px]',
 };
 
diff --git a/app/vibenet/demos/b20/components/DeployModule.tsx b/app/vibenet/demos/b20/components/DeployModule.tsx
index 0463b47..3161eee 100644
--- a/app/vibenet/demos/b20/components/DeployModule.tsx
+++ b/app/vibenet/demos/b20/components/DeployModule.tsx
@@ -452,7 +452,7 @@ export function DeployModule({
                   placeholder="Paste an existing Policy ID"
                   inputMode="numeric"
                 />
-                <Button size="sm" variant="outline" disabled={resolvingPolicy} onClick={() => void addExternalPolicy()}>
+                <Button variant="outline" disabled={resolvingPolicy} onClick={() => void addExternalPolicy()}>
                   {resolvingPolicy ? 'Resolving…' : 'Resolve and add'}
                 </Button>
               </div>

From 0c05a442e843b9da35d45dbbec3a83ece9df1fb9 Mon Sep 17 00:00:00 2001
From: Max Barvian <max@barvian.me>
Date: Tue, 25 Aug 2026 17:06:59 -0700
Subject: [PATCH 08/11] fix upgrades responsiveness

---
 app/upgrades/UpgradesClient.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/upgrades/UpgradesClient.tsx b/app/upgrades/UpgradesClient.tsx
index bc53b8a..8a7bc46 100644
--- a/app/upgrades/UpgradesClient.tsx
+++ b/app/upgrades/UpgradesClient.tsx
@@ -262,7 +262,7 @@ function UpgradeView({ nowMs }: { nowMs: number }) {
                 {upgrade.summary}
               </Text>
               <div className="mt-auto pt-4" />
-              <div className="flex flex-col gap-3 border-t border-bds-gray-10 pt-4 sm:flex-row sm:items-end sm:justify-between">
+              <div className="flex flex-wrap items-end justify-between gap-3 border-t border-bds-gray-10 pt-4">
                 <div className="flex gap-10">
                   <div className="flex flex-col gap-0.5">
                     <Text variant="footnote" tone="muted" className="text-[9px] tracking-normal">Sepolia</Text>

From ce4a20a32c33a1b79bff9d758ff6732ef3a22c60 Mon Sep 17 00:00:00 2001
From: Max Barvian <max@barvian.me>
Date: Tue, 25 Aug 2026 17:09:49 -0700
Subject: [PATCH 09/11] copyablevalue spending acct

---
 app/vibenet/demos/account/AccountDemo.tsx         |  2 --
 app/vibenet/demos/account/components/AppsView.tsx | 15 ++-------------
 2 files changed, 2 insertions(+), 15 deletions(-)

diff --git a/app/vibenet/demos/account/AccountDemo.tsx b/app/vibenet/demos/account/AccountDemo.tsx
index 9b40653..3781b57 100644
--- a/app/vibenet/demos/account/AccountDemo.tsx
+++ b/app/vibenet/demos/account/AccountDemo.tsx
@@ -847,8 +847,6 @@ export function AccountDemo() {
             appBusy={appBusy}
             activeSigner={activeSigner}
             signers={signers}
-            copied={copied}
-            copy={copy}
             sessionKeyFor={sessionKeyFor}
             subAccountFor={subAccountFor}
             connectSessionApp={connectSessionApp}
diff --git a/app/vibenet/demos/account/components/AppsView.tsx b/app/vibenet/demos/account/components/AppsView.tsx
index d433b22..7d5ad3a 100644
--- a/app/vibenet/demos/account/components/AppsView.tsx
+++ b/app/vibenet/demos/account/components/AppsView.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { Button } from '../../../../components/ui/Button';
+import { CopyableValue } from '../../../components/CopyableValue';
 import type { DemoApp } from '../library/apps';
 import { formatExpiry, type AppSessionKey, type AppSubAccount, type StoredAccount } from '../library/model';
 import { short, type WalletSigner } from '../shared';
@@ -35,8 +36,6 @@ type AppCardProps = {
   appBusy: string | null;
   activeSigner: WalletSigner | null;
   signers: WalletSigner[];
-  copied: string | null;
-  copy: (text: string, k: string) => void;
   sessionKeyFor: (name: string) => AppSessionKey | undefined;
   subAccountFor: (name: string) => AppSubAccount | undefined;
   connectSessionApp: (app: DemoApp) => void;
@@ -112,17 +111,7 @@ export function AppCard(p: AppCardProps) {
       connected = true;
       footer = (
         <>
-          <button
-            type="button"
-            onClick={() => p.copy(sub.address, 'vault')}
-            title="Copy account address"
-            className="flex min-w-0 items-center gap-2 text-left"
-          >
-            <span className="font-sans text-[13px] text-base-blue">{short(sub.address)}</span>
-            <span className="text-[11px] tracking-[0.4px] text-bds-gray-50">
-              {p.copied === 'vault' ? 'copied!' : 'tap to copy'}
-            </span>
-          </button>
+          <CopyableValue value={sub.address} display={short(sub.address)} className="min-w-0" />
           <Button
             variant="secondary"
             size="sm"

From da490286bc043d02a3ea6bbf612be3da6b6d3214 Mon Sep 17 00:00:00 2001
From: Max Barvian <max@barvian.me>
Date: Tue, 25 Aug 2026 17:26:49 -0700
Subject: [PATCH 10/11] fix activity drawer-caused overflow

---
 app/components/AppShell.tsx                   |  6 ++---
 app/globals.css                               | 22 ++++++++++---------
 .../demos/_components/AccountDemoShell.tsx    |  5 ++++-
 app/vibenet/demos/_shared/ActivityDrawer.tsx  |  4 ++--
 app/vibenet/demos/account/AccountDemo.tsx     |  2 +-
 app/vibenet/demos/account/loading.tsx         |  2 +-
 app/vibenet/layout.tsx                        |  4 ++--
 7 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/app/components/AppShell.tsx b/app/components/AppShell.tsx
index 274d24a..1cb9424 100644
--- a/app/components/AppShell.tsx
+++ b/app/components/AppShell.tsx
@@ -180,8 +180,8 @@ const styles: Record<string, CSSProperties> = {
     padding: '0 28px',
   },
   topbarTitle: { fontSize: 16, fontWeight: 500 },
-  content: { flex: 1, overflowY: 'auto', display: 'flex', flexDirection: 'column' as const },
-  contentInner: { width: '100%', maxWidth: 1280, margin: '0 auto', padding: '24px 28px 80px', flex: 1, display: 'flex', flexDirection: 'column' as const },
+  content: { flex: 1, overflowY: 'auto', overflowX: 'hidden', display: 'flex', flexDirection: 'column' as const, minWidth: 0 },
+  contentInner: { width: '100%', maxWidth: 1280, margin: '0 auto', padding: '24px 28px 80px', flex: 1, display: 'flex', flexDirection: 'column' as const, minWidth: 0 },
 };
 
 function NavGlyph({ name }: NavGlyphProps) {
@@ -843,7 +843,7 @@ export function AppShell({ children }: PropsWithChildren) {
               return <Text as="span" variant="headline">{title}</Text>;
             })()}
           </header>
-          <main style={styles.content}>
+          <main className="content-scroll" style={styles.content}>
             <div style={styles.contentInner}>{children}</div>
           </main>
         </div>
diff --git a/app/globals.css b/app/globals.css
index ee8b182..de41cc0 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -811,11 +811,6 @@ button {
     padding-top: 56px;
   }
 
-  .activity-full-width {
-    width: 100vw;
-    margin-left: calc(-1 * (100vw - 100%) / 2);
-  }
-
   /* iOS Safari auto-zooms the page when a focused input's font-size is < 16px,
      which shrinks the visual viewport and pushes fixed modals (and their close
      button) off-screen. Force >=16px on mobile so focusing a field never zooms.
@@ -830,9 +825,16 @@ button {
   }
 }
 
-@media (min-width: 768px) {
-  .activity-full-width {
-    width: calc(100vw - 248px);
-    margin-left: calc(-1 * (100vw - 248px - 100%) / 2);
-  }
+/* Activity drawer: span the content scrollport without 100vw. 100vw includes
+   the scrollbar and is wider than the nested max-w-5xl column, so it created
+   a horizontal scrollbar. `cqw` is the .content-scroll column's client width. */
+.content-scroll {
+  container-type: inline-size;
+  container-name: content-scroll;
+}
+
+.activity-full-width {
+  width: auto;
+  margin-left: calc(50% - 50cqw);
+  margin-right: calc(50% - 50cqw);
 }
diff --git a/app/vibenet/demos/_components/AccountDemoShell.tsx b/app/vibenet/demos/_components/AccountDemoShell.tsx
index 6a43983..00eb206 100644
--- a/app/vibenet/demos/_components/AccountDemoShell.tsx
+++ b/app/vibenet/demos/_components/AccountDemoShell.tsx
@@ -69,7 +69,10 @@ export function AccountDemoShell({
 
   return (
     <>
-      <div className={cn('relative -mb-20 flex min-h-[calc(100vh-116px)] flex-1 flex-col text-foreground', className)}>
+      {/* flex-1 fills the content column so the activity drawer can sit at the
+          bottom on short pages (`mt-auto`). A 100vh min-height overshot the
+          padded scrollport and left extra scroll below the drawer. */}
+      <div className={cn('relative -mb-20 flex min-w-0 flex-1 flex-col text-foreground', className)}>
         {/* Desktop: the switcher lives in the app top bar. Hidden until an account
             exists so the gate reads as a clean full-page empty state. */}
         {hasAccounts && topbarSlot ? createPortal(switcher, topbarSlot) : null}
diff --git a/app/vibenet/demos/_shared/ActivityDrawer.tsx b/app/vibenet/demos/_shared/ActivityDrawer.tsx
index 2f86e25..fe79bfd 100644
--- a/app/vibenet/demos/_shared/ActivityDrawer.tsx
+++ b/app/vibenet/demos/_shared/ActivityDrawer.tsx
@@ -34,7 +34,7 @@ export function ActivityDrawer({
     // `mt-auto` drops the bar to the bottom of the (full-height) flex column so
     // it rests at the viewport bottom on short pages; `sticky bottom-0` pins it
     // once content is tall enough to scroll.
-    <div className="activity-full-width sticky bottom-0 z-10 mt-auto">
+    <div className="activity-full-width sticky bottom-0 z-10 mt-auto min-w-0">
       <div className="border-t border-bds-gray-10 bg-background shadow-[0_-4px_12px_rgba(0,0,0,0.05)] dark:border-white/10 dark:bg-[rgb(30,30,30)]">
         <button
           type="button"
@@ -82,7 +82,7 @@ export function ActivityDrawer({
               transition={{ duration: 0.25, ease: [0.23, 1, 0.32, 1] }}
               className="overflow-hidden"
             >
-              <div className="max-h-[280px] overflow-y-auto px-5 pb-5">
+              <div className="max-h-[280px] overflow-x-hidden overflow-y-auto px-5 pb-5">
                 {count > 0 ? (
                   children
                 ) : (
diff --git a/app/vibenet/demos/account/AccountDemo.tsx b/app/vibenet/demos/account/AccountDemo.tsx
index 3781b57..61e90ae 100644
--- a/app/vibenet/demos/account/AccountDemo.tsx
+++ b/app/vibenet/demos/account/AccountDemo.tsx
@@ -701,7 +701,7 @@ export function AccountDemo() {
       activity={<ActivityLog activity={activity} accounts={accounts} />}
       activityCount={activity.length}
       activityEmptyMessage="No activity yet. Transactions and account changes will appear here."
-      className="gap-10 pb-4"
+      className="gap-10"
     >
           {FEATURES.map((feature) => (
             <FeatureCard key={feature.id} feature={feature} />
diff --git a/app/vibenet/demos/account/loading.tsx b/app/vibenet/demos/account/loading.tsx
index 1ad3fe6..c277f3f 100644
--- a/app/vibenet/demos/account/loading.tsx
+++ b/app/vibenet/demos/account/loading.tsx
@@ -2,7 +2,7 @@ import { Skeleton } from '../../../components/ui/Skeleton';
 
 export default function Loading() {
   return (
-    <div className="-mb-20 flex min-h-[calc(100vh-116px)] flex-col gap-10 pb-4">
+    <div className="-mb-20 flex min-w-0 flex-1 flex-col gap-10">
       <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
         {/* Left column */}
         <div className="flex flex-col gap-6">
diff --git a/app/vibenet/layout.tsx b/app/vibenet/layout.tsx
index acbe5fd..c2f12ac 100644
--- a/app/vibenet/layout.tsx
+++ b/app/vibenet/layout.tsx
@@ -18,9 +18,9 @@ type VibenetLayoutProps = {
 
 export default function VibenetLayout({ children }: VibenetLayoutProps) {
   return (
-    <div className="flex w-full flex-1 flex-col">
+    <div className="flex w-full min-w-0 flex-1 flex-col">
       <MaintenanceBanner />
-      <div className="mx-auto flex w-full max-w-5xl flex-1 flex-col">
+      <div className="mx-auto flex w-full min-w-0 max-w-5xl flex-1 flex-col">
         {children}
       </div>
     </div>

From 43a8aa29884fdb903e45c4e1c3a2a4008e0ab1ac Mon Sep 17 00:00:00 2001
From: Max Barvian <max@barvian.me>
Date: Tue, 25 Aug 2026 17:28:55 -0700
Subject: [PATCH 11/11] overscroll contain on activity drawer

---
 app/vibenet/demos/_shared/ActivityDrawer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/vibenet/demos/_shared/ActivityDrawer.tsx b/app/vibenet/demos/_shared/ActivityDrawer.tsx
index fe79bfd..e8681d6 100644
--- a/app/vibenet/demos/_shared/ActivityDrawer.tsx
+++ b/app/vibenet/demos/_shared/ActivityDrawer.tsx
@@ -82,7 +82,7 @@ export function ActivityDrawer({
               transition={{ duration: 0.25, ease: [0.23, 1, 0.32, 1] }}
               className="overflow-hidden"
             >
-              <div className="max-h-[280px] overflow-x-hidden overflow-y-auto px-5 pb-5">
+              <div className="max-h-[280px] overflow-x-hidden overflow-y-auto overscroll-contain px-5 pb-5">
                 {count > 0 ? (
                   children
                 ) : (