From a0ea7b3152b2a2d317fa5921d5793670b576fc05 Mon Sep 17 00:00:00 2001 From: Etienne Napoleone Date: Wed, 22 Apr 2026 14:10:02 +0200 Subject: [PATCH 1/4] fix(ui): disable card content scroll shadow on unsuported browsers bugged in firefox https://caniuse.com/mdn-css_properties_animation-timeline_scroll Signed-off-by: Etienne Napoleone --- packages/ui/src/components/Card/Card.module.css | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/packages/ui/src/components/Card/Card.module.css b/packages/ui/src/components/Card/Card.module.css index eced185550..39af87ccc0 100644 --- a/packages/ui/src/components/Card/Card.module.css +++ b/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; From 6ce1444ca0610566b8e770381e8a3791948a239e Mon Sep 17 00:00:00 2001 From: Etienne Napoleone Date: Wed, 22 Apr 2026 14:28:42 +0200 Subject: [PATCH 2/4] chore(changeset): add card scroll shadow fix changeset Signed-off-by: Etienne Napoleone --- .changeset/fix-card-scroll-shadow | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/fix-card-scroll-shadow diff --git a/.changeset/fix-card-scroll-shadow b/.changeset/fix-card-scroll-shadow new file mode 100644 index 0000000000..47816b9581 --- /dev/null +++ b/.changeset/fix-card-scroll-shadow @@ -0,0 +1,7 @@ +--- +'@backstage/ui': patch +--- + +Disabled `Card` scroll shadow on browser that doesn'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 From 76635ae0053d4d53dc779eacb5fc21222cbcfc8c Mon Sep 17 00:00:00 2001 From: Johan Persson Date: Thu, 23 Apr 2026 09:52:39 +0200 Subject: [PATCH 3/4] Rename fix-card-scroll-shadow to fix-card-scroll-shadow.md Signed-off-by: Johan Persson --- .changeset/{fix-card-scroll-shadow => fix-card-scroll-shadow.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename .changeset/{fix-card-scroll-shadow => fix-card-scroll-shadow.md} (100%) diff --git a/.changeset/fix-card-scroll-shadow b/.changeset/fix-card-scroll-shadow.md similarity index 100% rename from .changeset/fix-card-scroll-shadow rename to .changeset/fix-card-scroll-shadow.md From 2da5a0af3baa5b8697061b23b83c5372ea2af1bf Mon Sep 17 00:00:00 2001 From: Etienne Napoleone Date: Thu, 23 Apr 2026 11:25:51 +0200 Subject: [PATCH 4/4] docs(changeset): update fix-scroll-card-shadow wording Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: Etienne Napoleone --- .changeset/fix-card-scroll-shadow.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/fix-card-scroll-shadow.md b/.changeset/fix-card-scroll-shadow.md index 47816b9581..53a1b28ee2 100644 --- a/.changeset/fix-card-scroll-shadow.md +++ b/.changeset/fix-card-scroll-shadow.md @@ -2,6 +2,6 @@ '@backstage/ui': patch --- -Disabled `Card` scroll shadow on browser that doesn'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. +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