fix(web): normalize compact UI geometry by shivamhwp · Pull Request #4498 · pingdotgg/t3code

shivamhwp · 2026-07-25T02:19:16Z

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 this PR.

Command-palette alignment	Sidebar spacing and opaque icons

Square compact controls	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/ui/button.test.tsx apps/web/src/components/ui/sidebar.test.tsx — 9 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 custom property tokens

Introduces a set of CSS custom properties in index.css (--control-radius, --sidebar-content-inset, --sidebar-control-gap, --sidebar-icon-color, etc.) to standardize spacing, corner radius, and icon color across the app.
Replaces hardcoded padding and color values in sidebar components (SidebarV2, SidebarChrome, SettingsSidebarNav) and CommandInput/CommandFooter with references to these tokens.
Updates Button xs and ghost variants to use explicit geometry and --control-icon-color for icon color, replacing the prior opacity-based SVG selector approach.
Behavioral Change: ghost variant buttons now render icons with a solid --muted-foreground color instead of reduced opacity; xs buttons gain explicit height/padding/gap constraints.

^{Macroscope summarized b931602.}

Note

Low Risk
Visual and styling-only changes with unit tests; no auth, data, or API behavior changes.

Overview
Introduces shared CSS custom properties in index.css (--control-radius, --sidebar-content-inset, --command-content-inset, --floating-content-inset, --sidebar-icon-color, etc.) so sidebar, command palette, tooltips, and compact controls stay aligned.

Button defaults now use rounded-[var(--control-radius)] and --control-icon-color for SVGs on outline/ghost instead of global opacity-80 on icons. Project header actions switch to size="icon-xs" with responsive width/label classes so compact controls stay square until the header widens.

Sidebar V2, settings footer, T3 Connect sign-in, and base SidebarMenuButton replace hardcoded px-2 / rounded-md with the new tokens; thread tooltips drop stacked viewport padding for uniform --floating-content-inset. Command palette search shell and footer use --command-shell-inset / --command-content-inset. Settings footer uses flex so Back and avatar share space symmetrically; inactive nav icons use --sidebar-icon-color.

Adds button.test.tsx and extends sidebar.test.tsx to lock token classes and square icon-xs sizing.

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

coderabbitai · 2026-07-25T02:19:29Z

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: fce2f936-26f2-43f5-adfc-57862a621d38

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

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

macroscopeapp · 2026-07-25T03:15:11Z

Approvability

Verdict: Approved

This PR normalizes UI geometry by introducing CSS custom properties for consistent spacing and border-radius values across components. The changes are purely mechanical styling updates with no behavioral impact.

^{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.}

cursor · 2026-07-25T03:18:13Z

-    <div className={cn("px-2.5 py-1.5", wrapperClassName)}>
+    <div
+      className={cn(
+        "px-[var(--command-shell-inset)] py-1.5 [&_[data-slot=autocomplete-start-addon]]:ps-[calc(var(--command-shell-inset)+0.0625rem)] sm:*:data-[slot=autocomplete-input]:ps-[calc(var(--command-shell-inset)+1.5rem)]",


Command input padding never applies

Medium Severity

The CommandInput's text padding is incorrect. The sm:*:data-[slot=autocomplete-input] selector fails to apply the intended ps rule because data-slot=autocomplete-input is a nested element, not a direct child. This results in the input text using hardcoded spacing instead of --command-shell-inset.

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

cursor · 2026-07-25T03:18:13Z

-                  size="xs"
+                  size="icon-xs"
                  variant="outline"
+                  className="@3xl/header-actions:w-auto @3xl/header-actions:px-[calc(--spacing(2)-1px)]"


Expanded script buttons stay cramped

Medium Severity

Switching these controls to icon-xs keeps sm:size-6 width while only adding @3xl/header-actions:w-auto. Depending on stylesheet order, the fixed width can win, so when labels unhide the button stays 24px wide and the text overflows. The override also omits the old xs text and gap sizing used by neighboring header actions.

Additional Locations (1)

apps/web/src/components/ProjectScriptsControl.tsx#L431-L435

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

cursor · 2026-07-25T03:18:13Z

-                  size="xs"
+                  size="icon-xs"
                  variant="outline"
+                  className="@3xl/header-actions:w-auto @3xl/header-actions:px-[calc(--spacing(2)-1px)]"


Expanded script buttons lose compact typography

Medium Severity

Switching these controls to icon-xs keeps them square when compact, but the @3xl expansion only adds width and padding. icon-xs still inherits base gap-2 and text-base/sm:text-sm, so expanded labels no longer match neighboring xs header actions that keep gap-1 and text-sm/sm:text-xs.

Additional Locations (1)

apps/web/src/components/ProjectScriptsControl.tsx#L431-L435

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

fix(web): normalize compact UI geometry

53ef847

github-actions Bot added vouch:trusted PR author is trusted by repo permissions or the VOUCHED list. size:M 30-99 changed lines (additions + deletions). labels Jul 25, 2026

shivamhwp marked this pull request as ready for review July 25, 2026 03:13

Merge branch 'main' into agent/normalize-web-ui-tokens

b931602

macroscopeapp Bot approved these changes Jul 25, 2026

View reviewed changes

cursor Bot reviewed Jul 25, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(web): normalize compact UI geometry#4498

fix(web): normalize compact UI geometry#4498
shivamhwp wants to merge 2 commits into
pingdotgg:mainfrom
shivamhwp:agent/normalize-web-ui-tokens

shivamhwp commented Jul 25, 2026 •

edited by cursor Bot

Loading

Uh oh!

coderabbitai Bot commented Jul 25, 2026 •

edited

Loading

Review skipped

Uh oh!

macroscopeapp Bot commented Jul 25, 2026

Uh oh!

cursor Bot left a comment

Uh oh!

cursor Bot Jul 25, 2026

Uh oh!

cursor Bot Jul 25, 2026

Uh oh!

cursor Bot Jul 25, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

shivamhwp commented Jul 25, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Fixed UI close-ups

Root cause

Impact

Verification

Normalize compact UI geometry using shared CSS custom property tokens

Uh oh!

coderabbitai Bot commented Jul 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

macroscopeapp Bot commented Jul 25, 2026

Approvability

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot Jul 25, 2026

Choose a reason for hiding this comment

Command input padding never applies

Uh oh!

cursor Bot Jul 25, 2026

Choose a reason for hiding this comment

Expanded script buttons stay cramped

Uh oh!

cursor Bot Jul 25, 2026

Choose a reason for hiding this comment

Expanded script buttons lose compact typography

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

shivamhwp commented Jul 25, 2026 •

edited by cursor Bot

Loading

coderabbitai Bot commented Jul 25, 2026 •

edited

Loading