Merge pull request #563 from NBISweden/dev/layout-scroll

Improve mobile UX when using urdr

Author: HenrikeW

frontend/src/index.css

@@ -93,6 +93,12 @@ Other button classes are defined further down together with other classes for th
   align-items: center;
 }
 
+@media (max-width: 700px) and (orientation: portrait) {
+  .header-wrapper {
+    width: 200vw;
+  }
+}
+
 .header-heading {
   color: hsl(186deg 92% 11%);
   font-size: 3rem;
@@ -122,7 +128,8 @@ Other button classes are defined further down together with other classes for th
 }
 /* stylelint-enable selector-class-pattern */
 
-.usr-header {
+.usr-header,
+.help-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -136,11 +143,27 @@ Other button classes are defined further down together with other classes for th
   height: 80px;
 }
 
+@media (max-width: 700px) and (orientation: portrait) {
+  .usr-header {
+    width: 200vw;
+  }
+
+  .help-header {
+    width: 200vw;
+  }
+}
+
 .spreadsheet {
   min-height: 100vh;
   margin-bottom: 5rem;
 }
 
+@media (max-width: 700px) and (orientation: portrait) {
+  .spreadsheet {
+    width: 200vw;
+  }
+}
+
 .footer {
   z-index: 100;
   width: 100%;
@@ -149,6 +172,13 @@ Other button classes are defined further down together with other classes for th
   background-color: white;
 }
 
+@media (max-height: 700px) and (orientation: landscape) {
+  .footer {
+    position: relative;
+    z-index: 0;
+  }
+}
+
 .input-label {
   margin-left: 0.4rem;
   margin-top: 0.5rem;
@@ -257,6 +287,12 @@ Other button classes are defined further down together with other classes for th
   background-color: hsl(70deg 55% 98%);
 }
 
+@media (max-width: 700px) and (orientation: portrait) {
+  .login-wrapper {
+    width: 200vw;
+  }
+}
+
 .login-info {
   margin: 2rem 0 3rem;
 }
@@ -678,13 +714,27 @@ Other button classes are defined further down together with other classes for th
   position: relative;
 }
 
+@media (max-width: 700px) and (orientation: portrait) {
+  .help-wrapper {
+    position: flex;
+    flex-direction: column;
+    width: 200vw;
+  }
+}
+
 .help-title {
   font-size: 2rem;
-  margin-top: 1.5rem;
+  margin-top: 1rem;
   margin-left: 2rem;
   color: hsl(186deg 92% 11%);
 }
 
+@media (max-width: 700px) and (orientation: portrait) {
+  .help-title {
+    font-size: 1.2rem;
+  }
+}
+
 .help-subtitle {
   font-size: 1.5rem;
   padding-top: 1.5rem;

frontend/src/pages/Help.tsx

@@ -47,8 +47,8 @@ export const Help = () => {
   };
   return (
     <>
-      <header className="usr-header">
-        <h1 className="help-title">How do I use the urdr service?</h1>
+      <header className="help-header">
+        <h1 className="help-title">What is urdr?</h1>
         <HeaderUser username={context.user ? context.user.login : ""} />
       </header>
       <main className="help-wrapper">