Skip to content

Conversation

@mgadewoll
Copy link
Contributor

@mgadewoll mgadewoll commented Nov 11, 2025

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
Screenshot 2025-11-11 at 17 23 45 Screenshot 2025-11-11 at 17 23 33

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
    • Checked in mobile
    • Checked in Chrome, Safari, Edge, and Firefox
    • Checked for accessibility including keyboard-only and screenreader modes
  • Docs site QA
  • Code quality checklist
  • 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
@mgadewoll mgadewoll self-assigned this Nov 11, 2025
@mgadewoll mgadewoll changed the title [EuiBasicTable] Fix mobile table row clip-path [EuiTable] Fix mobile table row clip-path Nov 11, 2025
@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

cc @mgadewoll

@mgadewoll mgadewoll marked this pull request as ready for review November 11, 2025 16:50
@mgadewoll mgadewoll requested a review from a team as a code owner November 11, 2025 16:50
Copy link
Contributor

@dfvalero dfvalero left a comment

Choose a reason for hiding this comment

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

Thanks for the fix!

Copy link
Contributor

@weronikaolejniczak weronikaolejniczak left a comment

Choose a reason for hiding this comment

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

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

@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

cc @mgadewoll

@mgadewoll mgadewoll merged commit 6c3c997 into elastic:main Nov 11, 2025
10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants