Skip to content

fix: docs 352 navigation pane not functioning properly on safari#432

Merged
niallobrien merged 2 commits into
mainfrom
fix/docs-352-navigation-pane-not-functioning-properly-on-safari
May 29, 2026
Merged

fix: docs 352 navigation pane not functioning properly on safari#432
niallobrien merged 2 commits into
mainfrom
fix/docs-352-navigation-pane-not-functioning-properly-on-safari

Conversation

@niallobrien
Copy link
Copy Markdown
Collaborator

@niallobrien niallobrien commented May 28, 2026

Addresses Safari issue when page zooming causing the left navbar item spacing to screw up. I narrowed it down to the chevron icon in the sidebar.

While I was in here, I also addressed a related bug with the developer tools menu item (it caused other menu items to expand/collapse).

Here I have production open in the first tab, and my local fix open in the second.
https://github.com/user-attachments/assets/61679eb2-2e41-4c54-b258-cc7c011f07ee

@vercel
Copy link
Copy Markdown

vercel Bot commented May 28, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
cloudsmith-docs Ready Ready Preview, Comment May 28, 2026 4:33pm

Request Review

@niallobrien niallobrien marked this pull request as ready for review May 28, 2026 16:38
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Fixes Safari-specific sidenav layout issues (notably under page zoom) by stabilizing the sidebar chevron icon’s layout/rotation behavior, and adjusts sidenav expand/collapse handling for hash-anchor “parent” items (e.g. Developer Tools) to avoid unintended menu state changes.

Changes:

  • Added a disableAnimation option to ChevronSmallIcon to allow non-motion SVG rotation via transform.
  • Updated Sidenav item click handling to (a) only toggle expansion for expandable items and (b) treat hash-anchor parents as expand/collapse-only within the sidenav.
  • Reworked sidenav chevron markup/CSS to pin icon sizing/positioning and avoid Safari zoom spacing glitches.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File Description
src/icons/svgs/ChevronSmall.tsx Adds disableAnimation and switches rotation handling to support a non-animated SVG path transform.
src/components/Sidenav/Sidenav.tsx Fixes expand/collapse logic (including hash-anchor parent behavior) and wraps chevron for more stable layout.
src/components/Sidenav/Sidenav.module.css Updates icon sizing/positioning styles to prevent zoom-induced spacing/layout issues in Safari.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copy link
Copy Markdown
Contributor

@aptkingston aptkingston left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Tested in Safari 👍

@niallobrien niallobrien merged commit 226c47b into main May 29, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

3 participants