feat(openfga): show ask ai button on mobile

[ttrzeng]

Screen.Recording.2026-01-13.at.2.12.41.PM.mov

Description

What problem is being solved?

How is it being solved?

What changes are made to solve it?

References

Review Checklist

• I have clicked on "allow edits by maintainers".
• I have added documentation for new/changed functionality in this PR or in a PR to openfga.dev [Provide a link to any relevant PRs in the references section above]
• The correct base branch is being used, if not main
• I have added tests to validate that the change in functionality is working as expected

Summary by CodeRabbit

• Style
  • Refined the "Ask AI" button appearance with updated styling and improved visual hierarchy.
  • Enhanced navbar layout for better spacing and responsive design on mobile devices.
  • Streamlined button styling with improved padding and typography for a cleaner interface.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

Changes modify the "Ask AI" navbar button structure in Docusaurus configuration by removing a wrapper div, simplifying button markup, and updating corresponding CSS styling including responsive layout adjustments for mobile viewport widths.

Changes

Cohort / File(s)	Summary
Navbar Configuration docusaurus.config.js	Updated right-side navbar item: replaced wrapped button (<div>...<button>...</button></div>) with standalone button element; button now has classes ask-ai-button and ask-ai-nav-button; added className: 'ask-ai-nav-item' attribute to navbar item config
Styling Updates src/css/custom.css	Replaced .ask-ai-button-wrapper styles with streamlined .ask-ai-button styling (gradient, updated padding, font-weight, nowrap); refactored .navbar__items--right layout rules; added mobile breakpoint (max-width: 996px) with absolute positioning for ask AI nav item and updated search container behavior

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• feat: Kapa AI integration #1157: Modifies the same "Ask AI" navbar item button markup and related CSS classes in docusaurus.config.js.

Suggested reviewers

• rhamzeh

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title directly addresses the main change: making the ask AI button visible on mobile devices through CSS and HTML restructuring.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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 and usage tips.}

[github-actions]

PR Preview Action v1.8.0
🚀 View preview at https://openfga.github.io/openfga.dev/pr-preview/pr-1166/
Built to branch gh-pages at 2026-01-13 19:19 UTC. Preview will be ready when the GitHub Pages deployment is complete.

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/css/custom.css (1)

1-1: Address Prettier formatting issues before merging.

The pipeline indicates code style issues. Run npx prettier --write src/css/custom.css to fix formatting.

🧹 Nitpick comments (1)

src/css/custom.css (1)

84-90: Fragile selector: hashed class name may break on updates.

.navbarSearchContainer_Bca1 appears to be a CSS module-generated hash that could change when Docusaurus or @easyops-cn/docusaurus-search-local is updated. Consider using a more stable selector like [class*="navbarSearchContainer"] or adding a custom class to the search component if the plugin supports it.

♻️ Suggested more resilient selector

-.navbar__items--right .navbarSearchContainer_Bca1 {
+.navbar__items--right [class*="navbarSearchContainer"] {
   order: 1;
 }

Apply the same pattern to lines 125-131 and 133-136.

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3654efa and 05a507e.

📒 Files selected for processing (2)

• docusaurus.config.js
• src/css/custom.css

🧰 Additional context used

🪛 GitHub Actions: Run Checks: Lint, Audit and Build

src/css/custom.css

[warning] 1-1: Code style issues found in the above file. Run Prettier with --write to fix.

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: deploy-preview
• GitHub Check: Test deployment

🔇 Additional comments (3)

docusaurus.config.js (1)

274-278: LGTM! Clean simplification of the Ask AI button markup.

The removal of the wrapper <div> in favor of a standalone <button> is a good refactor. The className: 'ask-ai-nav-item' on the navbar item config enables CSS targeting, and the .ask-ai-button class is retained so the Kapa widget selector (line 339) continues to work correctly.

src/css/custom.css (2)

44-65: LGTM!

The button styling is clean with good use of CSS variables for theming consistency. The white-space: nowrap addition ensures the button text stays on a single line across viewports.

---

92-142: Mobile layout approach is solid.

Good use of CSS variable --ask-ai-mobile-width for consistent sizing across multiple rules. The absolute positioning with transform: translateY(-50%) for vertical centering is a clean approach.

Note: The same hashed class concern applies to .searchBar_RVTs on line 133.