💄 style(ui): fix scrollbar style declarations to apply -webkit-scrollbar pseud classes to Safari

[tnyo43]

Issue

• resolve:

Why is this change needed?

With The current application, the scrollbar style declarations are not applied in Safari.
This PR will fix scrollbar style declarations to apply -webkit-scrollbar pseude classes to Safari.

I also checked the style is applied properly in the latest Chrome and Firefox as like the before.

	before	after
TableDetail
CommandPalette

Summary by CodeRabbit

• Bug Fixes
  • Fixed scrollbar styling to display correctly across all browsers, including Safari

[giselles-ai]

Finished running flow.

Step 1
🟢	On Pull Request Opened Status: Success Updated: Nov 2, 2025 3:07am
Step 2
🟢	gpt-5 Status: Success Updated: Nov 2, 2025 3:08am
Step 3
🟢	Create Pull Request Comment Status: Success Updated: Nov 2, 2025 3:08am

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
liam-app	Ready	Preview	Comment	Nov 2, 2025 3:13am
liam-assets	Ready	Preview	Comment	Nov 2, 2025 3:13am
liam-erd-sample	Ready	Preview	Comment	Nov 2, 2025 3:13am
liam-storybook	Ready	Preview	Comment	Nov 2, 2025 3:13am

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
liam-docs	Ignored			Nov 2, 2025 3:13am

[coderabbitai]

Walkthrough

This PR adds a changeset file documenting a patch release for the UI package and updates global scrollbar styling to use feature detection with @supports, supporting both standard scrollbar properties and WebKit pseudo-elements for improved Safari compatibility.

Changes

Cohort / File(s)	Summary
Changeset entry .changeset/sweet-chicken-stay.md	Documents patch release for @liam-hq/ui with fix for scrollbar styles to enable ::-webkit-scrollbar pseudo-classes in Safari.
Scrollbar styling refactor frontend/packages/ui/src/styles/globals.css	Replaced universal scrollbar styling with feature-detect approach using @supports. Adds standard scrollbar-color/width branch for compatible browsers, WebKit pseudo-element branch for Safari with width, height, track, and thumb styling. Includes hover state and clarifying comments on property precedence.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Straightforward feature detection implementation with clear separation of standard vs. WebKit fallback paths
• CSS-only changes with good inline documentation
• Verify that both feature-detect branches render correctly across target browsers (particularly Safari and standard-compliant browsers)

Possibly related PRs

• 💄 Add consistent scrollbar styling across components #2670: Applies component-level scrollbar styling changes alongside this global feature-detect approach
• feat: add scrollbar design tokens to unify scrollbar styling #2605: Introduces scrollbar design tokens that complement this global styling refactor

Suggested labels

Review effort 2/5

Suggested reviewers

• hoshinotsuyoshi
• NoritakaIkeda
• MH4GF
• FunamaYukina

Poem

🐰 Scrollbars now dance with feature's grace,
Webkit and standards share the space,
Safari smiles at pseudo-classes found,
With @supports guards, smooth styling's bound! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The PR title "💄 style(ui): fix scrollbar style declarations to apply -webkit-scrollbar pseud classes to Safari" is directly related to the main change in the pull request. The changeset and CSS modifications specifically address fixing scrollbar styles so that the -webkit-scrollbar pseudo-classes take effect in Safari, which is precisely what the title conveys. The title uses a conventional commit format with appropriate scope and is sufficiently clear and specific for a teammate to understand the primary change when scanning commit history. Note: there is a minor typo ("pseud" instead of "pseudo"), but this does not affect the overall clarity or accuracy of the description.
Description Check	✅ Passed	The pull request description follows the required template structure with both specified sections present: "Issue" and "Why is this change needed?". The "Why is this change needed?" section is well-populated with a clear explanation of the problem (scrollbar styles not applying in Safari), the solution (implementing -webkit-scrollbar pseudo-classes), and comprehensive verification evidence including before/after screenshots across TableDetail and CommandPalette components, plus confirmation of compatibility with Chrome and Firefox. However, the "Issue" section's "resolve:" field is incomplete, containing only the label without an issue reference or number. Since the primary explanation and rationale are thoroughly documented with visual proof, and the incomplete issue reference is a secondary metadata field rather than critical context, the description provides sufficient clarity for the change.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch style/scrollbar-in-safari

---

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.}

[supabase]

Updates to Preview Branch (style/scrollbar-in-safari) ↗︎

Deployments	Status	Updated
Database	✅	Sun, 02 Nov 2025 03:09:32 UTC
Services	✅	Sun, 02 Nov 2025 03:09:32 UTC
APIs	✅	Sun, 02 Nov 2025 03:09:32 UTC

Tasks are run on every commit but only new migration files are pushed.
Close and reopen this PR if you want to apply changes from existing seed or migration files.

Tasks	Status	Updated
Configurations	✅	Sun, 02 Nov 2025 03:09:42 UTC
Migrations	✅	Sun, 02 Nov 2025 03:09:46 UTC
Seeding	✅	Sun, 02 Nov 2025 03:09:46 UTC
Edge Functions	✅	Sun, 02 Nov 2025 03:09:46 UTC

---

View logs for this Workflow Run ↗︎.
Learn more about Supabase for Git ↗︎.

[giselles-ai]

Check changeset necessity

Status:

• REQUIRED (already satisfied)

Reason:

• Affects @liam-hq/ui, which is a target package that requires a changeset for user-facing changes.
• The change is user-facing: scrollbar appearance/behavior is corrected in Safari.
• This is a bug fix (visual behavior), which qualifies for a patch release under the guide.
• A valid changeset file exists in this PR: .changeset/sweet-chicken-stay.md targeting @liam-hq/ui with patch.

Changeset (copy & paste):

---
"@liam-hq/ui": patch
---

- 💄 fix scrollbar styles so that ::-webkit-scrollbar pseudo classes take effect in Safari

[tnyo43]

I recommend to check the diff with by hiding white spaces

I basically follow this instruction.
Since the latest Safari (v26) supports scrollbar-width property, it prioritize the standard scrollbar styles when scrollbar-width has value other than auto and doesn't refer to -webkit-scrollbar-* pseuds classes. However, it doesn't support the scrollbar-color property yet, so scrollbars used to be displayed with the default color in Safari.

This PR will make the scrollbar-width property declaration be not applied in the Safari, so webkit-scrollbar-* pseud classes will be applied properly.

[tnyo43]

I actually found the other cases to be checked if scrollbar styles work properly from the change of this PR.
However, I'm not familiar with these features, so I appreciate if you would help me to check them 🙇

[MH4GF]

That was very educational. Thanks!