fix(frontend): center AuthSideBanner content to fix gap on wide screens

[oforiwaasam]

Summary

On a wide display the sign-in page splits into a fixed-width form on the left and a marketing panel on the right. The panel's content — the GitHub chip, the "Build agents that automate your work" headline, and the three feature rows — sits against the panel's left edge and stops well short of its right edge. Everything past that point stays blank, and the gap grows with the viewport. In the attached screenshot (~1780px wide) roughly half the panel is empty, which makes the page look unfinished.

Root cause: flexbox's default cross-axis alignment (align-items: stretch) doesn't center a width-capped child, it just anchors it to the start of the cross axis. The fix adds mx-auto to the content wrapper so it stays horizontally centered within the panel as the panel grows.

This component lives in the shared agenta-auth-ui package (AuthSideBanner.tsx), consumed by AuthShell across OSS, EE, and mobile, so the fix applies everywhere the banner is rendered.

Testing

Verified locally

• Ran the dev stack via ./hosting/docker-compose/run.sh --oss --dev --web-local
• Verified /auth locally on my personal wide screen and at 1780×900 and 1900px+ widths (via Chrome DevTools responsive mode) before and after changes; panel content now stays centered instead of hugging the left edge (see before and after screenshots attached in Demo section)
• Checked dark mode; no regression (diff only touches layout, not color)
• Ran pnpm format-fix and pnpm lint-fix in web

Added or updated tests

N/A; this is a single-class CSS/layout fix with no behavioral change, so no new test coverage was added.

Demo

BEFORE changes

AFTER changes

Checklist

• I have included a video or screen recording for UI changes, or marked Demo as N/A
• Relevant tests pass locally
• Relevant linting and formatting pass locally
• I have signed the CLA, or I will sign it when the bot prompts me

Contributor Resources

• Contributing guide
• Creating your first PR
• Development mode
• Testing
• Formatting and linting
• Slack support

Issue

Closes #6148

[vercel]

@oforiwaasam is attempting to deploy a commit to the agenta projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

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: 85d06d1c-7042-4985-8d8c-fd69524ec2ea

📥 Commits

Reviewing files that changed from the base of the PR and between 753af38 and 43d9a1b.

📒 Files selected for processing (1)

• web/packages/agenta-auth-ui/src/AuthSideBanner.tsx

Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review.

---

📝 Walkthrough

Summary by CodeRabbit

• Style
  • Centered the authentication side-banner content horizontally for a more balanced layout.

Walkthrough

The auth side banner now horizontally centers its inner content container within the panel.

Changes

Auth banner layout

Layer / File(s)	Summary
Center banner content web/packages/agenta-auth-ui/src/AuthSideBanner.tsx	The banner content container uses mx-auto for horizontal centering.

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

Merge Risk: ⚪ Minimal · up to 43d9a

This localized layout change centers the authentication banner content on wide screens without changing behavior, data, permissions, or runtime configuration; no actionable merge-blocking risk remains after normal checks and review.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	Docstring check was indeterminate for this PR — some files could not be analyzed in time. Not blocking.
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.
Title check	✅ Passed	The title clearly summarizes the main layout change: centering AuthSideBanner content to remove wide-screen gaps.
Description check	✅ Passed	The description directly explains the layout issue, root cause, fix, affected component, and validation steps.

✨ Finishing Touches 💡 1

🛠️ Fix failing CI checks 💡

• Create stacked PR
• Commit on current branch

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

[ashrafchowdury]

Hey @oforiwaasam thank you for the PR. I don't think this is the right approach to fix this issue; we need to think about how we can reduce the white space that much. And that requires design alignment and some suggestions as well: how can we improve the view for large screens

[oforiwaasam]

Thanks for the feedback, @ashrafchowdury. I agree that if we want to prioritize reducing how much of the white space there is, then this approach isn't the best. For suggestions on my end to improve the view for large screens, we can cap the entire page's width or just the panel's width so the panel's content stays balanced within the panel as the viewport grows. Let me know what you think about these two suggestions or if you have a specific design direction in mind already, we can discuss that further too.

[mmabrouk]

qa passed for 43d9a1b. here is the recording: https://www.browserbase.com/sessions/1310b4b3-9b99-4037-b4b5-faa20f88c99e

• 1780px: banner content stayed centered with equal 332px side gaps
• 1900px: banner content stayed centered with equal 392px side gaps
• 800px: banner remained hidden
• refresh at 1900px: centering remained unchanged