From 9f8c402e1ad2189d4d1098e46e794a800c7e21ff Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Tue, 19 Apr 2022 23:02:29 +0530
Subject: [PATCH] fix: challenge modal styles (#987)

---
 .../Components/ChallengeModal/ChallengeModal.tsx          | 8 +++++---
 .../Components/ChallengeModal/ChallengePrompt.tsx         | 6 +++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx b/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx
index bf8219fea96..bc71c5dc694 100644
--- a/app/assets/javascripts/Components/ChallengeModal/ChallengeModal.tsx
+++ b/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)
           }}
diff --git a/app/assets/javascripts/Components/ChallengeModal/ChallengePrompt.tsx b/app/assets/javascripts/Components/ChallengeModal/ChallengePrompt.tsx
index 8ca6088e128..406962e4e79 100644
--- a/app/assets/javascripts/Components/ChallengeModal/ChallengePrompt.tsx
+++ b/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>
   )
 }