fix: scrollbar select widgets style by sebastianiv21 · Pull Request #41656 · appsmithorg/appsmith

sebastianiv21 · 2026-03-25T19:54:41Z

Description

Tip

Add a TL;DR when the description is longer than 500 words or extremely technical (helps the content, marketing, and DevRel team).

Please also include relevant motivation and context. List any dependencies that are required for this change. Add links to Notion, Figma or any other documents that might be relevant to the PR.

Dropdown lists in Select, Multi-select, and Tree Select widgets now use clearer, more consistent scrollbars. We fixed cases where list content could show through the scrollbar area, aligned scrollbar styling across these widgets, and tuned appearance (thickness, color, spacing) so long option lists look cleaner and more in line with the rest of the product. Existing apps get the updated look automatically; no migration or new settings are required.

Fixes #Issue Number
or
Fixes https://github.com/appsmithorg/appsmith-ee/issues/8816

Warning

If no issue exists, please create an issue first, and check with the maintainers if the issue is valid.

Automation

/ok-to-test tags="@tag.Visual"

🔍 Cypress test results

Tip

🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/23662408398
Commit: af1564f
Cypress dashboard.
Tags: @tag.Visual
Spec:

Fri, 27 Mar 2026 19:18:35 UTC

Communication

Should the DevRel and Marketing teams inform users about this change?

Yes
No

Summary by CodeRabbit

Style
- Standardized dropdown list item height across select and tree-select widgets for consistent spacing.
- Applied uniform dropdown sizing to single-, multi- and tree-select controls for predictable behavior.
- Improved and unified virtual-list scrollbar styling in dropdown menus for better visual consistency and usability.

- Introduced a new constant `SELECT_DROPDOWN_LIST_ITEM_HEIGHT_PX` for consistent row height in dropdowns. - Updated multiple components to utilize the new constant for list item height. - Added custom scrollbar styles for virtual lists to enhance UI consistency across select components. This change improves the visual consistency of dropdowns and enhances user experience by ensuring proper scrollbar visibility.

Items were extending full-width under the absolutely-positioned custom scrollbar, causing row backgrounds to bleed through the track. Add padding-right to holder-inner so items stop short of the scrollbar. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…nsistency - Introduced a constant for scrollbar thumb dimensions to standardize styling. - Refactored scrollbar styles to utilize a base style for both vertical and horizontal scrollbars, ensuring consistent appearance across components. - Improved visibility and aesthetics of custom scrollbars in the rc-virtual-list and tree-select components. This change enhances the user experience by providing a more cohesive look and feel for dropdowns and selection widgets.

coderabbitai · 2026-03-25T19:55:13Z

Walkthrough

Added exported constant SELECT_DROPDOWN_LIST_ITEM_HEIGHT_PX = 38 and new RcVirtualListScrollbarStyles; applied the scrollbar CSS and the shared list-item height to Select/TreeSelect dropdowns across multi/single select widgets.

Changes

Cohort / File(s)	Summary
Constants `app/client/src/components/constants.ts`	Added exported `SELECT_DROPDOWN_LIST_ITEM_HEIGHT_PX = 38` for dropdown list item sizing.
Scrollbar styles (definition) `app/client/src/widgets/MultiSelectWidgetV2/component/index.styled.tsx`	Added and exported `RcVirtualListScrollbarStyles` — CSS overrides for `rc-virtual-list` / `rc-tree-select` scrollbars (track sizing, thumb color/shape, box-sizing, gutters).
Scrollbar styles (integration) `app/client/src/widgets/MultiSelectWidget/component/index.styled.tsx`, `app/client/src/widgets/MultiSelectTreeWidget/component/index.styled.tsx`, `app/client/src/widgets/SingleSelectTreeWidget/component/index.styled.tsx`	Imported `RcVirtualListScrollbarStyles` and injected it into dropdown/global style blocks so virtual-list scrollbars receive the new styling across widgets.
MultiSelect components (props) `app/client/src/widgets/MultiSelectWidget/component/index.tsx`, `app/client/src/widgets/MultiSelectWidgetV2/component/index.tsx`	Imported `SELECT_DROPDOWN_LIST_ITEM_HEIGHT_PX`; passed `listItemHeight={SELECT_DROPDOWN_LIST_ITEM_HEIGHT_PX}` and retained `listHeight={300}` on `Select`.
TreeSelect components (props) `app/client/src/widgets/MultiSelectTreeWidget/component/index.tsx`, `app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx`	Imported `SELECT_DROPDOWN_LIST_ITEM_HEIGHT_PX` and passed it as `listItemHeight` to `TreeSelect` instances to standardize item height.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

📏 A tidy height for each dropdown line,
🧭 Scrollbars tuned so the edges align,
🌲 Multi and single now share the same beat,
🎨 Small exports, shared styles — UI looks neat!

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ 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%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix: scrollbar select widgets style' directly and clearly summarizes the main change—styling improvements to scrollbars in select widgets across the codebase.
Description check	✅ Passed	The PR description addresses the template's main sections: it clearly describes changes (scrollbar styling improvements), includes the issue reference, provides automation/test confirmation, and specifies DevRel communication choice.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch styles/scrollbar-select-widgets

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

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@app/client/src/widgets/MultiSelectWidgetV2/component/index.styled.tsx`:
- Around line 130-133: The selectors .rc-virtual-list-holder-inner and
.rc-tree-select-tree-list-holder-inner use the physical property padding-right
which misaligns the logical scrollbar thumb in RTL; change that declaration to
use the logical property padding-inline-end: 10px so the gutter reserves space
at the logical end (matching inset-inline-end/inset-inline-start used elsewhere)
and prevents option backgrounds from rendering under the scrollbar.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: db1e0fd7-7f27-48cd-889a-40623938ebc9

📥 Commits

Reviewing files that changed from the base of the PR and between 089d24f and 754961f.

📒 Files selected for processing (9)

app/client/src/components/constants.ts
app/client/src/widgets/MultiSelectTreeWidget/component/index.styled.tsx
app/client/src/widgets/MultiSelectTreeWidget/component/index.tsx
app/client/src/widgets/MultiSelectWidget/component/index.styled.tsx
app/client/src/widgets/MultiSelectWidget/component/index.tsx
app/client/src/widgets/MultiSelectWidgetV2/component/index.styled.tsx
app/client/src/widgets/MultiSelectWidgetV2/component/index.tsx
app/client/src/widgets/SingleSelectTreeWidget/component/index.styled.tsx
app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx

app/client/src/widgets/MultiSelectWidgetV2/component/index.styled.tsx

Changed `padding-right` to `padding-inline-end` in the scrollbar styles for the rc-virtual-list and tree-select components to enhance layout consistency across different screen sizes and improve overall UI appearance.

sebastianiv21 · 2026-03-25T20:16:20Z

/build-deploy-preview skip-tests=true

github-actions · 2026-03-25T20:16:46Z

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/23561998021.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 41656.
recreate: .
base-image-tag: .

coderabbitai · 2026-03-25T20:23:58Z

Caution

Review failed

An error occurred during the review process. Please try again later.

Walkthrough

Added a shared constant SELECT_DROPDOWN_LIST_ITEM_HEIGHT_PX (38px) and introduced RcVirtualListScrollbarStyles; applied the scrollbar styles and the shared list-item height to multiple Select/TreeSelect dropdown components for consistent sizing and scrollbar presentation.

Changes

Cohort / File(s)	Summary
Constants `app/client/src/components/constants.ts`	Added exported `SELECT_DROPDOWN_LIST_ITEM_HEIGHT_PX = 38` for dropdown list item sizing.
MultiSelect / MultiSelectV2 components `app/client/src/widgets/MultiSelectWidget/component/index.tsx`, `app/client/src/widgets/MultiSelectWidgetV2/component/index.tsx`	Imported `SELECT_DROPDOWN_LIST_ITEM_HEIGHT_PX` and passed it as `listItemHeight` (also `listHeight` set to 300) to `Select` to standardize item sizing.
TreeSelect components `app/client/src/widgets/MultiSelectTreeWidget/component/index.tsx`, `app/client/src/widgets/SingleSelectTreeWidget/component/index.tsx`	Imported `SELECT_DROPDOWN_LIST_ITEM_HEIGHT_PX` and passed it as `listItemHeight` to `TreeSelect` instances to match MultiSelect sizing.
Scrollbar styles (definition) `app/client/src/widgets/MultiSelectWidgetV2/component/index.styled.tsx`	Added and exported `RcVirtualListScrollbarStyles` with custom rules targeting `rc-virtual-list` / `rc-tree-select` scrollbars (track sizing, thumb color/shape, box-sizing).
Scrollbar styles (integration) `app/client/src/widgets/MultiSelectWidget/component/index.styled.tsx`, `app/client/src/widgets/MultiSelectTreeWidget/component/index.styled.tsx`, `app/client/src/widgets/SingleSelectTreeWidget/component/index.styled.tsx`	Imported `RcVirtualListScrollbarStyles` and injected it into dropdown/global style blocks so virtual-list scrollbars receive the new styling across widgets.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

📏 A tidy height for each dropdown line,
🧭 Scrollbars styled so the visuals align,
🌲 From multi to single, the rules all connect,
🎯 Small, shared changes—designs intersect!

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ 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%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix: scrollbar select widgets style' directly reflects the main change: updating scrollbar styling across Select, Multi-select, and Tree Select widgets.
Description check	✅ Passed	The description includes motivation (clearer, consistent scrollbars), context (fixes content showing through scrollbar, aligns styling), benefits (automatic for existing apps), and a reference to the related issue. All required template sections are present or appropriately filled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch styles/scrollbar-select-widgets

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

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions · 2026-03-25T20:27:50Z

Deploy-Preview-URL: https://ce-41656.dp.appsmith.com

…mponents Updated scrollbar dimensions and padding to enhance layout consistency and visual appeal. Introduced a constant for gutter width to ensure proper spacing when vertical scrollbars are present, improving overall user experience across selection widgets.

sebastianiv21 · 2026-03-27T18:55:43Z

/build-deploy-preview skip-tests=true

github-actions · 2026-03-27T18:56:11Z

Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/23662583812.
Workflow: On demand build Docker image and deploy preview.
skip-tests: true.
env: ``.
PR: 41656.
recreate: .
base-image-tag: .

github-actions · 2026-03-27T19:06:41Z

Deploy-Preview-URL: https://ce-41656.dp.appsmith.com

sebastianiv21 and others added 3 commits March 25, 2026 09:37

sebastianiv21 changed the title ~~Styles/scrollbar select widgets~~ styles: scrollbar select widgets Mar 25, 2026

sebastianiv21 added the ok-to-test Required label for CI label Mar 25, 2026

Merge branch 'release' into styles/scrollbar-select-widgets

8bb5bb1

sebastianiv21 changed the title ~~styles: scrollbar select widgets~~ fix: scrollbar select widgets style Mar 25, 2026

sebastianiv21 requested review from sondermanish and subrata71 March 25, 2026 19:59

github-actions bot added the Bug Something isn't working label Mar 25, 2026

coderabbitai bot reviewed Mar 25, 2026

View reviewed changes

app/client/src/widgets/MultiSelectWidgetV2/component/index.styled.tsx Show resolved Hide resolved

style: update scrollbar padding for improved layout consistency

11c959d

Changed `padding-right` to `padding-inline-end` in the scrollbar styles for the rc-virtual-list and tree-select components to enhance layout consistency across different screen sizes and improve overall UI appearance.

sebastianiv21 and others added 3 commits March 26, 2026 17:50

Merge branch 'release' into styles/scrollbar-select-widgets

44521df

Merge branch 'release' into styles/scrollbar-select-widgets

af1564f

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: scrollbar select widgets style#41656

fix: scrollbar select widgets style#41656
sebastianiv21 wants to merge 8 commits intoreleasefrom
styles/scrollbar-select-widgets

sebastianiv21 commented Mar 25, 2026 •

edited by github-actions bot

Loading

Uh oh!

coderabbitai bot commented Mar 25, 2026 •

edited

Loading

❌ Failed checks (1 warning)

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

sebastianiv21 commented Mar 25, 2026

Uh oh!

github-actions bot commented Mar 25, 2026

Uh oh!

coderabbitai bot commented Mar 25, 2026

Review failed

❌ Failed checks (1 warning)

Uh oh!

github-actions bot commented Mar 25, 2026

Uh oh!

sebastianiv21 commented Mar 27, 2026

Uh oh!

github-actions bot commented Mar 27, 2026

Uh oh!

github-actions bot commented Mar 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

sebastianiv21 commented Mar 25, 2026 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Automation

🔍 Cypress test results

Communication

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

❌ Failed checks (1 warning)

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

sebastianiv21 commented Mar 25, 2026

Uh oh!

github-actions bot commented Mar 25, 2026

Uh oh!

coderabbitai bot commented Mar 25, 2026

Review failed

Walkthrough

Changes

Estimated code review effort

Poem

❌ Failed checks (1 warning)

Uh oh!

github-actions bot commented Mar 25, 2026

Uh oh!

sebastianiv21 commented Mar 27, 2026

Uh oh!

github-actions bot commented Mar 27, 2026

Uh oh!

github-actions bot commented Mar 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

sebastianiv21 commented Mar 25, 2026 •

edited by github-actions bot

Loading

coderabbitai bot commented Mar 25, 2026 •

edited

Loading