fix: navbar polish after the Ask AI integration - #998
Closed
intrepidcanadian wants to merge 2 commits into
Closed
Conversation
sidePanel: true takes the adapter's defaults, which include variant: 'inline'. The inline variant makes room for the panel by setting margin-right on the push target (#__docusaurus by default) rather than overlaying it. Measured on a 1100px viewport with the panel open: #__docusaurus drops to 740px and .navbar__inner to 708px, while window.innerWidth stays 1100. Docusaurus selects its mobile navbar from a 996px *viewport* media query, not from the container width, so at any viewport above 996px it keeps the full desktop navbar even when the container is far narrower. The result is a navbar that cannot fit its items: "Core Space", the only two-word label, wraps to 61px against its siblings' 34px, and the remaining items overlap each other. The affected range is roughly a 997-1360px viewport, since below 997 the mobile navbar takes over and above ~1360 there is enough width left after the 360px panel. That range covers common laptop widths including 1280x800 and 1366x768. Switching to variant: 'floating' overlays the panel instead. Verified on the same 1100px viewport: margin-right on #__docusaurus stays 0px and both the container and .navbar__inner keep their full width whether the panel is open or closed, so the navbar cannot reflow. Note on askAi.sidePanel.suggestedQuestions, which is the built-in way to offer clickable starter questions: enabling it without preparation throws "Index algolia_ask_ai_suggested_questions does not exist" as an uncaught runtime error, because it reads from a dedicated Algolia index that must be created and populated first. It is deliberately left disabled here. Co-Authored-By: Claude <noreply@anthropic.com>
The navbar's feedback link used static/img/communication.svg — two overlapping speech bubbles with a three-dot typing indicator. It is an unambiguous chat icon, but it points at a Microsoft Forms feedback survey (forms.office.com/r/pKVBywZwLY), so it was already mismatched with its destination. With an Ask AI chat panel now arriving in the same navbar (Conflux-Chain#994), two adjacent controls read as "chat" and only one of them is. Replaces it with a clipboard/form icon in the existing icon style (48x48 viewBox, 4px round strokes, Conflux-Chain#333 light / #fff dark), and sets both aria-label and title to "Documentation feedback form" so the hover tooltip and screen-reader label say what the link actually does. The old communication.svg files are left in place; nothing else references them. Also stops the desktop navbar reflowing into two cramped rows. Measured at a 1100px viewport: the left item group is 661px and the right group 407px, totalling exactly the 1068px available — zero slack. Any added width makes the flex row wrap, and because "Core Space" is the only two-word label it is what breaks, rendering at 61px tall against its siblings' 34px while neighbouring items overlap. Adds white-space: nowrap on navbar links and flex-wrap: nowrap on .navbar__inner above the 997px mobile breakpoint, so the row stays one line instead of collapsing. Scoped to desktop widths to leave the mobile hamburger navbar untouched. Co-Authored-By: Claude <noreply@anthropic.com>
|
@intrepidcanadian is attempting to deploy a commit to the SongForPrism Team on Vercel. A member of the Team first needs to authorize it. |
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
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.
Pre-flight checklist
Two small navbar fixes that follow from #994 landing.
1. The side panel collapses the navbar
sidePanel: truetakes the adapter's defaults, which includevariant: 'inline'. The inline variant makes room for the panel by settingmargin-righton#__docusaurusrather than overlaying it. Measured on a 1100px viewport with the panel open:#__docusauruswidth.navbar__innerwidthwindow.innerWidthDocusaurus selects its mobile navbar from a 996px viewport media query, not from the container width, so above 996px it keeps the full desktop navbar even when the container is far narrower. The navbar then cannot fit its items:
Core Space, the only two-word label, wraps to 61px against its siblings' 34px, and the remaining items overlap each other.The affected range is roughly a 997–1360px viewport — below 997 the mobile navbar takes over, and above ~1360 there is enough width left after the 360px panel. That range covers common laptop widths including 1280x800 and 1366x768.
Setting
variant: 'floating'overlays the panel instead. Verified at the same 1100px viewport:margin-rightstays0pxand both the container and.navbar__innerkeep full width whether the panel is open or closed, so the navbar cannot reflow.2. The feedback icon looks like a chat button
The feedback link used
static/img/communication.svg— two overlapping speech bubbles with a three-dot typing indicator. It points at a Microsoft Forms feedback survey, so it was already mismatched with its destination; with an Ask AI chat control now beside it, two adjacent buttons read as "chat" and only one is.Replaced with a clipboard/form icon in the existing icon style (48x48 viewBox, 4px round strokes,
#333light /#fffdark), and botharia-labelandtitlenow read "Documentation feedback form". The oldcommunication.svgfiles are left in place; nothing else references them.Also stops the navbar reflowing in general. At a 1100px viewport the left item group is 661px and the right group 407px, totalling exactly the 1068px available — zero slack, so any added width wraps the row.
white-space: nowrapon navbar links plusflex-wrap: nowrapon.navbar__inner, scoped above the 997px breakpoint so the mobile hamburger navbar is untouched.Note on starter questions
While looking at this I checked
askAi.sidePanel.suggestedQuestions, which is the built-in way to offer clickable starter questions. Enabling it throwsIndex algolia_ask_ai_suggested_questions does not existas an uncaught runtime error, because it reads from a dedicated Algolia index that has to be created and populated first. Not touched here, but worth knowing before anyone turns it on.This change is