From bd8007b3763c67b66ef771c76149a3ddc0fd2d37 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Wed, 6 Sep 2023 10:37:15 -0500 Subject: [PATCH] fix: change mfa panel width at viewport widths --- libs/tup-components/src/mfa/Mfa.module.css | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/libs/tup-components/src/mfa/Mfa.module.css b/libs/tup-components/src/mfa/Mfa.module.css index 462884951..e9b763931 100644 --- a/libs/tup-components/src/mfa/Mfa.module.css +++ b/libs/tup-components/src/mfa/Mfa.module.css @@ -8,7 +8,9 @@ } .pairing-container > *:not(.pairing-separator) { - width: 365px; /* FAQ: static width, so .mfa-message is centered */ + /* To let panels easily become equal width so .mfa-message is centered */ + /* FAQ: Using a var makes width easy to change (e.g. in a @media query) */ + width: var(--panel-width, auto); } .pairing-separator { @@ -88,6 +90,12 @@ label.qr-code-alt-label { /* Responsive layout */ +@media screen and (--medium-to-wide) { + .pairing-container { --panel-width: 330px; } +} +@media screen and (--wide-and-above) { + .pairing-container { --panel-width: 365px; } +} @media screen and (--medium-and-above) { .pairing-container { /* To layout items on one left-aligned row */