From e8eca3497b79075ed02aa71a8ef9dd85da208e74 Mon Sep 17 00:00:00 2001 From: Satya Achanta Date: Fri, 5 Jun 2026 16:46:07 -0400 Subject: [PATCH 1/2] bugfix/modal-with-in-mobile: make modal full width and height on mobile viewports --- .changeset/sparkly-experts-wave.md | 5 +++++ .../pharos/src/components/modal/pharos-modal.scss | 13 +++++++++++-- 2 files changed, 16 insertions(+), 2 deletions(-) create mode 100644 .changeset/sparkly-experts-wave.md diff --git a/.changeset/sparkly-experts-wave.md b/.changeset/sparkly-experts-wave.md new file mode 100644 index 000000000..7f76b1860 --- /dev/null +++ b/.changeset/sparkly-experts-wave.md @@ -0,0 +1,5 @@ +--- +'@ithaka/pharos': patch +--- + +fix(modal): make modal full width and height on mobile viewports diff --git a/packages/pharos/src/components/modal/pharos-modal.scss b/packages/pharos/src/components/modal/pharos-modal.scss index 434d50578..b858feb3f 100644 --- a/packages/pharos/src/components/modal/pharos-modal.scss +++ b/packages/pharos/src/components/modal/pharos-modal.scss @@ -60,9 +60,18 @@ } @media only screen and (width <= 570px) { + .modal__overlay { + align-items: flex-start; + } + .modal__dialog { - max-height: 88vh; - width: 88vw; + width: 100%; + height: 100dvh; + max-height: 100dvh; + } + + .modal__content { + border-radius: 0; } :host([open]) .modal__dialog { From be1ce1ab96aad9e59510d56cbda6184abb45c460 Mon Sep 17 00:00:00 2001 From: Satya Achanta Date: Fri, 5 Jun 2026 17:15:14 -0400 Subject: [PATCH 2/2] bugfix/modal-with-in-mobile: Set proper max-height on mobile --- packages/pharos/src/components/modal/pharos-modal.scss | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/pharos/src/components/modal/pharos-modal.scss b/packages/pharos/src/components/modal/pharos-modal.scss index b858feb3f..cb3622622 100644 --- a/packages/pharos/src/components/modal/pharos-modal.scss +++ b/packages/pharos/src/components/modal/pharos-modal.scss @@ -60,20 +60,12 @@ } @media only screen and (width <= 570px) { - .modal__overlay { - align-items: flex-start; - } - .modal__dialog { width: 100%; height: 100dvh; max-height: 100dvh; } - .modal__content { - border-radius: 0; - } - :host([open]) .modal__dialog { transition: visibility 0s linear 0s,