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

• Fix unnecessary scrollbar in table body by adjusting height calculation

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

• Scrollbar now only appears when content overflows available space

---

Diagram Walkthrough

flowchart LR
  A["TableBody height: 100%"] -- "adjust calculation" --> B["TableBody height: calc(100% - var(--table-row-size))"]
  B -- "result" --> C["Scrollbar only on overflow"]

Loading

File Walkthrough

	Relevant files
Bug fix	TableBody.module.scss Adjust table body height calculation                                          packages/core/src/components/Table/TableBody/TableBody.module.scss Changed .tableBody height from 100% to calc(100% - var(--table-row-size)) Accounts for header row height in calculation Prevents unnecessary scrollbar when content fits in available space +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)); }

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

Code Review by Qodo

🐞 Bugs (2) 📘 Rule violations (0) 📎 Requirement gaps (0)

Context used

✅ Tickets: 🎫 [Bug]: wrong table height

1. Headerless TableBody shrinks 🐞 Bug ≡ Correctness

Description

TableBody.module.scss now always sets height: calc(100% - var(--table-row-size)), so when a
<Table /> is rendered without a <TableHeader /> the body becomes shorter than the table
container by one row height. This can break headerless tables (including loading/empty/error cases)
by leaving unused space and altering expected full-height body rendering.

Code

packages/core/src/components/Table/TableBody/TableBody.module.scss[2]

Evidence

The Table API and tests show headerless tables are supported, but the new unconditional subtraction
uses --table-row-size even when no header is rendered, reducing body height in those supported
configurations.

packages/core/src/components/Table/Table/Table.tsx[83-89]
packages/core/src/components/Table/Table/tests/Table.test.tsx[102-112]
packages/core/src/components/Table/Table/tests/Table.test.tsx[156-205]
packages/core/src/components/Table/TableVirtualizedBody/TableVirtualizedBody.module.scss[3-15]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
`TableBody` height always subtracts `--table-row-size`, but `<Table>` supports being rendered without `<TableHeader>`, so the body should only subtract the header height when a header is actually present.

## Issue Context
- `--table-row-size` is always provided by `Table`, independent of whether a header is rendered.
- There are existing code paths/tests that render `<Table>` with only `<TableBody>`.

## Fix approach (recommended)
1. Compute `hasHeader` in `Table.tsx` by inspecting `children`.
2. Expose a CSS variable like `--table-header-height` set to either `RowHeights[size]px` when `hasHeader` is true, or `0px` otherwise.
3. Update `TableBody.module.scss` to use `calc(100% - var(--table-header-height))` (or `var(--table-header-height, 0px)` as a fallback).

## Fix Focus Areas
- packages/core/src/components/Table/TableBody/TableBody.module.scss[1-3]
- packages/core/src/components/Table/Table/Table.tsx[83-89]
- packages/core/src/components/Table/Table/Table.tsx[148-156]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

2. Missing EOF newline 🐞 Bug ⚙ Maintainability

Description

TableBody.module.scss is missing a trailing newline, which can create noisy diffs and trigger
formatting/lint tooling issues.

Code

packages/core/src/components/Table/TableBody/TableBody.module.scss[R1-3]

Evidence

The PR diff explicitly indicates the file has no newline at end of file.

packages/core/src/components/Table/TableBody/TableBody.module.scss[1-3]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The SCSS file does not end with a newline (shown in the diff as `No newline at end of file`).

## Fix Focus Areas
- packages/core/src/components/Table/TableBody/TableBody.module.scss[1-3]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---