fix: only put width: max-content where needed

TACC · Sep 6, 2023 · b647f6a · b647f6a
1 parent 8cec1b8
commit b647f6a
Showing 1 changed file with 6 additions and 5 deletions.
diff --git 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 */