feat(sidebar): add fullScreenOnMobile prop

[mattrothenberg]

Summary

On mobile the sidebar sheet leaves a sliver of the page visible. That sliver exists to show which page you're on — but the header breadcrumbs already carry that, and the leftover width squeezes nav items into small touch targets.

fullScreenOnMobile expands the sheet to the full viewport instead:

<Sidebar.Provider mobileBreakpoint={9999}>
  <Sidebar fullScreenOnMobile>
    <Sidebar.Content>...</Sidebar.Content>
  </Sidebar>
</Sidebar.Provider>

• Sheet goes w-full instead of w-(--sidebar-width)
• Backdrop suppressed — nothing shows behind a full-width sheet
• Right border dropped — no adjacent content to divide
• Existing slide-in, focus management, inert/aria-hidden, and Escape-to-close are untouched
• Defaults to false, so existing consumers are unaffected

Also included

Breadcrumbs.Link had min-w-0 + truncate, so flexbox distributed shrinkage across every crumb — a narrow trail rendered as Com… › Anal… › Acco…. Ancestors are now shrink-0; only Breadcrumbs.Current gives up width. This matters here because the full-screen nav leans on breadcrumbs to carry the route.

Demo

New "Full-screen mobile" example on the sidebar docs page, with a viewport slider (280–720px). Nav mirrors the real product IA (Observe / Build / Secure), with quick search and an avatar account switcher. The trail is derived from the nav tree, so it can't drift out of sync with the sidebar.

Not addressed

• Account selector zoom/jank on focus — reported alongside this feedback. I couldn't reproduce it from the code: the viewport meta is correct and the trigger is a <button>, not an input. Still open.
• Swipe-to-dismiss — the sheet can currently only be closed via the trigger, which is the least iOS-like part of this. Worth a follow-up.
• Responsive breadcrumb overflow is intentionally out of scope; see feat(breadcrumbs): add items-based API with overflow support #389.

Checklist

• Tests included/updated
• Visually reviewed (author has only verified it compiles and renders — needs eyes on the preview deploy)

🤖 Generated with Claude Code

[pkg-pr-new]

npm i https://pkg.pr.new/@cloudflare/kumo@642

commit: 73c3e34

[github-actions]

Docs Preview

View docs preview

Commit: 3cbcdf1

[github-actions]

Visual Regression Report — 27 changed, 15 unchanged

27 screenshot(s) with visual changes:

Button / Icon Only

112 px (0.13%) changed

Before	After	Diff

Button / Loading State

26 px (0.03%) changed

Before	After	Diff

Dialog / Dialog Basic

404 px (0.46%) changed

Before	After	Diff

Dialog / Dialog Sizes

2,864 px (3.23%) changed

Before	After	Diff

Dialog / Dialog Alert

1,984 px (2.24%) changed

Before	After	Diff

Dialog / Dialog Confirmation

855 px (0.97%) changed

Before	After	Diff

Dialog / Custom Max Width

875 px (0.99%) changed

Before	After	Diff

Dialog / Dialog With Select

386 px (0.44%) changed

Before	After	Diff

Dialog / Dialog With Combobox

493 px (0.56%) changed

Before	After	Diff

Dialog / Dialog With Dropdown

482 px (0.54%) changed

Before	After	Diff

Dialog (Open)

0 px (0%) changed

Before	After	Diff

Select / Select Basic

1,048 px (1.18%) changed

Before	After	Diff

Select / Select Sizes

3,228 px (1.99%) changed

Before	After	Diff

Select / Select Without Label

91 px (0.1%) changed

Before	After	Diff

Select / Select With Description

2,099 px (2.02%) changed

Before	After	Diff

Select / Select With Error

1,730 px (1.66%) changed

Before	After	Diff

Select / Select Placeholder

237 px (0.27%) changed

Before	After	Diff

Select / Select With Tooltip

196 px (0.22%) changed

Before	After	Diff

Select / Select Loading

3,046 px (1.73%) changed

Before	After	Diff

Select / Select Multiple

1,563 px (1.76%) changed

Before	After	Diff

Select / Select Complex

1,279 px (1.23%) changed

Before	After	Diff

Select / Select Disabled Options

1,541 px (1.74%) changed

Before	After	Diff

Select / Select Disabled Items

841 px (0.95%) changed

Before	After	Diff

Select / Select Grouped

971 px (1.1%) changed

Before	After	Diff

Select / Select Grouped With Disabled

1,354 px (1.53%) changed

Before	After	Diff

Select / Select Long List

1,967 px (1.89%) changed

Before	After	Diff

Select (Open)

0 px (0%) changed

Before	After	Diff

15 screenshot(s) unchanged

• Button / Basic
• Button / Variant: Primary
• Button / Variant: Secondary
• Button / Variant: Ghost
• Button / Variant: Destructive
• Button / Variant: Outline
• Button / Variant: Secondary Destructive
• Button / Sizes
• Button / With Icon
• Button / Disabled State
• Button / Title
• Button / Link as Button
• Button / Disabled Link
• Dialog / Dialog With Actions
• Select / Select Custom Rendering

---

Generated by Kumo Visual Regression