follow-up normalization after #4700.

[shivamhwp]

Summary

• introduce semantic design tokens for compact control radius, sidebar spacing, command-palette alignment, tooltip padding, and opaque sidebar icon color
• normalize Sidebar V2 cards, project filters, settings footer rows, and T3 Connect controls around those tokens
• align command-palette search, results, group labels, and footer to one content axis
• make compact project-action buttons truly square and remove translucent SVG treatment that darkened overlapping strokes

Fixed UI close-ups

These captures are from the isolated local verification build for the latest PR head, 334dd292dc.

Command-palette alignment	Sidebar spacing and opaque icons

Square compact controls	Thread tooltip padding

Settings navigation controls	Settings Back row

Root cause

The redesigned surfaces used independent Tailwind spacing, radius, and opacity values. Reserved scrollbar gutter space also added an extra six pixels to the right side of Sidebar V2 rows, while the settings footer's explicit empty grid column added four pixels when no avatar rendered. Tooltip viewport and child padding stacked asymmetrically.

Impact

Compact controls now share an 8px radius and tokenized geometry. Sidebar rows and settings footer actions have symmetric insets, thread tooltip content has 12px padding on every edge, command-palette content shares a 16px alignment axis, compact project actions render at 24×24px, and detailed SVG icons render with an opaque semantic color.

Verification

• vp test run apps/web/src/components/ProjectScriptsControl.test.tsx apps/web/src/components/ui/button.test.tsx apps/web/src/components/ui/command.test.tsx apps/web/src/components/ui/sidebar.test.tsx — 14 tests passed
• vp run --filter @t3tools/web typecheck
• focused vp lint over all changed web files
• vp run --filter @t3tools/web build
• isolated authenticated web-app pass with a disposable project/thread fixture:
  • Sidebar V2 row outer inset measured approximately 8px on both sides; row content measured 8px/8px
  • settings Back action measured approximately 8px on both sides
  • thread tooltip measured 12px on all four sides
  • command-palette search icon and result icon measured on the same axis; labels and footer align at 16px
  • compact Add action measured 24×24px
  • reviewed controls measured an 8px radius
  • compact and Flask SVG icons measured at opacity 1

Note

Normalize compact UI geometry using shared CSS tokens across sidebar and button components

• Introduces semantic CSS custom properties in index.css (--control-radius, --sidebar-content-inset, --sidebar-row-content-inset, --command-shell-inset, --floating-content-inset, etc.) to drive consistent spacing and radius across the app.
• Updates sidebar.tsx, SidebarV2.tsx, SidebarChrome.tsx, and SettingsSidebarNav.tsx to replace hardcoded padding values with these tokens.
• Updates the xs button size in button.tsx with responsive height/padding/gap classes, and tokenizes icon color in the ghost variant via --control-icon-color.
• Updates ProjectScriptsControl.tsx so Run and Add buttons collapse to icon-only at narrow breakpoints and expand at @3xl/header-actions.
• Behavioral Change: sidebar rows, groups, and footer padding values change from hardcoded pixel values to token-driven sizes, which may shift visual spacing if token values differ from previous hardcoded values.

^{Macroscope summarized 334dd29.}

---

Note

Low Risk
Visual and spacing-token changes across shared UI primitives with no auth, data, or API behavior changes; regression risk is limited to layout and icon appearance.

Overview
Introduces shared CSS variables in index.css (--control-radius, sidebar insets/gap/icon color, command palette insets) so compact controls, sidebars, and the command palette stay aligned instead of using scattered Tailwind values.

Buttons now use rounded-[var(--control-radius)] and --control-icon-color for SVGs (replacing default opacity-80 on outline/ghost). Sidebar groups, menu buttons, and chrome/settings footers swap fixed p-2 / px-2 for the sidebar tokens; icons use opaque --sidebar-icon-color instead of faded SVG opacity. Command palette search shell and footer horizontal padding use --command-shell-inset and --command-content-inset. Project script Run/Add xs controls are square at narrow widths and expand with labels at @3xl/header-actions.

Static markup tests lock in the new classes for button, command, sidebar, and ProjectScriptsControl.

^{Reviewed by Cursor Bugbot for commit f802705. Bugbot is set up for automated code reviews on this repo. Configure here.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 86e5f877-17f9-4cbe-913d-f0bc304382fb

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

Approvability

Verdict: Approved 334dd29

This PR introduces CSS custom properties for consistent UI geometry and mechanically replaces hardcoded spacing/radius values with variable references. Changes are purely presentational with no runtime behavior impact, and new tests verify the styling is applied correctly.

^{You can customize Macroscope's approvability policy. Learn more.}

[cursor]

Cursor Bugbot has reviewed your changes using high effort and found 3 potential issues.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit b931602. Configure here.}

Dismissing prior approval to re-evaluate f802705

Dismissing prior approval to re-evaluate 334dd29