Skip to content

fix: make horizontal scroll bar thicker on tables #41370

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rahulbarwal merged 7 commits into from
Nov 20, 2025
Merged

fix: make horizontal scroll bar thicker on tables #41370

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0dd8df9
make horizontal scroll bar thicker on tables
salevine Nov 11, 2025
53ca1e3
Fix comment
salevine Nov 11, 2025
a3bb54a
Update to handle bottom cut off
salevine Nov 13, 2025
930f399
updates color to match the vertical width
rahulbarwal Nov 20, 2025
cc5a94d
Enhance scrollbar height calculation in table widget tests to account…
rahulbarwal Nov 20, 2025
643c92f
fixes unit test
rahulbarwal Nov 20, 2025
d4cdfb8
updates spec
rahulbarwal Nov 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions app/client/cypress/e2e/Regression/ClientSide/Widgets/TableV2/scrollbar_spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,10 @@ describe(
});

cy.get(".t--draggable-tablewidgetv2 .table .simplebar-content").then(
($scrollBox) =>
expect($scrollBox[0].clientHeight).to.be.equal(tableHeight),
($scrollBox) => {
// +2 is because of the SCROLL_BAR_OFFSET, which got added to the table height in PR: https://github.com/appsmithorg/appsmith/pull/41370
expect($scrollBox[0].clientHeight).to.be.equal(tableHeight + 2);
},
);
});
},
Expand Down
2 changes: 1 addition & 1 deletion app/client/src/widgets/TableWidgetV2/component/Constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -599,7 +599,7 @@ export enum AddNewRowActions {
export const EDITABLE_CELL_PADDING_OFFSET = 8;

export const TABLE_SCROLLBAR_WIDTH = 10;
export const TABLE_SCROLLBAR_HEIGHT = 8;
export const TABLE_SCROLLBAR_HEIGHT = 10;
Copy link
Contributor

@coderabbitai coderabbitai bot Nov 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

Verify all usages of TABLE_SCROLLBAR_HEIGHT have been updated.

The constant increase from 8 to 10 aligns with the PR objective. Ensure all dependent code accounts for this change, particularly any hardcoded calculations or CSS that might reference the old value.

Run the following script to identify any hardcoded references to the old value or other usages:

🏁 Script executed:

#!/bin/bash
# Search for hardcoded scrollbar height values that might need updating
rg -n --type ts --type tsx --type css -C3 '\b8px\b|\bheight:\s*8\b' app/client/src/widgets/TableWidgetV2/

# Search for all usages of TABLE_SCROLLBAR_HEIGHT to verify they handle the new value
rg -n --type ts --type tsx -C3 'TABLE_SCROLLBAR_HEIGHT' app/client/src/widgets/TableWidgetV2/

Length of output: 55

🏁 Script executed:

#!/bin/bash
# Find all ts/tsx files and search for hardcoded scrollbar heights
fd -e ts -e tsx 'TableWidgetV2' app/client/src/widgets/ | xargs rg -n '\b8px\b|\bheight:\s*8\b' -C3

# Search for all usages of TABLE_SCROLLBAR_HEIGHT across the entire codebase
rg -n 'TABLE_SCROLLBAR_HEIGHT' app/client/src/ -C2

# Also check if old value (8) appears in test files or specs
fd -e ts -e tsx -e spec 'test|spec' app/client/src/widgets/TableWidgetV2/ | xargs rg -n '\b8\b' -C2

Length of output: 263785

Update hardcoded scrollbar heights in TableStyledWrappers.tsx to match constant change.

The constant increase from 8 to 10 is incomplete. In app/client/src/widgets/TableWidgetV2/component/TableStyledWrappers.tsx, lines 71 and 76 contain hardcoded height: 8px; inside .simplebar-scrollbar selectors that should be updated to 10px to maintain visual consistency with the container height at line 68.

🤖 Prompt for AI Agents 
In app/client/src/widgets/TableWidgetV2/component/TableStyledWrappers.tsx around
lines 68–76, update the two hardcoded scrollbar heights (currently "height:
8px;" at lines 71 and 76 inside the .simplebar-scrollbar selectors) to "height:
10px;" so they match the TABLE_SCROLLBAR_HEIGHT constant change and the
container height defined at line 68; verify both selectors are updated to
maintain visual consistency.


export const POPOVER_ITEMS_TEXT_MAP = {
SORT_ASC: "Sort column ascending",
Expand Down
4 changes: 2 additions & 2 deletions app/client/src/widgets/TableWidgetV2/component/TableContext.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,7 +249,7 @@ describe("TableContext", () => {
.tableContext;

expect(context.scrollContainerStyles).toEqual({
height: 352, // 400 - 40 - 8 (height - TABLE_HEADER_HEIGHT - TABLE_SCROLLBAR_HEIGHT)
height: 350, // 400 - 40 - 10 (height - TABLE_HEADER_HEIGHT - TABLE_SCROLLBAR_HEIGHT)
width: 800,
});
});
Expand All @@ -267,7 +267,7 @@ describe("TableContext", () => {
.tableContext;

expect(context.scrollContainerStyles).toEqual({
height: 390, // 400 - 8 - 2 (height - TABLE_SCROLLBAR_HEIGHT - SCROLL_BAR_OFFSET)
height: 388, // 400 - 10 - 2 (height - TABLE_SCROLLBAR_HEIGHT - SCROLL_BAR_OFFSET)
width: 800,
});
});
Expand Down
6 changes: 4 additions & 2 deletions app/client/src/widgets/TableWidgetV2/component/TableStyledWrappers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,13 +64,15 @@ export const TableWrapper = styled.div<{
.simplebar-track {
opacity: 0.7;
&.simplebar-horizontal {
/* this height moves the scrollbar up and down */
height: ${TABLE_SCROLLBAR_HEIGHT}px;
.simplebar-scrollbar {
height: 5px;
/*this actual height of the scrollbar */
height: 8px;
}
&.simplebar-hover {
height: 10px;
& .simplebar-scrollbar {
transition: height 0.15s ease-in-out;
height: 8px;
}
}
Expand Down
Loading