fix: hide default details markers for Safari #31
Conversation
✅ Deploy Preview for typst-docs-web ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
I tried to check on an iOS device, but this Deploy Preview link returns a 404 error. Additional note: #30 has been merged. |
Because the build script didn't exist on this branch. I have just merged |
YDX-2147483647
changed the title
There was a problem hiding this comment.
Pull Request Overview
This PR improves the visual presentation of collapsible sections by hiding the default browser disclosure markers. The marker:hidden Tailwind CSS class is added to three <summary> elements that use custom chevron icons for disclosure indicators.
- Added
marker:hiddenclass to<summary>elements in collapsible details sections - Ensures only the custom
ChevronRightIconis visible, without browser default markers - Applied consistently across function examples and string value sections
Reviewed Changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| src/components/ui/FunctionParameters.tsx | Added marker:hidden to two <summary> elements (example folding and string values sections) to hide default disclosure markers |
| src/components/ui/FunctionDisplay.tsx | Added marker:hidden to the example folding <summary> element to hide default disclosure marker |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
2 participants
This PR fixes a compatibility issue on Safari.
We replace the default triangle marker with
<ChevronRightIcon/>for collapsible blocks (<details>/<summary>).On Firefox/Chrome,
<summary class="flex">will clear the default triangle marker.But on Safari, we have to add
marker:hidden. (Safari has another quirk. It usessummary::-webkit-details-markerinstead ofsummary::marker, but Tailwind CSS make it compatible for us.)Before:
After:
