fix: challenge modal styles (#987)

app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx

@@ -208,9 +208,11 @@ export const ChallengeModal: FunctionComponent<Props> = ({
         )}
         <ProtectedIllustration className="w-30 h-30 mb-4" />
         <div className="font-bold text-lg text-center max-w-76 mb-3">{challenge.heading}</div>
-        <div className="text-center text-sm max-w-76 mb-4">{challenge.subheading}</div>
+        {challenge.subheading && (
+          <div className="text-center text-sm max-w-76 mb-4 break-word">{challenge.subheading}</div>
+        )}
         <form
-          className="flex flex-col items-center min-w-76 mb-4"
+          className="flex flex-col items-center min-w-76"
           onSubmit={(e) => {
             e.preventDefault()
             submit().catch(console.error)
@@ -230,7 +232,7 @@ export const ChallengeModal: FunctionComponent<Props> = ({
         <Button
           variant="primary"
           disabled={isProcessing}
-          className="min-w-76 mb-3.5"
+          className="min-w-76 mt-1 mb-3.5"
           onClick={() => {
             submit().catch(console.error)
           }}

app/assets/javascripts/Components/ChallengeModal/ChallengePrompt.tsx

@@ -39,9 +39,9 @@ export const ChallengeModalPrompt: FunctionComponent<Props> = ({
   }, [isInvalid])
 
   return (
-    <>
+    <div className="w-full mb-3">
       {prompt.validation === ChallengeValidation.ProtectionSessionDuration ? (
-        <div className="mt-3 min-w-76">
+        <div className="min-w-76">
           <div className="text-sm font-medium mb-2">Allow protected access for</div>
           <div className="flex items-center justify-between bg-grey-4 rounded p-1">
             {ProtectionSessionDurations.map((option) => {
@@ -91,6 +91,6 @@ export const ChallengeModalPrompt: FunctionComponent<Props> = ({
       {isInvalid && (
         <div className="text-sm color-danger mt-2">Invalid authentication, please try again.</div>
       )}
-    </>
+    </div>
   )
 }