style(scroll-bar): align design

[lyzno1]

Important

1. Make sure you have read our contribution guidelines
2. Ensure there is an associated issue and you have been assigned to it
3. Use the correct syntax to link this PR: Fixes #<issue number>.

Summary

Screenshots

Before	After
...	...

Checklist

• This change requires a documentation update, included: Dify Document
• I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!)
• I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change.
• I've updated the documentation accordingly.
• I ran make lint and make type-check (backend) and cd web && npx lint-staged (frontend) to appease the lint gods

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request focuses on enhancing the user interface by updating the scrollbar component to match the latest Figma design. The changes involve introducing a new CSS module for styling, refining existing Tailwind CSS classes, and adding comprehensive Storybook examples to demonstrate the new scrollbar behaviors and appearances. This ensures a consistent and polished look across the application's scrollable areas.

Highlights

• Scrollbar Design Alignment: The scrollbar component's styling has been updated to align with the Figma design specifications, introducing a more refined visual appearance.
• New CSS Module for Scrollbars: A dedicated CSS module has been added to manage scrollbar styles, enabling more granular control over their appearance, including edge hints and active states.
• Enhanced Storybook Coverage: New Storybook stories have been introduced to showcase various scrollbar states (top, middle, bottom, and horizontal) for easier review and development.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[Copilot]

Pull request overview

Aligns the ScrollArea scrollbar styling with the Figma design and adds Storybook stories to review scrollbar behavior/states (including edge hints).

Changes:

• Moved parts of scrollbar/thumb styling into a CSS module to support edge-hint pseudo elements and active-state styling.
• Updated scrollbar/thumb Tailwind class composition (e.g., padding/overflow, always-visible opacity).
• Added a dedicated Storybook “delivery review” story to inspect vertical/horizontal scrollbar states.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
web/app/components/base/ui/scroll-area/index.tsx	Applies CSS-module classes and updates scrollbar/thumb class composition for the new design.
web/app/components/base/ui/scroll-area/index.module.css	Introduces edge-hint pseudo elements + active thumb styling via CSS variables.
web/app/components/base/ui/scroll-area/index.stories.tsx	Adds showcase stories/panes to inspect scrollbar visuals in multiple states.
web/app/components/base/ui/scroll-area/tests/index.spec.tsx	Updates assertions to match the new composed class names.

---

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

[gemini-code-assist]

Code Review

This pull request effectively updates the scrollbar component's styling to align with a new design, introducing a CSS module for more complex styles and adding comprehensive Storybook stories to showcase the new behavior. The changes are well-implemented across the component, its tests, and stories. I've provided a couple of suggestions to improve CSS selector scoping for robustness and to align with idiomatic React practices in the new Storybook file.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 77.10%. Comparing base (7019395) to head (ba7f636).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #33751      +/-   ##
==========================================
- Coverage   77.10%   77.10%   -0.01%     
==========================================
  Files        4356     4356              
  Lines      175221   175221              
  Branches    33475    33475              
==========================================
- Hits       135110   135108       -2     
- Misses      36863    36865       +2     
  Partials     3248     3248              

Flag	Coverage Δ
web	77.86% <ø> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

Pull request overview

Updates the shared ScrollArea UI primitive to better match the intended scrollbar/edge-hint styling from design, and adds Storybook coverage to review scrollbar behavior across key states.

Changes:

• Refactors default scrollbar/thumb classnames to incorporate a CSS module for edge hints and active thumb styling.
• Adds a dedicated Storybook story to inspect vertical edge-hint states (top/middle/bottom) plus a horizontal reference pane.
• Updates existing unit tests to assert the new CSS module classes and updated default utility classes.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
web/app/components/base/ui/scroll-area/index.tsx	Applies new default scrollbar/thumb styling via CSS modules + updated utility classes.
web/app/components/base/ui/scroll-area/index.module.css	Introduces scrollbar edge-hint pseudo-elements and active-thumb styling.
web/app/components/base/ui/scroll-area/index.stories.tsx	Adds Storybook coverage for scrollbar delivery/state inspection (vertical + horizontal).
web/app/components/base/ui/scroll-area/tests/index.spec.tsx	Adjusts assertions to match the new default class composition (including CSS module classes).

---

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

[Copilot]

Pull request overview

Updates the ScrollArea wrapper styling to better align scrollbar visuals with the current design spec, including “edge hint” treatments and updated interaction styling, and adds Storybook coverage to review the new scrollbar delivery.

Changes:

• Apply a CSS-module driven scrollbar skin (edge hints + active-state thumb color handling).
• Update default scrollbar/thumb Tailwind class sets to match the new design behavior.
• Add a dedicated Storybook story to inspect scrollbar states (top/middle/bottom + horizontal), and update unit tests accordingly.

Reviewed changes

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

File	Description
web/app/components/base/ui/scroll-area/index.tsx	Adds CSS module class to the scrollbar and adjusts default scrollbar/thumb Tailwind classes.
web/app/components/base/ui/scroll-area/index.module.css	Introduces edge-hint gradients and interaction-state thumb background behavior via pseudo-elements/selectors.
web/app/components/base/ui/scroll-area/index.stories.tsx	Adds a “ScrollbarDelivery” story with panes that pin scroll position for visual inspection.
web/app/components/base/ui/scroll-area/tests/index.spec.tsx	Updates expectations for new classes and verifies the CSS module class is applied.

---

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