Fix: PageLayout not centered, File upload too big on ultrawide

Fixes: #585

Author: reglim

web/src/components/NavigationTitle.tsx

@@ -12,7 +12,7 @@ interface Props {
 
 export default function NavigationTitle (props: Props): JSX.Element {
   return (
-    <>
+    <div className={styles['nav-title']}>
       <div className={styles['page-header']}>
         <Link
           to={props.backLink != null ? props.backLink : '/'}
@@ -24,6 +24,6 @@ export default function NavigationTitle (props: Props): JSX.Element {
       </div>
 
       <div className={styles['page-description']}>{props.description}</div>
-    </>
+    </div>
   )
 }

web/src/pages/Upload.tsx

@@ -195,7 +195,7 @@ export default function Upload (): JSX.Element {
           {validation.fileMsg}
         </p>
 
-        <button type="submit" onClick={upload}>
+        <button type="submit" onClick={upload} className={styles['upload-btn']}>
           Upload
         </button>
       </StyledForm>

web/src/style/components/FileInput.module.css

@@ -5,10 +5,13 @@
 }
 
 .file-drop-zone {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: max(150px, 25vh);
   border-radius: 5px;
   border: 1px solid rgba(0, 0, 0, 0.23);
-  text-align: center;
-  padding: 13% 5%;
   cursor: pointer;
 }
 

web/src/style/components/NavigationTitle.module.css

@@ -1,3 +1,17 @@
+.nav-title {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+@media only screen and (min-width: 1400px) {
+  .nav-title {
+    width: 50%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
 .page-header {
   display: flex;
   flex-direction: row;

web/src/style/components/PageLayout.module.css

@@ -6,13 +6,13 @@
 @media only screen and (min-width: 650px) {
   .main {
     padding: 1% 0;
-    margin: 3% 16% 0 16%;
+    margin: 3% 16% 1% 16%;
   }
 }
 
 @media only screen and (max-width: 650px) {
   .main {
     padding: 1% 0;
-    margin: 3% 3% 0 3%;
+    margin: 3%;
   }
 }

web/src/style/components/StyledForm.module.css

@@ -9,13 +9,15 @@
   min-height: 5em;
 }
 
-@media only screen and (min-width: 1000px) {
+@media only screen and (min-width: 1400px) {
   .form {
     width: 50%;
+    margin-left: auto;
+    margin-right: auto;
   }
 }
 
-@media only screen and (max-width: 1000px) {
+@media only screen and (max-width: 1400px) {
   .form {
     width: 100%;
   }