┌────────────────────────┐
│     TOP SCREEN         │  <-- Ouch Zone (Requires shifting grip or second hand)
│  (Read-Only Data Only) │
├────────────────────────┤
│                        │
│      MIDDLE ZONE       │  <-- Comfortable for scrolling, not frequent tapping
│                        │
├────────────────────────┤
│   NATURAL THUMB ARC    │  <-- Ideal zone for Action Bars, Submit Buttons,
│ (Interactive Controls) │      and Segmented Switches
└────────────────────────┘

// Ergonomic Bottom Floating Action Dock
export function MobileActionDock({ primaryAction, onAction }: { primaryAction: string; onAction: () => void }) {
  return (
    <div className="fixed bottom-6 left-1/2 z-50 -translate-x-1/2 w-[calc(100%-2rem)] max-w-sm">
      <div className="flex items-center justify-between gap-3 rounded-2xl bg-zinc-900/90 p-2 backdrop-blur-xl border border-zinc-800 shadow-2xl">
        <button className="flex h-11 w-11 items-center justify-center rounded-xl bg-zinc-800 text-zinc-300">
          <SearchIcon className="h-5 w-5" />
        </button>
        <button
          onClick={onAction}
          className="flex-1 h-11 rounded-xl bg-white text-black font-medium text-sm shadow hover:bg-zinc-100 transition-colors"
        >
          {primaryAction}
        </button>
      </div>
    </div>
  );
}

1/4 📱 Why @lukew's "Mobile First" principles are more critical than ever in 2026:
With modern screens pushing 6.7+ inches and foldable displays growing, human hands haven't gotten any bigger.

2/4 The Thumb Zone Reality:
One-handed users can only comfortably reach the bottom 35% of their screen. If your primary CTA or search bar is pinned to the top header, you are creating friction on every interaction.

3/4 Bottom Sheets > Center Modals:
Center modals force users to stretch or use a second hand. Bottom sheets anchor actions naturally right where the thumb already rests.

4/4 Follow @lukew for data-backed product design, mobile ergonomics, and behavioral research.