Merge pull request #34025 from etienne-napoleone/patch-2

fix(ui): disable card content scroll shadow on unsuported browsers

.changeset/fix-card-scroll-shadow.md

@@ -0,0 +1,7 @@
+---
+'@backstage/ui': patch
+---
+
+Disabled `Card` scroll shadow in browsers that don't support `animation-timeline: scroll()`. Prevents the shadow from being always visible over the `CardBody` when there's nothing to scroll or the body is not scrolled.
+
+**Affected components:** Card

packages/ui/src/components/Card/Card.module.css

@@ -111,8 +111,14 @@
 
   .bui-Card:has(.bui-CardHeader) .bui-CardBody {
     padding-block-start: 0;
+  }
 
-    &::before {
+  .bui-Card:has(.bui-CardFooter) .bui-CardBody {
+    padding-block-end: 0;
+  }
+
+  @supports (animation-timeline: scroll()) {
+    .bui-Card:has(.bui-CardHeader) .bui-CardBody::before {
       content: '';
       position: sticky;
       top: 0;
@@ -130,12 +136,8 @@
       animation-timeline: scroll();
       animation-range: 0px 2.5rem;
     }
-  }
 
-  .bui-Card:has(.bui-CardFooter) .bui-CardBody {
-    padding-block-end: 0;
-
-    &::after {
+    .bui-Card:has(.bui-CardFooter) .bui-CardBody::after {
       content: '';
       position: sticky;
       bottom: 0;