[richiemcilroy]

A design pass over the whole web dashboard: one surface system, one button system, one card system, and a set of layout fixes found by running every page against extreme content.

flowchart LR
  chrome["Chrome: sidebar + window<br/>.dashboard-chrome (gray-2)"] --> sheet["Floating content sheet<br/>.dashboard-sheet (gray-1, rounded-2xl, hairline + soft shadow)"]
  sheet --> top["Top bar inside the sheet<br/>15px title, centred search, quiet icon buttons"]
  sheet --> content["Pages<br/>2xl page title, lg section headings with counts"]
  content --> cards["Cards: rounded-xl, gray-3 hairline,<br/>hover lifts with shadow, blue only for selection"]
  content --> buttons["Buttons: h-9 pills<br/>secondary = new outline variant, blue = record, dark = create"]

Loading

• Surfaces are tokens in apps/web/app/globals.css (.dashboard-chrome, .dashboard-sheet, .dashboard-nav-active, .dashboard-nav-hover) with .dark overrides, so light and dark keep the right contrast without dark: utilities.
• packages/ui: new additive secondary Button variant; Popover and Dropdown become white, bordered, elevated menus; Card is rounded-xl with a subtle shadow; Cmdk input and Popover lose the stray browser focus outline (outline-hidden is a Tailwind 4 class and does nothing on 3).
• Sidebar: 240px, compact 36px rows, white active pill with shadow, quieter org switcher (chevrons, domain subline), sentence-case "Spaces" label, compact Pro card instead of a full-width blue button, referral as a nav row.
• Library: page header with actions on the right, cards with a one-line Shared · 3 days ago meta row, a divided stats row, hover scrim and slight thumbnail zoom instead of fading the thumbnail to 30%, square hover buttons, uniform folder card heights, ghost folder menus, segmented layout toggle.
• Settings: Account, General, Notifications and Content now use the shared settings rows already used by Preferences, Members, Billing and Security.

Hardening against extreme content

Every page was swept as four synthetic personas (an owner of 14 orgs with 30 spaces, 40 members and 60 Caps with 250-character, unbroken, CJK, Arabic, emoji and URL titles; a brand-new free account; a free account over the link limit; a plain member), at 390, 1024, 1280 and 1440, light and dark, with an automated check for anything overflowing its container.

Found	Fix
Hovering anywhere in the sidebar showed every space's delete button and darkened every name (the <aside> is a Tailwind group)	Rows use a named group/space (SpacesList.tsx)
A long space name squeezed the top-bar search to a few characters	Title capped at 40% and truncates
"Shared with " wrapped to three lines on space cards	One truncated line with a tooltip
Owners saw "Shared with you" on their own Caps inside a space	Status is hidden for owners there
The org switcher grew as wide as the longest org name and pushed the check mark off-screen	Fixed 300px width, truncation, scrolling list, pinned "New organization"
The default organization picker rendered "TThe International…"	Select options keep the image and label laid out (packages/ui/src/components/Select.tsx)
Browse Spaces scrolled sideways at 1024 and on phones	Name column caps, secondary columns hidden below sm
My Caps said "54 Caps" while the sidebar said 60 (Caps inside folders)	Count moved next to "Videos and screenshots", where it describes what is shown
Upload controls truncated "Choose a file or drag & drop it h…"	"Upload or drop an image"

Before and after

	Before	After
Library
Extreme content
Space with a long name
Browse spaces
Organization settings
Account settings
Dark
Empty account
Phone

• No behaviour changes: every handler, form field, validation, permission check and route is unchanged. Two unit tests had their element lookups updated for the new markup (browse-spaces-edit, organization-settings-ownership); what they assert is the same.

• Outside the dashboard, the new Button variant is additive and Card and Popover are dashboard-only. The share page uses the same Dropdown and Select primitives, so its menus pick up the softer shadow and nothing else (left main, right this PR):

  

Confidence Score: 5/5

The PR appears safe to merge.

Summary

The PR gives the dashboard shared surfaces, cards, buttons, and settings rows.

• The dashboard shell keeps navigation and search tidy around long names.
• Library cards keep their details readable and fit long names.
• Settings pages group controls into shared rows and sections.
• Browse Spaces keeps its columns inside the screen on narrow layouts.
• Dashboard controls, menus, and panels share a lighter, softer style.

_{Reviews (2) · Last reviewed commit: "fix(web): keep long folder paths inside ..." · Reviewed by Greptile}

[sandchest-com]

Sandchest reviewed 8853ffd: nothing exploitable found in this change.

_{Sandchest reviews every change for vulnerabilities an attacker could use · 1 credit · Review details}

[capy-ai]

Capy found no issues.

View 1 other finding in Capy.

[vercel]

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

1 Skipped Deployment

Project	Deployment	Actions	Updated
cap-status	Skipped		Nov 14, 2026 7:03am UTC

[richiemcilroy]

hey @greptileai, please re-review the PR

[capy-ai]

Capy found no issues.

View 1 other finding in Capy.