[EuiTable] Fix mobile table row `clip-path` #9206

mgadewoll · 2025-11-11T16:24:48Z

Summary

This PR is a follow-up to #9115

The previously added clip-path styling to prevent overlapping shadows added a height of 100vh which would result in clipping of content that's larger than 100vh.

Instead we need to use relative heights based on the container. 100% would ensure the container is as large as the content, but does not include outside content. Instead we're updating to 150% to ensure we're adding buffer space for any overflowing or otherwise outside content (e.g. shadows).

Why are we making this change?

🐛 Visual bug fix: Large table row content would be cut of on mobile screens.

Screenshots #

before	after

Impact to users

🟢 There are no updates needed on consumer side.

QA

🧪 Testing Story

verify that long table row content is not cut off
verify that shadows and floating borders (dark mode) are displayed correctly
verify there is no unexpected regression between production and this PR

General checklist

Browser QA
- Checked in both light and dark modes
- Checked in both MacOS and Windows high contrast modes
  - (emulate forced colors if you do not have access to a Windows machine.)
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- Checked for accessibility including keyboard-only and screenreader modes
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- Checked Code Sandbox works for any docs examples
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately
- If applicable, added the breaking change issue label (and filled out the breaking change checklist)
- If the changes unblock an issue in a different repo, smoke tested carefully (see Testing EUI features in Kibana ahead of time)
Designer checklist
- If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

- 100vh would clip for content that's heighter than the viewport. instead we need to use min 100%; we're using 150% to ensure there is a buffer for e.g. the shadow and overflowing content

elasticmachine · 2025-11-11T16:44:16Z

💚 Build Succeeded

cc @mgadewoll

dfvalero

Thanks for the fix!

weronikaolejniczak

LGTM! Thanks for addressing it so quickly, Lene 🙏🏻

elasticmachine · 2025-11-11T16:59:39Z

💚 Build Succeeded

Buildkite Build
Commit: 6e2613e

cc @mgadewoll

- `@elastic/eui`: `v109.0.0` ⏩ `v109.1.0` - `@elastic/eslint-plugin-eui`: `v2.5.0` ⏩ `v2.6.0` --- ## Changes - Updated i18n EUI mapping 6cc95b0 - Updated test in Unified Search 668948f ## Package updates ### `@elastic/eui` [`v109.1.0`](https://github.com/elastic/eui/releases/v109.1.0) - Added `--euiBottomBarOffset` CSS variable to `EuiBottomBar` for positioning other fixed elements relative to the bottom bar's height ([#9211](elastic/eui#9211)) - Updated `boxesVertical` icon and restored `checkInCircleFilled`, `errorFilled`, and `warningFilled` icons. ([#9194](elastic/eui#9194)) - Updated `EuiSuperDatePicker` with new time zone information, opt-in via `timeZoneDisplayProps`. ([#9191](elastic/eui#9191)) - Updated the position of `EuiModal` by removing bottom padding in `EuiOverlayMask` ([#9190](elastic/eui#9190)) - Added `EuiPopover` and `EuiToolTip`'s `repositionOnScroll` to `componentDefaults` ([#9152](elastic/eui#9152)) - Updated `EuiSuperDatePicker` with new time window buttons for time shifting and zoom out, opt-in via `showTimeWindowButtons` boolean prop. ([#9151](elastic/eui#9151)) - Added beta prop `hasAriaDisabled` to all base button components: `EuiButton`, `EuiButtonEmpty`, `EuiButtonIcon`, `EuibuttonGroup`, `EuiFilterButton` ([#9201](elastic/eui#9201)) - Added `euiDisabledSelector` variable that combines CSS selectors `:disabled` and `[aria-disabled="true"]` ([#9201](elastic/eui#9201)) - Added custom test matchers that check for both `disabled` and `aria-disabled` attributes: ([#9201](elastic/eui#9201)) - React testing Library: `.toBeEuiDisabled()` - Enzyme: `.toHaveEuiDisabledProp()` - Cypress: `should('be.euiDisabled)` **Bug fixes** - Fixed unexpected duplicate columns in `EuiDataGrid` crashing the column sorting by removing duplicate columns entirely ([#9209](elastic/eui#9209)) - Fixed a visual bug in `EuiTable` where long table row content would be cut off on mobile screens ([#9206](elastic/eui#9206)) - Fixed virtualized `EuiCodeBlock` rendering blank lines when content updates if scrolled. ([#9196](elastic/eui#9196)) - Fixed `EuiButtonGroup` button sizing to ensure square buttons when used with `isIconOnly=true` ([#9170](elastic/eui#9170)) **Accessibility** - Fixed an issue where portalled components like `EuiPopover` were not included in `EuiFlyout`'s focus trap through `includeSelectorInFocusTrap`, making them inaccessible to keyboard users ([#9103](elastic/eui#9103)) ### `@elastic/eslint-plugin-eui` [`v2.6.0`](https://github.com/elastic/eui/blob/main/packages/eslint-plugin/changelogs/CHANGELOG_2025.md#v260) - Added new `require-table-caption` rule. ([#9168](elastic/eui#9168)) --------- Co-authored-by: Elastic Machine <[email protected]>

- `@elastic/eui`: `v109.0.0` ⏩ `v109.1.0` - `@elastic/eslint-plugin-eui`: `v2.5.0` ⏩ `v2.6.0` --- ## Changes - Updated i18n EUI mapping 6cc95b0 - Updated test in Unified Search 668948f ## Package updates ### `@elastic/eui` [`v109.1.0`](https://github.com/elastic/eui/releases/v109.1.0) - Added `--euiBottomBarOffset` CSS variable to `EuiBottomBar` for positioning other fixed elements relative to the bottom bar's height ([elastic#9211](elastic/eui#9211)) - Updated `boxesVertical` icon and restored `checkInCircleFilled`, `errorFilled`, and `warningFilled` icons. ([elastic#9194](elastic/eui#9194)) - Updated `EuiSuperDatePicker` with new time zone information, opt-in via `timeZoneDisplayProps`. ([elastic#9191](elastic/eui#9191)) - Updated the position of `EuiModal` by removing bottom padding in `EuiOverlayMask` ([elastic#9190](elastic/eui#9190)) - Added `EuiPopover` and `EuiToolTip`'s `repositionOnScroll` to `componentDefaults` ([elastic#9152](elastic/eui#9152)) - Updated `EuiSuperDatePicker` with new time window buttons for time shifting and zoom out, opt-in via `showTimeWindowButtons` boolean prop. ([elastic#9151](elastic/eui#9151)) - Added beta prop `hasAriaDisabled` to all base button components: `EuiButton`, `EuiButtonEmpty`, `EuiButtonIcon`, `EuibuttonGroup`, `EuiFilterButton` ([elastic#9201](elastic/eui#9201)) - Added `euiDisabledSelector` variable that combines CSS selectors `:disabled` and `[aria-disabled="true"]` ([elastic#9201](elastic/eui#9201)) - Added custom test matchers that check for both `disabled` and `aria-disabled` attributes: ([elastic#9201](elastic/eui#9201)) - React testing Library: `.toBeEuiDisabled()` - Enzyme: `.toHaveEuiDisabledProp()` - Cypress: `should('be.euiDisabled)` **Bug fixes** - Fixed unexpected duplicate columns in `EuiDataGrid` crashing the column sorting by removing duplicate columns entirely ([elastic#9209](elastic/eui#9209)) - Fixed a visual bug in `EuiTable` where long table row content would be cut off on mobile screens ([elastic#9206](elastic/eui#9206)) - Fixed virtualized `EuiCodeBlock` rendering blank lines when content updates if scrolled. ([elastic#9196](elastic/eui#9196)) - Fixed `EuiButtonGroup` button sizing to ensure square buttons when used with `isIconOnly=true` ([elastic#9170](elastic/eui#9170)) **Accessibility** - Fixed an issue where portalled components like `EuiPopover` were not included in `EuiFlyout`'s focus trap through `includeSelectorInFocusTrap`, making them inaccessible to keyboard users ([elastic#9103](elastic/eui#9103)) ### `@elastic/eslint-plugin-eui` [`v2.6.0`](https://github.com/elastic/eui/blob/main/packages/eslint-plugin/changelogs/CHANGELOG_2025.md#v260) - Added new `require-table-caption` rule. ([elastic#9168](elastic/eui#9168)) --------- Co-authored-by: Elastic Machine <[email protected]>

mgadewoll added 2 commits November 11, 2025 17:18

test(VRT): add regression story and VRT images (before state)

94d9e21

fix: update table row clip-path styling

9d0a667

- 100vh would clip for content that's heighter than the viewport. instead we need to use min 100%; we're using 150% to ensure there is a buffer for e.g. the shadow and overflowing content

mgadewoll self-assigned this Nov 11, 2025

mgadewoll changed the title ~~[EuiBasicTable] Fix mobile table row clip-path~~ [EuiTable] Fix mobile table row clip-path Nov 11, 2025

chore: add changelog

6e2613e

mgadewoll marked this pull request as ready for review November 11, 2025 16:50

mgadewoll requested a review from a team as a code owner November 11, 2025 16:50

dfvalero approved these changes Nov 11, 2025

View reviewed changes

weronikaolejniczak approved these changes Nov 11, 2025

View reviewed changes

mgadewoll merged commit 6c3c997 into elastic:main Nov 11, 2025
10 checks passed

acstll mentioned this pull request Nov 17, 2025

Update EUI to v109.1.0 elastic/kibana#243270

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[EuiTable] Fix mobile table row `clip-path` #9206

[EuiTable] Fix mobile table row `clip-path` #9206

Uh oh!

mgadewoll commented Nov 11, 2025 •

edited

Loading

Uh oh!

elasticmachine commented Nov 11, 2025

Uh oh!

dfvalero left a comment

Uh oh!

weronikaolejniczak left a comment

Uh oh!

elasticmachine commented Nov 11, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

[EuiTable] Fix mobile table row clip-path #9206

[EuiTable] Fix mobile table row clip-path #9206

Uh oh!

Conversation

mgadewoll commented Nov 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why are we making this change?

Screenshots #

Impact to users

QA

General checklist

Uh oh!

elasticmachine commented Nov 11, 2025

💚 Build Succeeded

Uh oh!

dfvalero left a comment

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak left a comment

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Nov 11, 2025

💚 Build Succeeded

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

[EuiTable] Fix mobile table row `clip-path` #9206

[EuiTable] Fix mobile table row `clip-path` #9206

mgadewoll commented Nov 11, 2025 •

edited

Loading