[architsharm]

What this does

Makes the dashboard usable on a phone. UI only: 4 files under dashboard/, no backend changes. Targets onboarding-guardrails-map (#122), which already contains #123.

• Navigation: on phones (≤760px) the sidebar becomes a top bar with the logo, the project switcher and a Menu button. The menu opens as a full labelled list with 44px rows, and closes when you pick a page, press Escape or widen the screen. Before this, the theme fixed the sidebar at 212px, which hid every menu link on a phone.
• Agent map:
  • One finger scrolls the page; two fingers or +/− move the map. Before, a finger was trapped on the map.
  • The map takes 62vh, and the panel below it grows with its content.
  • Tapping a line or tool scrolls its panel into view.
• Events, Sessions, Tools, Models: the edge-to-edge table used the desktop margin and stuck out 16px; it now uses the phone margin.
• Menus: the project switcher and the account and notification menus span the screen with 44px rows instead of running off the edge.
• Spacing: pages get a 16px margin on phones, and the top bar hides the email address.

Checks

• An automated sweep of 36 app pages at 375px found nothing wider than the screen after these fixes.
• Checked by eye at 375px: the map and its panel, Policies (both tabs), a rule page, Approvals, Issues, Testing, Observe, Settings, New rule, Events, the menu, the project switcher, the account menu, and the new-user setup card.
• Desktop is unchanged (confirmed with a headless Chrome render at 1280px).
• tsc is clean and the 150 dashboard tests pass.

Known rough edges

• The map is small on a phone until you zoom in.
• Wide tables such as Issues scroll sideways inside their card rather than becoming cards.
• I didn't review the public marketing pages.

Update: fixes from using it as a phone user

Found by doing real tasks at 375px: switch project, change a line's guardrails, resolve an issue, read a run, test a message, apply a library, create a token, connect a project.

• Map: the line pills were too small to tap (~25×8px). On a phone the lines are also listed under the map as 52px buttons (name and rule count, plus Tools), each opening the same panel. The pill legend is hidden on phones.
• Tables: every table with a header becomes stacked rows on a phone:
  • short cells (time, severity, outcome) appear as chips, and the row title in full;
  • the other cells sit two to a line under their column name (TableLabels copies each header onto its cells after hydration).
  • Before, Outcome and Agent were cut off at the edge, and tables inside panels showed only their first column.
• Key/value tables (issue evidence): the key sits above the value, and long ids wrap.
• Issue page: "Not a problem" and "Accept" were pushed off the card by fixed-width fields. List-row actions now drop under their text, fields fill the line, and page titles are 26px on phones.
• New project: the empty placeholder cards are hidden, so "Connect a new project" is the first thing on screen.
• Small fixes:
  • sideways-scrolling tab rows fade at the edge
  • library descriptions show in full
  • the remove button on a check is finger-sized
  • the ⌘K hint is hidden
• Checks:
  • 36 pages at 375px: none is wider than the screen.
  • Desktop tables are unchanged (headless render at 1280px).
  • tsc is clean, and the 150 dashboard tests pass.

Update: second pass on a phone

Real phone emulation (375px, touch), page by page and task by task.

• Runs list overlap: after widening the table rule to every table with a header, the time squeezed into 16px and sat on top of the outcome chip, because the stacked rules lost to .k-table .tight { width: 1% }. The rules now carry more weight, and a comment explains why.
• Tables without a header row (a run's rules, the Protect wizard's protections) now stack too: the name and description in full, with chips and controls below.
• Attack test: Run and + are 40px, and the attack library opens across the panel.
• Checks: 31 app pages at 375px, none wider than the screen. The public home and pricing pages were already responsive.

Merging: this targets onboarding-guardrails-map, so it reaches main together with #122.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
guardrails-api	Ready	Preview	Oct 24, 2026 4:48am UTC
guardrails-dashboard	Ready	Preview	Oct 24, 2026 4:48am UTC
guardrails-redteam-lang	Ready	Preview	Oct 24, 2026 4:48am UTC