From d47e0a3efc3348507baaabbc1f40bf48c3a593b0 Mon Sep 17 00:00:00 2001 From: Vesper Date: Fri, 13 Mar 2026 22:20:50 +0000 Subject: [PATCH 1/2] Add width limit to notification banners --- .../components/notification-banner/NotificationBanner.css.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/components/notification-banner/NotificationBanner.css.ts b/src/app/components/notification-banner/NotificationBanner.css.ts index a60db281c..4b04919ec 100644 --- a/src/app/components/notification-banner/NotificationBanner.css.ts +++ b/src/app/components/notification-banner/NotificationBanner.css.ts @@ -39,7 +39,7 @@ export const BannerContainer = style({ gap: config.space.S200, padding: config.space.S400, pointerEvents: 'none', - alignItems: 'stretch', + alignItems: 'flex-end', // On iOS, when keyboard opens, ensure banner stays visible at top of visual viewport '@supports': { @@ -67,6 +67,7 @@ export const Banner = style({ boxShadow: `0 ${toRem(8)} ${toRem(32)} rgba(0, 0, 0, 0.45), 0 ${toRem(2)} ${toRem(8)} rgba(0, 0, 0, 0.3)`, cursor: 'pointer', width: '100%', + maxWidth: '50em', animationName: slideIn, animationDuration: '260ms', animationTimingFunction: 'cubic-bezier(0.22, 0.8, 0.6, 1)', From c811733e0a000176811dd9d7735df57cb4404a78 Mon Sep 17 00:00:00 2001 From: Vesper Date: Sat, 14 Mar 2026 11:31:10 +0000 Subject: [PATCH 2/2] Add changeset --- .changeset/limit-notification-width.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/limit-notification-width.md diff --git a/.changeset/limit-notification-width.md b/.changeset/limit-notification-width.md new file mode 100644 index 000000000..24b5541ed --- /dev/null +++ b/.changeset/limit-notification-width.md @@ -0,0 +1,5 @@ +--- +default: patch +--- + +Add width limit to notification banners