From b647f6a74d72b04ec951ef1d91342c1418f78bc5 Mon Sep 17 00:00:00 2001 From: Wesley Bomar Date: Wed, 6 Sep 2023 12:09:17 -0500 Subject: [PATCH] fix: only put `width: max-content` where needed --- libs/tup-components/src/mfa/Mfa.module.css | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/libs/tup-components/src/mfa/Mfa.module.css b/libs/tup-components/src/mfa/Mfa.module.css index aec8b3090..8b7556868 100644 --- a/libs/tup-components/src/mfa/Mfa.module.css +++ b/libs/tup-components/src/mfa/Mfa.module.css @@ -23,11 +23,6 @@ margin-top: 30px; /* match .mfa-success-container button */ } -.mfa-message { - /* So OTP code copy field will not stretch to fill narrow-width screen */ - width: max-content; -} - .field-error { /* So message with very little text still appears beneath input */ display: flex; @@ -126,6 +121,12 @@ label.qr-code-alt-label { padding-bottom: var(--space-below-panel-for-message); } + /* To not let message content stretch wider than necessary */ + /* FAQ: A TextCopyField in a message would stretch as wide as possible */ + .mfa-message { + width: max-content; + } + /* HACK: Position .mfa-message at the bottom and "outside" of the panels */ .pairing-container *:not(:only-child) .mfa-message { /* To position message beneath both paring steps */