fix(table): prevent unnecessary scrollbar in table body

[noyshlomo]

User description

This PR fixes an issue where the table body always displayed a vertical scrollbar, even when there was no overflow content.

• Changed .tableBody height from 100% to calc(100% - var(--table-row-size))

• This adjustment ensures the table body height accounts for the header row and only shows the scrollbar when needed

• Tested locally in Storybook to confirm that the scrollbar now only appears when the content exceeds the available space

• I have read the Contribution Guide for this project.

Resolves #3127

---

PR Type

Bug fix

---

Description

• Fixed unnecessary vertical scrollbar in table body

• Adjusted height calculation to account for header row

• Scrollbar now only appears when content overflows

---

Diagram Walkthrough

flowchart LR
  A["Table Container"] --> B["Header Row"]
  A --> C["Table Body"]
  B -- "var(--table-row-size)" --> D["Height Calculation"]
  D --> C
  C --> E["Conditional Scrollbar"]

Loading

File Walkthrough

	Relevant files
Bug fix	TableBody.module.scss Fix table body height calculation                                                packages/core/src/components/Table/TableBody/TableBody.module.scss Changed height from 100% to calc(100% - var(--table-row-size)) Prevents unnecessary scrollbar when no overflow exists +2/-2

---

[qodo-free-for-open-source-projects]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

🎫 Ticket compliance analysis 🔶 3127 - Partially compliant Compliant requirements: Fix table body to avoid unnecessary scrollbar when all rows fit Account for header height in body height calculation Non-compliant requirements: Verify behavior in examples where the container height is greater than content height (requires broader testing across sizes and variants) Requires further human verification: Visual verification across different table sizes, densities, and themes to ensure no regressions (e.g., sticky header, virtualized rows, zebra stripes). Cross-browser testing (Chrome, Firefox, Safari, Edge) to confirm calc and CSS var behave consistently. Confirm behavior when no header is rendered or when multi-header rows exist.

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Possible Regression The new height calculation assumes a single header row height equals var(--table-row-size). Verify behavior with variable header heights, multiple header rows, or when header size differs from row size. .tableBody { height: calc(100% - var(--table-row-size)); } Layout Assumption The table container must have a definite height for calc(100% - var(--table-row-size)) to compute correctly; confirm no cases where 100% is undefined, which could collapse the body. .tableBody { height: calc(100% - var(--table-row-size)); }