From 6037cfa46e409b3461faf85bb2226d42ce5ed64f Mon Sep 17 00:00:00 2001
From: sirineJ <112706079+sirineJ@users.noreply.github.com>
Date: Wed, 8 Jan 2025 10:18:22 +0100
Subject: [PATCH] fix scroll indicators

---
 .../SideNavigation/SideNavigation.tsx         |  6 ----
 .../MobileNavigation.module.css               | 29 ++++++++++++++++++-
 2 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/packages/circuit-ui/components/SideNavigation/SideNavigation.tsx b/packages/circuit-ui/components/SideNavigation/SideNavigation.tsx
index e880a8e5a1..e65888bf2b 100644
--- a/packages/circuit-ui/components/SideNavigation/SideNavigation.tsx
+++ b/packages/circuit-ui/components/SideNavigation/SideNavigation.tsx
@@ -54,12 +54,6 @@ export function SideNavigation({
     process.env.NODE_ENV !== 'production' &&
     process.env.NODE_ENV !== 'test'
   ) {
-    if (!isSufficientlyLabelled(closeButtonLabel)) {
-      throw new AccessibilityError(
-        'SideNavigation',
-        'The `closeButtonLabel` prop is missing or invalid.',
-      );
-    }
     if (!isSufficientlyLabelled(primaryNavigationLabel)) {
       throw new AccessibilityError(
         'SideNavigation',
diff --git a/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.module.css b/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.module.css
index 33c6dbc751..e0101573a2 100644
--- a/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.module.css
+++ b/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.module.css
@@ -2,11 +2,20 @@
   background: var(--cui-bg-normal);
 
   > div {
+    height: 100%;
     max-height: unset;
     padding: 0 !important;
   }
 }
 
+.base::after {
+  background: linear-gradient(
+    color-mix(in sRGB, var(--cui-bg-normal) 0%, transparent),
+    color-mix(in sRGB, var(--cui-bg-normal) 66%, transparent),
+    color-mix(in sRGB, var(--cui-bg-normal) 100%, transparent)
+  );
+}
+
 @media (min-width: 480px) {
   .base {
     width: 100vw;
@@ -23,7 +32,6 @@
 
   .base > div {
     max-width: 480px;
-    height: 100%;
     margin: 0 auto;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
@@ -31,8 +39,27 @@
 }
 
 .content {
+  height: 100%;
   padding-top: 56px;
   padding-bottom: calc(env(safe-area-inset-bottom) + var(--cui-spacings-tera));
+  overflow-y: auto;
+}
+
+.content::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 1;
+  width: 100%;
+  height: var(--cui-spacings-tera);
+  padding: var(--cui-spacings-bit);
+  content: "";
+  background: linear-gradient(
+    color-mix(in sRGB, var(--cui-bg-normal) 100%, transparent),
+    color-mix(in sRGB, var(--cui-bg-normal) 66%, transparent),
+    color-mix(in sRGB, var(--cui-bg-normal) 0%, transparent)
+  );
 }
 
 .list {