DOC-2212 Fix mobile nav visibility and chat panel positioning for standalone widgets#383
Merged
Merged
Conversation
…idgets - Always show navbar-menu on standalone widget (no hamburger toggle) - Offset chat panel top by navbar height to avoid header overlap - Use html[data-theme="dark"] selector for Bump.sh dark mode compatibility Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
✅ Deploy Preview for docs-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
📝 WalkthroughWalkthroughThis PR adjusts styling for fixed navbar integration and theme selector consistency. The navbar menu is changed from a toggle-style hamburger to an always-visible flex layout. The chat panel positioning is offset below the fixed navbar using CSS variables for height. Dark-mode styles are migrated across all chat panel and Kapa SDK UI components from the Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/css/chat-panel-bump.css`:
- Around line 10-13: The chat panel currently uses only --navbar-height for top
and height calc; change both the top and height calc in the chat panel styles
(the rules that set top: and height: calc(...)) to use the full header stack
offset variable — e.g. replace references to var(--navbar-height, 70px) with
var(--header-stack-offset, var(--navbar-height, 70px)) so the panel is offset
when announcements are present; update both the top property and the height
calculation in the chat panel CSS rule accordingly.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: c3ce2f3a-71b7-4fec-9426-18375d4e1d7c
📒 Files selected for processing (2)
src/css/chat-panel-bump.csssrc/css/header-bump.css
Comment on lines
+10
to
+13
| top: var(--navbar-height, 70px); | ||
| right: 0; | ||
| width: 420px; | ||
| height: 100vh; | ||
| height: calc(100vh - var(--navbar-height, 70px)); |
Contributor
There was a problem hiding this comment.
Use full header stack offset for the chat panel position.
Line 10 and Line 13 only account for --navbar-height. The header stack can also include announcement offset (see src/css/header-bump.css Line 73 and Line 388), so this can still overlap in announcement-enabled layouts.
💡 Proposed fix
.chat-panel {
position: fixed;
- top: var(--navbar-height, 70px);
+ top: var(--body-top, var(--navbar-height, 70px));
right: 0;
width: 420px;
- height: calc(100vh - var(--navbar-height, 70px));
+ height: calc(100vh - var(--body-top, var(--navbar-height, 70px)));
background: `#fff`;
color: var(--grey-900-new, var(--grey-900, `#181818`));
border-left: 1px solid var(--grey-100-new, var(--grey-100, `#e5e5e5`));
box-shadow: -14px 0 40px -18px rgba(15, 23, 42, 0.18);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 120;
font-family: var(--font-sans, "Inter", -apple-system, BlinkMacSystemFont, sans-serif);
}
+
+@media (min-width: 1025px) {
+ .chat-panel {
+ top: var(--body-top--desktop, var(--body-top, var(--navbar-height, 70px)));
+ height: calc(100vh - var(--body-top--desktop, var(--body-top, var(--navbar-height, 70px))));
+ }
+}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/css/chat-panel-bump.css` around lines 10 - 13, The chat panel currently
uses only --navbar-height for top and height calc; change both the top and
height calc in the chat panel styles (the rules that set top: and height:
calc(...)) to use the full header stack offset variable — e.g. replace
references to var(--navbar-height, 70px) with var(--header-stack-offset,
var(--navbar-height, 70px)) so the panel is offset when announcements are
present; update both the top property and the height calculation in the chat
panel CSS rule accordingly.
Invert the nav toggle icon on home/landing pages in light mode since they have dark backgrounds where the dark icon is invisible. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Reorder the "If you..." decision section to show Cloud option before Self-Managed, matching the product card ordering. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Use CSS :has() selector to detect when nav-container is hidden and adjust body margin-left and header left position to 0. Added smooth transition for better UX. Ref: DOC-2213 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
JakeSCahill
force-pushed
the
fix/standalone-widget-mobile-nav
branch
from
b3c36ab to
99418a1
Compare
Increase max-width from 1280px to 1480px when sidebar is hidden, allowing content to use more of the available horizontal space. Ref: DOC-2213 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
JakeSCahill
changed the title
Feediver1
approved these changes
May 28, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
html[data-theme="dark"]selector for Bump.sh dark mode compatibilityTest plan
🤖 Generated with Claude Code