From fa5262afbda983a4a7ccc86ce0dd236476676e71 Mon Sep 17 00:00:00 2001 From: Airike Jaska <95303654+airikej@users.noreply.github.com> Date: Tue, 19 May 2026 08:46:00 +0300 Subject: [PATCH 1/2] fix(popover): fix large popover overflow in smaller screens #628 --- src/tedi/components/overlays/popover/popover.module.scss | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/tedi/components/overlays/popover/popover.module.scss b/src/tedi/components/overlays/popover/popover.module.scss index 6aceedab3..48b3a4af9 100644 --- a/src/tedi/components/overlays/popover/popover.module.scss +++ b/src/tedi/components/overlays/popover/popover.module.scss @@ -16,9 +16,13 @@ $popover-width: ( border-radius: var(--popover-radius-rounded); box-shadow: 0 1px 5px 0 var(--tedi-alpha-20); + // `100%` resolves to the popover's containing block (the FloatingPortal wrapper + // inside ``) and naturally excludes the vertical scrollbar gutter. Using + // `100vw` would include the gutter and let the large popover overflow on narrow + // viewports — visible as a horizontal scrollbar appearing when the popover opens. @each $name, $width in $popover-width { &--#{$name} { - width: min(#{$width}, calc(100vw - 1rem)); + width: min(#{$width}, calc(100% - 1rem)); } } From 8b46f900cfa2e88dde648495e87f758a9fcc7b32 Mon Sep 17 00:00:00 2001 From: Airike Jaska <95303654+airikej@users.noreply.github.com> Date: Tue, 19 May 2026 08:56:09 +0300 Subject: [PATCH 2/2] fix(popover): remove comment #628 --- src/tedi/components/overlays/popover/popover.module.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/tedi/components/overlays/popover/popover.module.scss b/src/tedi/components/overlays/popover/popover.module.scss index 48b3a4af9..747f4a04c 100644 --- a/src/tedi/components/overlays/popover/popover.module.scss +++ b/src/tedi/components/overlays/popover/popover.module.scss @@ -16,10 +16,6 @@ $popover-width: ( border-radius: var(--popover-radius-rounded); box-shadow: 0 1px 5px 0 var(--tedi-alpha-20); - // `100%` resolves to the popover's containing block (the FloatingPortal wrapper - // inside ``) and naturally excludes the vertical scrollbar gutter. Using - // `100vw` would include the gutter and let the large popover overflow on narrow - // viewports — visible as a horizontal scrollbar appearing when the popover opens. @each $name, $width in $popover-width { &--#{$name} { width: min(#{$width}, calc(100% - 1rem));