Sign up
View stargazersSign up

fix(web): align sidebar history buttons to the right edge#31125

open1
main
GitHub fork: fix/sidebar-history-right-edge
opened7d agobyAanis-dr
1 files changed
View on GitHubTwo-way sync enabledPR last imported 1d ago

Problem

On macOS desktop 0.1.8-nightly.20261104.4179, the sidebar's Back and Forward buttons sit beside the T3 Code logo. Widening the sidebar increases the empty space to their right. They should remain at the header's right edge with the existing padding.

Change

Move the history controls into a non-shrinking sibling of the flexible brand/label area. Keep the minimum-width probe's gap consistent with the header.

diff
1- [logo][back][forward] |
2+ [logo] [back][forward]|

The change is limited to header layout. Navigation handlers, shortcuts, disabled states and desktop-only visibility are unchanged.

Scope and approval

This is a small alignment fix for existing controls, submitted under the focused visual-bug exception. It adds no setting or navigation behavior. The shared web component renders these controls only in Electron; native mobile navigation and server connection modes are unaffected.

Verification

  • vp run check:changed passed formatting, lint, both knip checks, typechecking of two affected packages, and the React compiler check.
  • Captured the header before and after in headless Chromium at sidebar widths of 320px and 440px, with artwork and environment-pill modes. The Forward button's right inset changed from approximately 76px/196px to 12px at both widths.
  • Confirmed the buttons remain hidden below the desktop breakpoint.
  • These are isolated component captures using the source JSX, artwork, button/badge variant classes and compiled app CSS, with hooks and navigation mocked. The native Electron window and navigation interactions were not exercised.

Before:

After:

Merge Danger

Door: two-way. Reverting restores the previous layout.

Blast Radius: sidebar. The change affects header spacing and the minimum sidebar width.

Implemented by Codex (gpt-6-astra) through T3 Code.

Checks

24 successful · 6 skipped
All checks passed
e3082c3

Added 1 commit

  • fix(web): align sidebar history buttons to the right edgee3082c3
MmacroscopeappBot7d ago
Synced from GitHub

Approvability

Verdict: Approved at e3082c3

Macroscope's review found this PR approvable — Aligns existing desktop history buttons to the sidebar’s right edge and updates the matching width measurement. The change is limited to layout, preserving navigation behavior and responsive visibility.

You can add or adjust custom eligibility rules. Learn more.

CcoderabbitaiBot7d ago
Synced from GitHub

Explain Change →

No actionable comments were generated in the recent review.

Walkthrough

The sidebar header now renders the brand and Electron history controls in separate areas. The brand mark container gap also increases from gap-1 to gap-2.

Changes: Sidebar header layout

Layer / File(s)Summary
Header content layout
apps/web/src/components/sidebar/SidebarChrome.tsx		SidebarBrand renders in the flexible header area. Electron history controls render in a separate right-aligned container. The brand mark container gap increases from gap-1 to gap-2.

Estimated code review effort: 1 (Trivial) | ~3 minutes

Change: Bug fix

Possibly related issues

  • Issue 31118: The separate right-aligned header group changes the placement of the desktop Back and Forward controls, as described in the issue.
  • Issue 30723: The desktop controls’ header placement changes, but this PR does not add mobile navigation parity.

Suggested labels: size:S

Suggested reviewers: juliusmarminge, maria-rcks, macroscopeapp

Merge Risk: External image Minimal · up to e3082

The sidebar header layout change is ready to merge with no identified current-head risk.

Pre-merge checks: Passed 4
Check nameStatusExplanation
Title checkPassedThe title "fix(web): align sidebar history buttons to the right edge" states the main change. The raw summary and objectives say the Back and Forward buttons move into a separate, right-aligned contai…
Description checkPassedThe description follows the template well. It has Problem, Change, Scope and approval, and Verification sections. The Problem section gives the platform, build, observed behavior, and expected behavio…
Linked Issues checkPassedCheck skipped because no linked issues were found for this pull request.
Out of Scope Changes checkPassedCheck skipped because no linked issues were found for this pull request.
Full details: Title check

Explanation

The title "fix(web): align sidebar history buttons to the right edge" states the main change. The raw summary and objectives say the Back and Forward buttons move into a separate, right-aligned container in the sidebar header. The title follows the conventional commit format and is specific. It does not mention the brand gap change, which is a minor secondary detail.

Full details: Description check

Explanation

The description follows the template well. It has Problem, Change, Scope and approval, and Verification sections. The Problem section gives the platform, build, observed behavior, and expected behavior. The Change section explains the layout move and the gap alignment. The Scope section invokes a focused visual-bug exception with a reason. The Verification section lists the checks run, the measured inset results at two widths, what was not tested (native Electron window and navigation interactions), and before/after screenshots. The author also names the implementing model and harness, as the template requests. Minor gap: the scope section does not link a triaged issue or maintainer approval, so the exception claim depends on the reviewer's judgment.

Finishing Touches
Generate unit tests (beta)
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Tip

🎯 Customize your risk assessments

Guide how CodeRabbit assesses merge risk and security architecture risk. Highlight sensitive changes and explain your security boundaries using Merge Risk Instructions and Security Risk Instructions in your review settings. Security architecture risk assessments require the Advanced plan or above.

✅ Automatic approvals, with your rules

Let CodeRabbit approve pull requests once required threads are resolved, pre-merge checks pass, and your risk limits are met. Enable Automatic approvals in review settings, with overrides for teams or file paths.

External image Recent review info
External image Run configuration
External image Commits

Reviewing files that changed from the base of the PR and between 7f6f47b27b44456f1c8214d3b566b375c09f629e and e3082c325d6967778f4ff0187a5276033872b26d.

External image Files selected for processing: 1
  • apps/web/src/components/sidebar/SidebarChrome.tsx

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 9 remain after this review.