From 1b16fa0313cd83d53a9f6b4990a9995061ce5879 Mon Sep 17 00:00:00 2001
From: Constance <constancecchen@users.noreply.github.com>
Date: Wed, 16 Nov 2022 16:05:01 -0800
Subject: [PATCH] [Emotion] Fix overly large scroll shadow gradients (#6374)

* Fix overly large scroll shadow gradients

* changelog

* snapshots
---
 .../flyout/__snapshots__/flyout_body.test.tsx.snap        | 2 +-
 src/global_styling/mixins/_helpers.ts                     | 2 +-
 .../utility/__snapshots__/utility.test.tsx.snap           | 8 ++++----
 upcoming_changelogs/6374.md                               | 3 +++
 4 files changed, 9 insertions(+), 6 deletions(-)
 create mode 100644 upcoming_changelogs/6374.md

diff --git a/src/components/flyout/__snapshots__/flyout_body.test.tsx.snap b/src/components/flyout/__snapshots__/flyout_body.test.tsx.snap
index 21f973c4f0d..e3320aa1911 100644
--- a/src/components/flyout/__snapshots__/flyout_body.test.tsx.snap
+++ b/src/components/flyout/__snapshots__/flyout_body.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`EuiFlyoutBody is rendered 1`] = `
   data-test-subj="test subject string"
 >
   <div
-    class="euiFlyoutBody__overflow css-1fk8opf-noBanner"
+    class="euiFlyoutBody__overflow css-18yrfj9-noBanner"
     tabindex="0"
   >
     <div
diff --git a/src/global_styling/mixins/_helpers.ts b/src/global_styling/mixins/_helpers.ts
index c5829a646e0..72ffdb6f472 100644
--- a/src/global_styling/mixins/_helpers.ts
+++ b/src/global_styling/mixins/_helpers.ts
@@ -93,7 +93,7 @@ const euiOverflowShadowStyles = (
 ) => {
   const direction = _direction || 'y';
   const side = _side || 'both';
-  const hideHeight = `calc(${size.base} * 0.75 * 1.25)`;
+  const hideHeight = size.s;
   const gradientStart = `
   ${transparentize('red', 0.1)} 0%,
   ${transparentize('red', 1)} ${hideHeight}
diff --git a/src/global_styling/utility/__snapshots__/utility.test.tsx.snap b/src/global_styling/utility/__snapshots__/utility.test.tsx.snap
index 226a500895e..0e4d34bc34c 100644
--- a/src/global_styling/utility/__snapshots__/utility.test.tsx.snap
+++ b/src/global_styling/utility/__snapshots__/utility.test.tsx.snap
@@ -178,9 +178,9 @@ exports[`global utility styles generates static global styles 1`] = `
 
   mask-image: linear-gradient(to bottom, 
   rgba(255,0,0,0.1) 0%,
-  rgb(255,0,0) calc(16px * 0.75 * 1.25)
+  rgb(255,0,0) 8px
   , 
-  rgb(255,0,0) calc(100% - calc(16px * 0.75 * 1.25)),
+  rgb(255,0,0) calc(100% - 8px),
   rgba(255,0,0,0.1) 100%
   );
 ;}
@@ -217,9 +217,9 @@ exports[`global utility styles generates static global styles 1`] = `
 
   mask-image: linear-gradient(to right, 
   rgba(255,0,0,0.1) 0%,
-  rgb(255,0,0) calc(16px * 0.75 * 1.25)
+  rgb(255,0,0) 8px
   , 
-  rgb(255,0,0) calc(100% - calc(16px * 0.75 * 1.25)),
+  rgb(255,0,0) calc(100% - 8px),
   rgba(255,0,0,0.1) 100%
   );
 ;}[class*='eui-showFor']{display:none!important;}
diff --git a/upcoming_changelogs/6374.md b/upcoming_changelogs/6374.md
new file mode 100644
index 00000000000..68219ad555c
--- /dev/null
+++ b/upcoming_changelogs/6374.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed the shadow sizes of `.eui-yScrollWithShadows` and `.eui-xScrollWithShadows`