fixed styling on chall page

- error messages for challenges weren't displaying in the right place due to commit ead62d1 - also made sure that everything will fit into the window even on smaller screens
pbrucla · Sep 13, 2023 · 9299e23 · 9299e23
1 parent 74086e3
commit 9299e23
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 14 deletions.
diff --git a/frontend/src/chall.tsx b/frontend/src/chall.tsx
@@ -301,16 +301,18 @@ const Chall = () => {
             );
         } else {
             buttons = (
-                <div className="deployment-info">
-                    <button
-                        className={"deploy OFF" + (isShaking[0] ? " shake-animation" : "")}
-                        onClick={() => deployChallenge(0)}
-                        disabled={disableButton[0]}
-                    >
-                        DEPLOY NOW
-                    </button>
+                <>
+                    <div className="deployment-info">
+                        <button
+                            className={"deploy OFF" + (isShaking[0] ? " shake-animation" : "")}
+                            onClick={() => deployChallenge(0)}
+                            disabled={disableButton[0]}
+                        >
+                            DEPLOY NOW
+                        </button>
+                    </div>
                     {errorMsg && <div className="errorMsg">{errorMsg}</div>}
-                </div>
+                </>
             );
         }
     }

diff --git a/frontend/src/styles/chall.css b/frontend/src/styles/chall.css
@@ -1,11 +1,11 @@
 .content-div {
-    height: calc(89vh - 5rem);
+    height: calc(99vh - 7.75rem);
     display: flex;
     flex-direction: column;
     justify-content: left;
     align-items: left;
-    padding-left: 10vh;
-    padding-top: 10vh;
+    padding-left: 5.5rem;
+    padding-top: 1.25rem;
 }
 
 .deployment-info {
@@ -122,6 +122,6 @@
 }
 
 .errorMsg {
-    margin: 10px 0px;
-    max-width: 30rem;
+    margin: 2rem 0px;
+    max-width: 60vw;
 }