fix scroll indicators

sumup-oss · Jan 8, 2025 · 6037cfa · 6037cfa
1 parent bb0d81a
commit 6037cfa
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 7 deletions.
diff --git 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/...cuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.module.css b/...cuit-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,16 +32,34 @@
 
   .base > div {
     max-width: 480px;
-    height: 100%;
     margin: 0 auto;
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
   }
 }
 
 .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 {