Detail page

The page you land on from a list row. It's built from Breadcrumb, Badge, Button, Dropdown Menu, Table and Sheet. Open a deploy to see its details.

How it works

• The breadcrumb ends in the current page as BreadcrumbPage (not a link). For a router link, pass render={<Link href="…" />} to BreadcrumbLink.
• The header has the name, its status as a Badge with a word, one primary action, and every other action in a menu behind an icon button with an aria-label naming the record.
• Key fields are a <dl>, four across on wide screens and two on narrow ones. Values that are identifiers (region, URL) are mono.
• A related row opens a Sheet, not a new page, so the user keeps their place in the list. The row's title is a real <button>, so it works from the keyboard; a click handler on the TableRow alone wouldn't.
• The Sheet is controlled and keeps the last selected deploy after closing, so it doesn't empty during its exit animation.

Guidelines

• One brand action in the header: the thing people come here to do (Deploy). Destructive actions go last in the menu.
• Four to six key fields. Everything else belongs in a tab or in Settings.
• Use a Sheet for a quick look at a related item; give it its own page when it has its own actions and related lists.
• Status always as a word in a Badge, never color alone.