[EuiTable] Fix mobile table row clip-path

packages/eui/changelogs/upcoming/9206.md

@@ -0,0 +1,4 @@
+**Bug fixes**
+
+- Fixed a visual bug in `EuiTable` where long table row content would be cut off on mobile screens
+

packages/eui/src/components/basic_table/basic_table.stories.tsx

@@ -7,6 +7,7 @@
  */
 
 import React, { useCallback, useEffect, useState } from 'react';
+import { css } from '@emotion/react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { faker } from '@faker-js/faker';
@@ -367,6 +368,32 @@ export const HighContrastMobile: Story = {
   },
 };
 
+export const LargeExpandedRow: Story = {
+  tags: ['vrt-only'],
+  args: {
+    tableCaption: 'EuiBasicTable playground',
+    items: users,
+    itemId: 'id',
+    rowHeader: 'firstName',
+    columns,
+    css: css`
+      margin-block-start: -300px;
+    `,
+    itemIdToExpandedRowMap: {
+      1: (
+        <div
+          css={css`
+            block-size: 100vh;
+          `}
+        >
+          <strong>Expanded row 1</strong>
+          <p>lorem ipsum dolor sit</p>
+        </div>
+      ),
+    },
+  },
+};
+
 const StatefulPlayground = ({
   items,
   pagination,

packages/eui/src/components/table/table_row.styles.ts

@@ -159,9 +159,9 @@ export const euiTableRowStyles = (euiThemeContext: UseEuiTheme) => {
           ${logicalCSS('border-top', 'none')}
         }
 
-        /* prevent the shadow from overlapping;
+        /* prevent the shadow from overlapping; uses 150% to add buffer for overflowing content
         NOTE: we might want to consider refactoring tables to use tbody grouping to apply styles for a row group */
-        clip-path: polygon(-50% 0, 150% 0, 150% 100vh, -50% 100vh);
+        clip-path: polygon(-50% 0, 150% 0, 150% 150%, -50% 150%);
 
         > .euiTableRowCell {
           ${logicalCSS('width', '100%')}