feat(web): mobile dashboard UX polish (#28127)

* feat(web): mobile dashboard UX polish

Bottom sheets for sidebar theme/language pickers on narrow viewports with
enter/exit animation and drag-to-close; inline header badges beside titles;
bottom padding on the route outlet for scroll clearance; profiles loading uses a
unicode braille spinner; align profile/cron card actions to the top; viewport-fit
cover and supporting layout tweaks across dashboard pages.

Co-authored-by: Cursor <cursoragent@cursor.com>

* Fix Nix web npm hash and mobile sheet accessibility.

Align fetchNpmDeps in nix/web.nix with web/package-lock.json for CI. Improve BottomPickSheet backdrop labeling, avoid aria-hidden on the dialog during exit animation, and wire theme/language sheets with listbox semantics and localized dismiss labels.

Co-authored-by: Cursor <cursoragent@cursor.com>

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Austin Pickett 2026-05-18 15:20:31 -04:00 committed by GitHub
parent 52e3bfc2f4
commit 6fa1701bd3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
24 changed files with 779 additions and 295 deletions

View file

@ -424,8 +424,8 @@ export default function App() {
<header
className={cn(
"lg:hidden fixed top-0 left-0 right-0 z-40 h-12",
"flex items-center gap-2 px-3",
"lg:hidden fixed top-0 left-0 right-0 z-40 min-h-14",
"flex items-center gap-2 px-4 py-2",
"border-b border-current/20",
"bg-background-base/90 backdrop-blur-sm",
)}
@ -469,7 +469,7 @@ export default function App() {
<PluginSlot name="header-banner" />
<div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden pt-12 lg:pt-0">
<div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden pt-14 lg:pt-0">
<div className="flex min-h-0 min-w-0 flex-1">
<aside
id="app-sidebar"
@ -575,7 +575,7 @@ export default function App() {
<div className="flex min-w-0 items-center gap-2">
<PluginSlot name="header-right" />
<ThemeSwitcher dropUp />
<LanguageSwitcher />
<LanguageSwitcher dropUp />
</div>
</div>
@ -588,8 +588,8 @@ export default function App() {
"relative z-2 flex min-w-0 min-h-0 flex-1 flex-col",
"px-3 sm:px-6",
isChatRoute
? "pb-3 pt-1 sm:pb-4 sm:pt-2 lg:pt-4"
: "pt-2 sm:pt-4 lg:pt-6 pb-4 sm:pb-8",
? "pb-0 pt-1 sm:pt-2 lg:pt-4"
: "pt-2 sm:pt-4 lg:pt-6",
isDocsRoute && "min-h-0 flex-1",
)}
>
@ -597,6 +597,8 @@ export default function App() {
<div
className={cn(
"w-full min-w-0",
!isChatRoute &&
"pb-[calc(2rem+env(safe-area-inset-bottom,0px))] lg:pb-8",
(isDocsRoute || isChatRoute) &&
"min-h-0 flex flex-1 flex-col",
)}