style(frontend): nudge the sidebar brand row (8px top/left, 22px logo) by mmabrouk · Pull Request #5835 · Agenta-AI/agenta

mmabrouk · 2026-08-09T18:16:07Z

Two small brand-row adjustments Mahmoud asked for:

The first line of the sidebar (logo + collapse toggle) now sits with 8px padding on the top and the left, top-aligned instead of vertically centered in its 48px band.
The wordmark grows from 20px to 22px tall. The box is now 99x22, matching the SVG's intrinsic 361:80 ratio; the old 85x20 box did not match it, so the browser letterboxed the logo slightly smaller than its stated size.

No margin or padding changes beyond those two. Collapsed mode keeps its centered toggle, gaining only the 8px top padding.

vercel · 2026-08-09T18:16:13Z

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

Project	Deployment	Actions	Updated (UTC)
agenta-documentation	Error		Aug 9, 2026 8:58pm

coderabbitai · 2026-08-09T18:16:16Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: CHILL

Plan: Pro Plus

Run ID: e606e607-2daa-4615-812f-ea35dab61f3e

📥 Commits

Reviewing files that changed from the base of the PR and between e6f0557 and c50c9d8.

📒 Files selected for processing (1)

web/oss/src/components/Sidebar/engine/SidebarShell.tsx

📝 Walkthrough

Summary by CodeRabbit

Style
- Refined sidebar layout, spacing, and alignment.
- Enlarged the sidebar logo and adjusted the toggle to a compact square design.
- Removed the inactive border from the project and organization switcher.
- Updated menu and submenu widths to maintain consistent horizontal margins.
- Improved sidebar positioning when a top banner is displayed.

Walkthrough

The sidebar now accounts for the demo banner and uses updated header spacing, larger logo and icon dimensions, borderless switcher styling, and exact 16px menu insets.

Changes

Sidebar styling

Layer / File(s)	Summary
Header and control sizing `web/oss/src/components/Sidebar/engine/SidebarShell.tsx`, `web/oss/src/components/Sidebar/components/SidebarLogo.tsx`, `web/oss/src/components/Sidebar/components/SidebarToggleButton.tsx`, `web/oss/src/components/Sidebar/components/ProjectOrgSwitcher/index.tsx`	The sidebar offsets its sticky position and height for `--ag-demo-banner-h`. The expanded header adds spacing, the logo increases to 99×22px, the toggle becomes a 22×22px control with a 16px icon, and the switcher removes its resting border.
Menu width alignment `web/oss/src/components/Sidebar/engine/SidebarMenu.tsx`	Menu and submenu rows use `calc(100% - 16px)` widths with the existing horizontal margins and padding.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

Agenta-AI/agenta#4475: Introduced the --ag-demo-banner-h layout variable used by SidebarShell.
Agenta-AI/agenta#5738: Overlaps with styling changes to sidebar components.
Agenta-AI/agenta#5744: Overlaps with sidebar styling and layout changes.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description accurately explains the sidebar brand-row, logo, toggle, and spacing changes.
Title check	✅ Passed	The title clearly identifies the main sidebar brand-row adjustment and the key logo sizing changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

Create stacked PR
Commit on current branch

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch fix/sidebar-logo-tweaks

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

mmabrouk · 2026-08-09T18:28:01Z

Added dd8d85b: the collapse/open toggle is now a 22px square with a 16px icon, so its optical centre sits on the same line as the resized wordmark (the old 28px pill rode 3px low against the top-aligned row). Screenshot-verified in expanded, collapsed, and dark states.

mmabrouk · 2026-08-09T18:54:13Z

@coderabbitai review

The brand row top-aligns with 8px top and left padding instead of centering in its 48px band, and the wordmark grows from 20px to 22px tall. 99x22 keeps the SVG's intrinsic 361:80 ratio; the 85x20 box did not match it.

A 22px square with a 16px icon, so the toggle's optical centre sits on the same line as the resized logo; the old 28px pill rode 3px low against the top-aligned brand row. Verified by screenshot in expanded, collapsed and dark states.

Margin, not padding: the first pass converted the row to top-aligned 8px padding, which moved the logo UP (the 48px row's centring already held it 14px down) and read as no margin at all. Restore the centring and give the row mt-2/ml-2 so the logo visibly sits 8px further from the top and left. Collapsed keeps the toggle centred in the rail.

…t 8px The expanded menu rows were 94% wide with an 8px left margin, leaving ~6px on the right in the 236px rail while the brand row's toggle sits at 8px - hover a row and the highlight's right edge missed the toggle's by 2px. An exact calc(100%-16px) insets rows 8px on both sides at any width, so the edges line up.

The bottom-of-sidebar project/org selector loses its resting border; the hover fill remains the affordance. Mahmoud's call: visible on hover, no box around it otherwise.

mmabrouk · 2026-08-09T19:31:06Z

@coderabbitai review

coderabbitai · 2026-08-09T19:31:12Z

✅ Action performed

Review finished.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

github-actions · 2026-08-09T19:33:30Z

Railway Preview Environment


Status	Destroyed (PR closed)

Updated at 2026-08-09T21:18:02.821Z

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (1)

web/oss/src/components/Sidebar/components/SidebarLogo.tsx (1)

24-25: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Keep the added comments to one short line.

All four locations add two-line explanatory comments. Apply the same concise-comment rule at each site.

web/oss/src/components/Sidebar/components/SidebarLogo.tsx#L24-L25: Reduce the centering rationale to one short line.

web/oss/src/components/Sidebar/components/SidebarLogo.tsx#L30-L31: Reduce the SVG sizing rationale to one short line.

web/oss/src/components/Sidebar/components/SidebarToggleButton.tsx#L20-L21: Reduce the alignment rationale to one short line.

web/oss/src/components/Sidebar/engine/SidebarMenu.tsx#L322-L323: Reduce the inset rationale to one short line.

As per coding guidelines: Keep in-code comments to at most one short line; use longer comments only for genuinely surprising constraints such as bugs, races, or ordering requirements.

Source: Coding guidelines

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: ffcf1560-a6fa-4ee4-b098-e8180277d4de

📥 Commits

Reviewing files that changed from the base of the PR and between 1188fb8 and c05453d.

📒 Files selected for processing (4)

web/oss/src/components/Sidebar/components/ProjectOrgSwitcher/index.tsx
web/oss/src/components/Sidebar/components/SidebarLogo.tsx
web/oss/src/components/Sidebar/components/SidebarToggleButton.tsx
web/oss/src/components/Sidebar/engine/SidebarMenu.tsx

A transparent ::after hit extender (inset -3px) - the visual box, the row's alignment and Mahmoud's 22px optical choice are untouched; only the clickable area returns to its old size.

Same root cause as the home rail: on document-scrolling routes the fixed 38px demo banner covered the sidebar's brand row. The rail reads --ag-demo-banner-h (0px outside demo workspaces) for its top offset and height.

dosubot Bot added the size:XS This PR changes 0-9 lines, ignoring generated files. label Aug 9, 2026

dosubot Bot added frontend ui labels Aug 9, 2026

vercel Bot deployed to Preview August 9, 2026 18:17 View deployment

dosubot Bot added size:S This PR changes 10-29 lines, ignoring generated files. and removed size:XS This PR changes 0-9 lines, ignoring generated files. labels Aug 9, 2026

vercel Bot deployed to Preview August 9, 2026 18:29 View deployment

vercel Bot deployed to Preview August 9, 2026 18:35 View deployment

vercel Bot deployed to Preview August 9, 2026 18:40 View deployment

mmabrouk added 4 commits August 9, 2026 21:18

mmabrouk force-pushed the fix/sidebar-logo-tweaks branch from 2ed54bb to 99e2ea1 Compare August 9, 2026 19:18

vercel Bot deployed to Preview August 9, 2026 19:20 View deployment

style(frontend): borderless project switcher at rest

c05453d

The bottom-of-sidebar project/org selector loses its resting border; the hover fill remains the affordance. Mahmoud's call: visible on hover, no box around it otherwise.

vercel Bot deployed to Preview August 9, 2026 19:25 View deployment

coderabbitai Bot reviewed Aug 9, 2026

View reviewed changes

Comment thread web/oss/src/components/Sidebar/components/SidebarToggleButton.tsx

fix(frontend): 28px pointer target around the 22px toggle

e6f0557

A transparent ::after hit extender (inset -3px) - the visual box, the row's alignment and Mahmoud's 22px optical choice are untouched; only the clickable area returns to its old size.

vercel Bot had a problem deploying to Preview August 9, 2026 20:56 Failure

fix(frontend): the sticky sidebar clears the demo banner

c50c9d8

Same root cause as the home rail: on document-scrolling routes the fixed 38px demo banner covered the sidebar's brand row. The rail reads --ag-demo-banner-h (0px outside demo workspaces) for its top offset and height.

dosubot Bot removed the size:S This PR changes 10-29 lines, ignoring generated files. label Aug 9, 2026

vercel Bot had a problem deploying to Preview August 9, 2026 20:58 Failure

dosubot Bot added the size:M This PR changes 30-99 lines, ignoring generated files. label Aug 9, 2026

mmabrouk merged commit 4955d6f into release/v0.112.0 Aug 9, 2026
61 of 63 checks passed

mmabrouk added the lgtm This PR has been approved by a maintainer label Aug 10, 2026

coderabbitai Bot mentioned this pull request Aug 13, 2026

fix(frontend): Make the sidebar banner and switcher menu fit the rail #6018

Merged

Navigation Menu

Uh oh!

style(frontend): nudge the sidebar brand row (8px top/left, 22px logo) - #5835

style(frontend): nudge the sidebar brand row (8px top/left, 22px logo)#5835
mmabrouk merged 7 commits into
release/v0.112.0from
fix/sidebar-logo-tweaks

mmabrouk commented Aug 9, 2026

Uh oh!

vercel Bot commented Aug 9, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Aug 9, 2026 •

edited

Loading

Summary by CodeRabbit

Walkthrough

Changes

Uh oh!

mmabrouk commented Aug 9, 2026

Uh oh!

mmabrouk commented Aug 9, 2026

Uh oh!

mmabrouk commented Aug 9, 2026

Uh oh!

coderabbitai Bot commented Aug 9, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Aug 9, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

mmabrouk commented Aug 9, 2026

Uh oh!

vercel Bot commented Aug 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Summary by CodeRabbit

Walkthrough

Changes

Uh oh!

mmabrouk commented Aug 9, 2026

Uh oh!

mmabrouk commented Aug 9, 2026

Uh oh!

mmabrouk commented Aug 9, 2026

Uh oh!

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

Uh oh!

Uh oh!

github-actions Bot commented Aug 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Railway Preview Environment

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

vercel Bot commented Aug 9, 2026 •

edited

Loading

coderabbitai Bot commented Aug 9, 2026 •

edited

Loading

coderabbitai Bot commented Aug 9, 2026 •

edited

Loading

github-actions Bot commented Aug 9, 2026 •

edited

Loading