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 */