Align top bar content with centered layout#74
Conversation
The navbar and announcement text were rendering full-width while the rest of the page was container-constrained, which made the top section look misaligned. Constrain inner top-bar content to the same max width while keeping full-bleed backgrounds.
WalkthroughDeployment sidebar entries were adjusted to include Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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. Comment |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 2c3f24139f
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| div[class*='announcementBarContent'] { | ||
| width: 100%; | ||
| max-width: var(--site-content-max-width); | ||
| margin: 0 auto; | ||
| padding: 0 var(--ifm-spacing-horizontal); |
There was a problem hiding this comment.
This override makes the announcement bar content use symmetric horizontal padding, but the site config enables a closeable bar (prototypes/docusaurus/docusaurus.config.ts, announcementBar.isCloseable: true), which needs extra right-side space for the dismiss control. Replacing the theme’s content spacing here can cause the long CTA text to run underneath or collide with the close button, especially on narrower viewports.
Useful? React with 👍 / 👎.
|
Cloudflare preview deployed.
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
Autofix Details
Bugbot Autofix prepared a fix for the issue found in the latest run.
- ✅ Fixed: Double horizontal padding on navbar from stacking
- I confirmed the parent
.navbarpadding stacked with.navbar__innerpadding on narrow viewports and fixed it by setting.navbar { padding: 0; }so navbar content aligns with page containers.
- I confirmed the parent
Or push these changes by commenting:
@cursor push 93b11d059a
Preview (93b11d059a)
diff --git a/prototypes/docusaurus/src/css/custom.css b/prototypes/docusaurus/src/css/custom.css
--- a/prototypes/docusaurus/src/css/custom.css
+++ b/prototypes/docusaurus/src/css/custom.css
@@ -73,6 +73,7 @@
/* ── Navbar ───────────────────────────────────────────────── */
.navbar {
+ padding: 0;
border-bottom: 1px solid var(--site-border);
box-shadow: none;
}You can send follow-ups to this agent here.
The sidebar referenced deployment docs that no longer exist, which caused > reactonrails-com@0.1.0 build > npm --prefix prototypes/docusaurus run build > reactonrails-site@0.0.0 build > docusaurus build [INFO] [en] Creating an optimized production build... [webpackbar] ℹ Compiling Client [webpackbar] ℹ Compiling Server [webpackbar] ✔ Server: Compiled successfully in 518.96ms [webpackbar] ✔ Client: Compiled successfully in 666.22ms [SUCCESS] Generated static files in "build". [INFO] Use `npm run serve` command to test your build locally. to fail before validating unrelated changes. Replace the stale ids with the current deployment doc id so the docs plugin can load.
Narrow announcement bar selectors to the stable container class so placeholder/close elements are no longer styled as full bars, which removes edge line artifacts. Also reduce hero logo/frame sizing to avoid upscaling the 64px source image.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
prototypes/docusaurus/src/pages/index.module.css (1)
29-40: Mobile breakpoint currently enlarges the logo relative to desktop.After the base reduction here, Line 352-355 still increases logo size on
max-width: 996px, which partially undoes the change.♻️ Suggested follow-up diff (mobile sizing)
`@media` (max-width: 996px) { .heroLogoFrame { - width: 4.8rem; - height: 4.8rem; - border-radius: 22px; + width: 4.5rem; + height: 4.5rem; + border-radius: 20px; } .heroLogo { - width: 3.7rem; - height: 3.7rem; + width: 3.2rem; + height: 3.2rem; } }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@prototypes/docusaurus/src/pages/index.module.css` around lines 29 - 40, The mobile media query for max-width: 996px is still overriding the new base logo reduction and enlarging the logo; update the rules inside that media query (the selector targeting .heroLogo) to use the same reduced dimensions (width: 3.4rem; height: 3.4rem) or a smaller value instead of increasing them, or remove the overriding width/height there so the base .heroLogo size is preserved.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@prototypes/docusaurus/src/pages/index.module.css`:
- Around line 29-40: The mobile media query for max-width: 996px is still
overriding the new base logo reduction and enlarging the logo; update the rules
inside that media query (the selector targeting .heroLogo) to use the same
reduced dimensions (width: 3.4rem; height: 3.4rem) or a smaller value instead of
increasing them, or remove the overriding width/height there so the base
.heroLogo size is preserved.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 8f1b1581-4d1f-44f1-9f54-3b57a1ed0c3a
📒 Files selected for processing (4)
prototypes/docusaurus/sidebars.tsprototypes/docusaurus/src/css/custom.cssprototypes/docusaurus/src/pages/index.module.cssprototypes/docusaurus/src/pages/index.tsx
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 2 potential issues.
There are 3 total unresolved issues (including 1 from previous review).
Bugbot Autofix prepared fixes for both issues found in the latest run.
- ✅ Fixed: Announcement bar CSS selector targets nonexistent class
- I replaced the dead
.theme-announcement-barselectors withdiv[class*='announcementBar']selectors so the default Docusaurus announcement bar styles apply again.
- I replaced the dead
- ✅ Fixed: Sidebar references likely nonexistent docker deployment doc
- I removed the nonexistent
deployment/docker-deploymentsidebar entry to prevent invalid sidebar doc ID build failures.
- I removed the nonexistent
Or push these changes by commenting:
@cursor push d23932ee20
Preview (d23932ee20)
diff --git a/prototypes/docusaurus/sidebars.ts b/prototypes/docusaurus/sidebars.ts
--- a/prototypes/docusaurus/sidebars.ts
+++ b/prototypes/docusaurus/sidebars.ts
@@ -149,7 +149,6 @@
label: 'Deployment',
items: [
'deployment/README',
- 'deployment/docker-deployment',
'deployment/heroku-deployment',
'deployment/server-rendering-tips',
'deployment/troubleshooting',
diff --git a/prototypes/docusaurus/src/css/custom.css b/prototypes/docusaurus/src/css/custom.css
--- a/prototypes/docusaurus/src/css/custom.css
+++ b/prototypes/docusaurus/src/css/custom.css
@@ -241,21 +241,21 @@
background: var(--site-soft-surface);
color: var(--ifm-color-content);
}
-.theme-announcement-bar {
+div[class*='announcementBar'] {
background: var(--site-soft-surface);
border-bottom: 1px solid var(--site-border);
font-size: 0.9rem;
color: var(--ifm-color-content-secondary);
}
-.theme-announcement-bar [class*='announcementBarContent'] {
+div[class*='announcementBar'] [class*='announcementBarContent'] {
width: 100%;
max-width: var(--site-content-max-width);
margin: 0 auto;
padding: 0 var(--ifm-spacing-horizontal);
}
-.theme-announcement-bar a {
+div[class*='announcementBar'] a {
color: var(--ifm-color-primary);
font-weight: 600;
text-decoration: underline;You can send follow-ups to this agent here.
| color: var(--ifm-color-content); | ||
| } | ||
| div[class*='announcementBar'] { | ||
| .theme-announcement-bar { |
There was a problem hiding this comment.
Announcement bar CSS selector targets nonexistent class
High Severity
The selector .theme-announcement-bar replaces the working div[class*='announcementBar'] but doesn't match any element in the DOM. Docusaurus's default AnnouncementBar uses CSS Modules, producing hashed class names like announcementBar_xxxx. Since the component isn't swizzled in src/theme/, no element will have the literal class theme-announcement-bar. All three rules using this selector become dead CSS, and the announcement bar loses its custom background, border, font sizing, content centering, and link styles.
Additional Locations (2)
| label: 'Deployment', | ||
| items: [ | ||
| 'deployment/README', | ||
| 'deployment/docker-deployment', |
There was a problem hiding this comment.
Sidebar references likely nonexistent docker deployment doc
High Severity
The PR removes deployment/elastic-beanstalk and deployment/capistrano-deployment from the sidebar because they reference missing docs that break the build. However, it adds deployment/docker-deployment, which also doesn't appear to exist — it's absent from both validation reports and no matching file is found anywhere in the repository. This likely introduces the same "invalid sidebar id" build failure the PR aims to fix.
Replace the homepage hero mark source with the provided high-resolution PNG so the logo no longer appears blurry/aliased inside the hero frame.
Remove navbar and announcement content max-width overrides so top bars can span full width again, while keeping the scoped announcement selector fixes.
1 participant
Summary
Testing
deployment/capistrano-deploymentanddeployment/elastic-beanstalk)Note
Low Risk
Mostly documentation navigation and CSS/asset tweaks; low chance of regressions beyond minor layout/visual changes or a missing image asset.
Overview
Updates the Docusaurus docs site navigation and branding. The
Deploymentsidebar now includesdeployment/docker-deploymentand drops the Elastic Beanstalk and Capistrano entries (fixing missing doc IDs).Refines top-of-page styling by targeting the announcement bar via
.theme-announcement-bar(instead of a broad attribute selector) and tweaks the homepage hero logo presentation: switches to/img/logo-mark-pro.png, adjusts the logo frame/box-shadow sizing, and updates the rendered image dimensions.Written by Cursor Bugbot for commit b41a592. This will update automatically on new commits. Configure here.
Summary by CodeRabbit
Documentation
Style