Skip to content

fix: navbar polish after the Ask AI integration - #998

Closed
intrepidcanadian wants to merge 2 commits into
Conflux-Chain:mainfrom
intrepidcanadian:fix/navbar-askai-polish
Closed

fix: navbar polish after the Ask AI integration#998
intrepidcanadian wants to merge 2 commits into
Conflux-Chain:mainfrom
intrepidcanadian:fix/navbar-askai-polish

Conversation

@intrepidcanadian

@intrepidcanadian intrepidcanadian commented Aug 6, 2026

Copy link
Copy Markdown
Contributor

Pre-flight checklist

Two small navbar fixes that follow from #994 landing.

1. The side panel collapses the navbar

sidePanel: true takes the adapter's defaults, which include variant: 'inline'. The inline variant makes room for the panel by setting margin-right on #__docusaurus rather than overlaying it. Measured on a 1100px viewport with the panel open:

closed open
#__docusaurus width 1100 740
.navbar__inner width 1068 708
window.innerWidth 1100 1100

Docusaurus 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-right stays 0px and both the container and .navbar__inner keep 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, #333 light / #fff dark), and both aria-label and title now read "Documentation feedback form". The old communication.svg files 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: nowrap on navbar links plus flex-wrap: nowrap on .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 throws Index algolia_ask_ai_suggested_questions does not exist as 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 Reviewable

intrepidcanadian and others added 2 commits August 6, 2026 13:41
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>
@vercel

vercel Bot commented Aug 6, 2026

Copy link
Copy Markdown

@intrepidcanadian is attempting to deploy a commit to the SongForPrism Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant