fix: mfa pair validation error message (#296)

* fix: put short inline error msg's on new line

* enhance: user-friendly mfa validation error msg

* feat: include technical error message

* chore: nx format:write

* Revert "feat: include technical error message"

This reverts commit 11aff00.

libs/tup-components/src/mfa/Mfa.module.css

@@ -34,6 +34,11 @@ li.pairing-separator {
     margin-top: 30px; /* match .mfa-success-container button */
 }
 
+.field-error {
+  /* so message with very littel text still appears beneath input */
+  display: flex;
+}
+
 /* TOTP pairing styles */
 .qr-code-box > * {
     --border-width: var(--global-border-width--xx-thick);

libs/tup-components/src/mfa/MfaSmsPanel.tsx

@@ -25,7 +25,11 @@ const MfaSmsPanel: React.FC = () => {
             onChange={(e) => setPhoneNumber(e.target.value)}
           />
           {smsMutation.isError && (
-            <InlineMessage type="error" tagName="small">
+            <InlineMessage
+              type="error"
+              tagName="small"
+              className={styles['field-error']}
+            >
               Unable to pair via SMS. If this error persists,{' '}
               <TicketCreateModal display="link">
                 submit a ticket

libs/tup-components/src/mfa/MfaValidationPanel.tsx

@@ -33,8 +33,12 @@ const MfaValidationPanel: React.FC<{ tokenType: 'totp' | 'sms' }> = ({
             onChange={(e) => setTokenValue(e.target.value)}
           />
           {error && (
-            <InlineMessage type="error" tagName="small">
-              Error validating MFA token: "{error.message}"
+            <InlineMessage
+              type="error"
+              tagName="small"
+              className={styles['field-error']}
+            >
+              Your token is invalid.
             </InlineMessage>
           )}
         </div>