Foundations

Layout

The workspace fills the browser, with the sidebar against the left edge and the main column taking all remaining width. The sidebar appears in desktop browsers at pc; narrower desktop windows use compact navigation. Mobile browsers retain their own navigation at every width.

Breakpoints

Content adapts to width, while navigation also respects browser device identity.

The desktop workspace

The workspace has no maximum width or outer gutters. --container-rail (16rem) sets the expanded sidebar width. A toggle beside the wordmark collapses it to a 5rem icon rail, with an expand action at the top. Width transitions smoothly while labels fade, with fixed icon tracks and row heights keeping navigation icons and the profile avatar in place at their original sizes. These transitions respect reduced motion. Navigation labels remain accessible to screen readers and appear as hover tooltips. Navigation hover surfaces and footer controls stay inside 1.25rem side gutters in both states. The main column flexes to fill the remaining viewport, with 1.5rem of internal side padding. Individual reading surfaces, such as chat messages, can still limit their own line length.

The sidebar uses canvas, separated by a divider from the main column's canvas-raised. The main column scopes its canvas token to that raised ground so sticky headers and chat fades use the same background. The full-width shell owns scrolling and the sidebar stays pinned alongside long pages.

Agent (MyList AI in Chinese) leads the sidebar with the animated AI character. It opens the existing agent home and stays active inside conversations. The character respects the reader's reduced-motion preference.

The profile entry sits at the bottom of the sidebar with a circular avatar and More as a trailing three-dot button, without a divider above it. The collapsed rail moves More above the avatar as a separate icon action, keeping the avatar pinned at the bottom. More includes Feedback, which opens its dialog after dismissing the menu. Signed-out visitors see Sign in beside the same menu, retaining its leading icon when collapsed. Navigation scrolls independently in short windows so the account controls remain reachable. For signed-in members, Upgrade sits directly above the profile in a dashed card with its icon above the title. The card fades out and becomes inert when the sidebar collapses, and is absent when signed out. One divider separates Library from the Data and Inbox entries, in that order. Data opens /trend, the mobile Data screen's web counterpart: all published lists or one list, all-time or 7/30/90-day charts, sources, and lifetime totals. Its header uses the same full-width opaque treatment as the shelf headers.

Lists and Library share an opaque sticky header with a bottom divider spanning the main column. Desktop filter and page title headers are 60px tall. On Lists the filter header sits above both the shelf and the stats rail. Chat uses the same 60px opaque desktop header and full-width bottom divider, with History and New chat aligned left beside the editable conversation title. Its loading header shares those dimensions, while messages keep their reading width. Usage and Settings use a sticky header with the same full-width divider and 60px desktop height. Their back action and title align left; Settings keeps its 42rem reading width on the rows below the header. Inspiration adds desktop columns as space grows, using a 150px minimum card width and 20px gaps; mobile browsers retain the five-column ceiling.

Surfaces with their own chrome

Not everything uses the workspace. nav-config.ts keeps the path predicates: which screens carry the tab bar, which get the side menu, and which are full-bleed surfaces that bring their own chrome — the marketing home, login, the help centre, and these docs. Public lists use the workspace unless opened in the mobile immersive view or a native webview. A public reference page rendered inside the app menu reads as a logged-in screen, so documentation stays outside the workspace.

Safe area

The safe-area utility pads a fixed bottom surface by env(safe-area-inset-bottom) — the mobile tab bar is its customer. Scrollbars are hidden app-wide, so any horizontally wide block must scroll inside its own overflow-x-auto container rather than letting the page grow sideways.