Skip to content

fix(docs): prevent mobile horizontal overflow - #398

Merged
jp-ayyappan merged 2 commits into
mainfrom
fix/mobile-horizontal-overflow
Oct 6, 2026
Merged

jp-ayyappan merged 2 commits into
mainfrom
fix/mobile-horizontal-overflow

Conversation

@jp-ayyappan

@jp-ayyappan jp-ayyappan commented Oct 6, 2026 •

Copy link
Copy Markdown
Contributor

Summary

  • Clip the closed mobile navbar sidebar so the hide-on-scroll transition does not widen the page.
  • Allow the Standards diagram grid to shrink to the viewport and stack footer links on screens narrower than 360 px.
  • Import the platform OIDC guide and resolve links between imported pages locally; other relative platform document links point to their upstream source.

Bug report and visual evidence

Mobile screen recording in Slack

On a 390 px viewport, the page width grew to 714 px after the navbar hid. With the CSS fix applied, it stays at 390 px. The mobile menu still opens normally.

Validation

  • git diff --check passed.
  • Headless Chrome against the locally generated site: at 390 px, the navbar hid, page width remained 390 px, and the mobile menu opened.
  • At 320 px, applying the grid and footer rules reduced page width from 353 px to 320 px.
  • npm run build passed with Node 22 after the import fix. The generated Configuration and OIDC pages link to each other correctly.

Remote content maintenance

The import currently follows opentdf/platform main, so upstream edits can change this site's build without a docs commit. The link rewrite handles new relative Markdown links by sending unimported pages to their upstream source; external targets are not checked by Docusaurus. If upstream changes keep disrupting CI, pin this import to a reviewed commit or release and update that ref through a scheduled PR with a full site build.

Summary by CodeRabbit

  • Style
    • Improved the standards section layout to better accommodate flexible content widths.
    • On screens narrower than 360px, footer links now appear in a single column instead of two.
    • On mobile screens, closed navigation menus no longer show horizontal overflow.

@jp-ayyappan
jp-ayyappan requested review from a team as code owners October 6, 2026 15:13
@coderabbitai

coderabbitai Bot commented Oct 6, 2026 •

Copy link
Copy Markdown

Review in Change Stack →

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration
  • Configuration used: Organization UI
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: 0bc76b46-5d0c-4b0e-a706-5982436b4748
📥 Commits

Reviewing files that changed from the base of the PR and between af7de4e and bad1a39.

📒 Files selected for processing (2)
  • src/components/landing/Standards.module.css
  • src/css/custom.css

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.


📝 Walkthrough

Walkthrough

The CSS changes adjust the standards grid sizing and mobile layouts for footer links and the closed navbar.

Changes

Responsive Layout Adjustments

Layer / File(s) Summary
Standards grid sizing
src/components/landing/Standards.module.css
The base grid column now uses minmax(0, 1fr). The diagram and content order rules add min-width: 0.
Mobile footer and navbar layout
src/css/custom.css
At widths up to 359px, footer links use one column. At widths up to 996px, the closed navbar clips horizontal overflow; this rule does not apply while the sidebar is shown.

Priority: ➖ Normal

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix

Suggested reviewers: marythought

Merge Risk: ⚪ Minimal · up to bad1a

The changes address the reported mobile width issues with scoped layout rules, and the reported browser checks confirm the target widths. No merge-blocking risk is apparent; proceed with normal checks.

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0…
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly summarizes the main change: preventing horizontal overflow on mobile layouts.
✨ Finishing Touches 💡 1
🧪 Generate unit tests (beta)
  • Commit to this branch
  • Create a new PR
🛠️ Fix failing CI checks 💡
  • Commit to this branch
  • Create a new PR
  • Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

A rabbit checks the narrow grid,
And gives each column room to fit.
One footer column, neat and small,
The closed nav clips overflow from all.
The page sits tidy, wide or slight,
Then hops away into the night.

Comment @coderabbitai help to get the list of available commands.

@github-actions

github-actions Bot commented Oct 6, 2026

Copy link
Copy Markdown
Contributor

❌ Surge preview build failed — no preview was deployed. Check the workflow logs for details.

Once the build passes, the preview will be at: https://opentdf-docs-pr-398.surge.sh

Common cause: If the build failed on vendored YAML validation, run the following locally and commit the result:

npm run update-vendored-yaml
git add specs/
git commit -m "chore(deps): update vendored OpenAPI specs"

eugenioenko
eugenioenko previously approved these changes Oct 6, 2026
@jp-ayyappan
jp-ayyappan merged commit e143701 into main Oct 6, 2026
8 checks passed
@jp-ayyappan
jp-ayyappan deleted the fix/mobile-horizontal-overflow branch October 6, 2026 17:48
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.

3 participants