diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Large_Expanded_Row.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Large_Expanded_Row.png
new file mode 100644
index 00000000000..60a489eb18e
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Large_Expanded_Row.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Large_Expanded_Row.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Large_Expanded_Row.png
new file mode 100644
index 00000000000..6f7b319e008
Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Large_Expanded_Row.png differ
diff --git a/packages/eui/changelogs/upcoming/9206.md b/packages/eui/changelogs/upcoming/9206.md
new file mode 100644
index 00000000000..499b7c691d7
--- /dev/null
+++ b/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
+
diff --git a/packages/eui/src/components/basic_table/basic_table.stories.tsx b/packages/eui/src/components/basic_table/basic_table.stories.tsx
index 5c8e98e9734..9f7b99b3d0f 100644
--- a/packages/eui/src/components/basic_table/basic_table.stories.tsx
+++ b/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,
diff --git a/packages/eui/src/components/table/table_row.styles.ts b/packages/eui/src/components/table/table_row.styles.ts
index 94f88f22bd7..31b876f9541 100644
--- a/packages/eui/src/components/table/table_row.styles.ts
+++ b/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%')}