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/23917434698
Commit: b686ac6
Cypress dashboard.
Tags: @tag.Visual
Spec:

Thu, 02 Apr 2026 19:34:52 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 pull request description provides clear context on scrollbar styling improvements across Select/Multi-select/Tree Select widgets, references the GitHub issue, includes Cypress test results, and follows the template structure.

_{✏️ 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

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

The scrollbar styling PR (#41656) changed listItemHeight from the default 24px to 38px, reducing visible items in the rc-virtual-list from ~12 to ~8. Multiselect dropdowns with 10+ options now have items beyond the viewport that are not rendered in the DOM, causing Cypress tests to timeout when selecting them. Add scrollVirtualListToOption helper that programmatically scrolls the rc-virtual-list-holder until the target option appears in the DOM before checking/unchecking it. Short-circuits immediately if the option is already visible.

## Summary - Fix Cypress test failures in `Json_Spec.ts` (and any other spec using `SelectJsonFormMultiSelect`) caused by multiselect dropdown options beyond the virtual scroll viewport not being rendered in the DOM - Add `scrollVirtualListToOption` helper to `DeployModeHelper.ts` that scrolls the `rc-virtual-list-holder` container until the target option appears before checking/unchecking it ## Context [Slack thread](https://theappsmith.slack.com/archives/C09NG5BJ18S/p1775544003897439) PR #41656 (`fix: scrollbar select widgets style`) changed `listItemHeight` from the default 24px to 38px in the MultiSelect widget. This reduced the number of items rendered in the `rc-virtual-list` DOM from ~12 to ~8 (calculated as `listHeight(300) / listItemHeight(38) = 7.89`). The `genres` Postgres enum used by `Json_Spec.ts` has 11 values. Items 10 (`Reference`) and 11 (`Spirituality`) are now outside the virtual viewport and not in the DOM. The existing `SelectJsonFormMultiSelect` method does `cy.get(div[title='Reference'] input[type='checkbox'])` which times out after 30s because the element doesn't exist until scrolled into view. **Before**: `listItemHeight=24` → `300/24 = 12.5` items visible → all 11 genres in DOM **After**: `listItemHeight=38` → `300/38 = 7.89` items visible → only first ~8 genres in DOM ## Changes **File**: `app/client/cypress/support/Pages/DeployModeHelper.ts` - Added `scrollVirtualListToOption()` private method that programmatically scrolls the `rc-virtual-list-holder` in 100px increments until the target option element appears in the DOM - Short-circuits immediately if the option is already visible (no unnecessary scrolling for items within the viewport) - Applied to both the check and uncheck branches of `SelectJsonFormMultiSelect` Fixes https://linear.app/appsmith/issue/APP-15088/fix-multiselect-virtual-scroll-breaking-cypress-tests-after-scrollbar ## Test plan - [ ] Run `Json_Spec.ts` and verify tests 19 (`Reference`), 20 (`Spirituality`), and 21-23 pass - [ ] Verify tests 1-18 still pass (no regression for items already in viewport) - [ ] Verify other specs using `SelectJsonFormMultiSelect` are unaffected ## Automation /ok-to-test tags="@tag.Datasource" ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No  > [!TIP] > 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉 > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/24084898391> > Commit: f183546 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=24084898391&attempt=1" target="_blank">Cypress dashboard</a>. > Tags: `@tag.Datasource` > Spec: > <hr>Tue, 07 Apr 2026 14:47:17 UTC   ## Summary by CodeRabbit * **Tests** * Improved multiselect dropdown interaction tests by adding automatic scrolling for virtualized lists so options are reliably brought into view before selection actions. * Added a dedicated locator for virtual list containers to make tests more robust and reduce flakiness when interacting with offscreen items. * Enhanced wait/scroll logic to ensure selections succeed consistently across environments.

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

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

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

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

b686ac6

subrata71 approved these changes Apr 3, 2026

View reviewed changes

sebastianiv21 merged commit d9c5636 into release Apr 3, 2026
42 checks passed

sebastianiv21 deleted the styles/scrollbar-select-widgets branch April 3, 2026 15:18

subrata71 mentioned this pull request Apr 7, 2026

fix(test): handle virtual scroll in multiselect Cypress helper #41716

Merged

5 tasks

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 merged 9 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!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 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!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

sebastianiv21 commented Mar 25, 2026 •

edited by github-actions bot

Loading

coderabbitai bot commented Mar 25, 2026 •

edited

Loading