Improve mobile responsiveness across pages

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

frontend/src/App.module.css

@@ -1,5 +1,5 @@
 .app {
   flex: 1 0 auto;
-  max-width: 1220px;
+  width: min(100% - 2rem, 1220px);
   margin: 1rem auto;
 }

frontend/src/components/Header.module.css

@@ -1,12 +1,15 @@
 .header {
+  width: min(100% - 2rem, 1220px);
   max-width: 1220px;
   margin: 1rem auto;
 }
 
 .nav {
   display: flex;
-  height: 5rem;
+  min-height: 5rem;
   align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem 1rem;
   text-transform: uppercase;
 }
 
@@ -41,6 +44,8 @@
 .navItems {
   display: flex;
   align-items: center;
+  flex: 1;
+  flex-wrap: wrap;
   padding: 0;
   margin: 0;
   list-style: none;
@@ -58,6 +63,32 @@
   color: white;
 }
 
+@media (max-width: 640px) {
+  .nav {
+    align-items: flex-start;
+  }
+
+  .logoNav {
+    margin: 0 auto;
+  }
+
+  .navItems {
+    justify-content: center;
+    gap: 0.25rem;
+  }
+
+  .navLink {
+    display: inline-block;
+    padding: 0.5rem;
+    font-size: 0.8rem;
+  }
+
+  .brand {
+    padding-left: 0;
+    font-size: 2.5rem;
+  }
+}
+
 /* FIXME: Duplicates Splash styles */
 .brand {
   padding-left: 1rem;

frontend/src/components/Wireframe.module.css

@@ -27,6 +27,12 @@
   border-bottom: none;
 }
 
+@media (max-width: 640px) {
+  .wireframe {
+    display: none;
+  }
+}
+
 @keyframes isometric-rotate {
   0% {
     transform: rotateX(70deg) rotateY(0deg) rotateZ(-45deg);

frontend/src/features/auth/UserCreate.module.css

@@ -3,3 +3,8 @@
   max-width: 500px;
   gap: 1rem;
 }
+
+.form input {
+  width: 100%;
+  min-width: 0;
+}

frontend/src/features/log/Log.module.css

@@ -1,7 +1,17 @@
 .log {
   display: grid;
+  min-width: 0;
   gap: 1rem;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.tableWrap {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.tableWrap table {
+  width: 100%;
 }
 .disabled,
 .disabled a:link {
@@ -30,3 +40,20 @@
 .disabled a:hover {
   color: rgba(121, 152, 238, 0.5);
 }
+
+@media (max-width: 760px) {
+  .log {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@media (max-width: 480px) {
+  .pagination {
+    gap: 0 0.5rem;
+  }
+
+  .pagination a {
+    display: inline-block;
+    padding: 0.6rem 0.8rem;
+  }
+}

frontend/src/features/log/Log.tsx

@@ -34,6 +34,7 @@ const Log = () => {
     <div className={styles.log}>
       <div>
         <h2>Ordre</h2>
+        <div className={styles.tableWrap}>
           <table>
             <thead>
               <tr>
@@ -60,6 +61,7 @@ const Log = () => {
               ))}
             </tbody>
           </table>
+        </div>
         <nav aria-label="Order pagination">
           <ul className={styles.pagination}>
             <li className={clsx({ [styles.disabled]: orderOffset <= 0 })}>
@@ -89,6 +91,7 @@ const Log = () => {
       </div>
       <div>
         <h2>Transaksjoner</h2>
+        <div className={styles.tableWrap}>
           <table>
             <thead>
               <tr>
@@ -109,6 +112,7 @@ const Log = () => {
               ))}
             </tbody>
           </table>
+        </div>
         <nav aria-label="Transaction pagination">
           <ul className={styles.pagination}>
             <li className={clsx({ [styles.disabled]: transactionOffset <= 0 })}>

frontend/src/features/register/Register.module.css

@@ -1,8 +1,7 @@
 .userList {
   display: grid;
-  column-gap: 16px;
+  gap: 1rem;
-  grid-template-columns: repeat(5, 220px);
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
-  row-gap: 24px;
 }
 
 .showAll {
@@ -11,9 +10,8 @@
 
 .productList {
   display: grid;
-  column-gap: 16px;
+  gap: 1rem;
-  grid-template-columns: repeat(5, 220px);
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
-  row-gap: 24px;
 }
 
 .productListSection {
@@ -26,9 +24,23 @@
 
 .total {
   display: inline-block;
-  min-width: 200px;
+  min-width: min(200px, 100%);
   padding: 4px 8px;
   margin-right: 8px;
   color: white;
   font-size: 1.8rem;
 }
+
+.checkout {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+@media (max-width: 480px) {
+  .total {
+    width: 100%;
+    font-size: 1.4rem;
+  }
+}

frontend/src/features/stats/OrderStats.tsx

@@ -1,8 +1,9 @@
 import { useQuery } from "@apollo/client";
-import { Bar, BarDatum } from "@nivo/bar";
+import { BarDatum, ResponsiveBar } from "@nivo/bar";
 import React from "react";
 
 import { OrderStatsDocument, SchemaOrderStatsByTime } from "../../types";
+import styles from "./Stats.module.css";
 import { StatsView } from "./StatsView";
 import { chartTheme } from "./chartTheme";
 
@@ -24,17 +25,18 @@ const months = {
 };
 
 const OrderBar = ({ data }: { data: BarDatum[] }) => (
-  <Bar
+  <div className={styles.chart}>
+    <ResponsiveBar
       data={data}
       theme={chartTheme}
-    margin={{ left: 60, bottom: 40 }}
+      margin={{ top: 10, right: 10, bottom: 70, left: 60 }}
-    width={1200}
-    height={400}
       colorBy="indexValue"
       enableLabel={false}
       tooltipLabel={(d) => d.id.toString()}
       axisLeft={{ legend: "Ordre", legendPosition: "middle", legendOffset: -50 }}
+      axisBottom={{ tickRotation: -35 }}
     />
+  </div>
 );
 
 const OrderStats = () => {

frontend/src/features/stats/ProductStats.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from "@apollo/client";
-import { Pie } from "@nivo/pie";
+import { ResponsivePie } from "@nivo/pie";
 import React from "react";
 
 import { AllProductStatsDocument } from "../../types";
@@ -23,20 +23,20 @@ const ProductStats = () => {
         {(data?.allProducts || []).map((product) => (
           <div key={product.id}>
             {product.name}
-            <Pie
+            <div className={styles.productChart}>
-              margin={{ top: 40, right: 120, bottom: 40, left: 120 }}
+              <ResponsivePie
+                margin={{ top: 30, right: 50, bottom: 30, left: 50 }}
                 data={product.userCounts.map((uc: UserCount) => ({
                   id: uc.name,
                   label: uc.name,
                   value: uc.count,
                 }))}
-              width={400}
-              height={300}
                 theme={chartTheme}
                 arcLabelsTextColor="#17121a"
                 arcLabelsSkipAngle={8}
               />
             </div>
+          </div>
         ))}
       </div>
     </StatsView>

frontend/src/features/stats/Stats.module.css

@@ -1,8 +1,17 @@
 .products {
   display: grid;
-  max-width: 1200px;
+  max-width: 100%;
-  gap: 1rem;
+  gap: 1.5rem 1rem;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
+}
+
+.productChart {
+  height: 300px;
+}
+
+.chart {
+  width: 100%;
+  height: 360px;
 }
 
 .statsNav {
@@ -27,3 +36,14 @@
   border: 1px solid var(--border);
   border-radius: 4px;
 }
+
+@media (max-width: 640px) {
+  .statsNav ul {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .chart {
+    height: 300px;
+  }
+}

frontend/src/features/stats/Stats.tsx

@@ -1,8 +1,9 @@
 import { useQuery } from "@apollo/client";
-import { Line } from "@nivo/line";
+import { ResponsiveLine } from "@nivo/line";
 import React from "react";
 
 import { ProductStatsDocument } from "../../types";
+import styles from "./Stats.module.css";
 import { StatsView } from "./StatsView";
 import { chartTheme, chartTooltipStyle } from "./chartTheme";
 
@@ -20,11 +21,10 @@ const Stats = () => {
   return (
     <StatsView loading={loading}>
       <h2>Kjøp over tid</h2>
-      <Line
+      <div className={styles.chart}>
+        <ResponsiveLine
           data={series}
           theme={chartTheme}
-        width={1000}
-        height={400}
           margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
           xScale={{
             type: "time",
@@ -61,6 +61,7 @@ const Stats = () => {
             </div>
           )}
         />
+      </div>
     </StatsView>
   );
 };

frontend/src/features/users/UserDetail.module.css

@@ -1,5 +1,21 @@
 .userDetail {
   display: grid;
+  min-width: 0;
   gap: 1rem;
-  grid-template-columns: 400px 1fr;
+  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
+}
+
+.chart {
+  width: 100%;
+  height: 360px;
+}
+
+@media (max-width: 760px) {
+  .userDetail {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .chart {
+    height: 300px;
+  }
 }

frontend/src/features/users/UserDetail.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from "@apollo/client";
-import { Line } from "@nivo/line";
+import { ResponsiveLine } from "@nivo/line";
 import React from "react";
 import { useParams } from "react-router-dom";
 
@@ -61,11 +61,10 @@ const UserDetail = () => {
       </div>
       <div>
         <h2>Kjøp over tid</h2>
-        <Line
+        <div className={styles.chart}>
+          <ResponsiveLine
             data={series}
             theme={chartTheme}
-          width={1000}
-          height={400}
             margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
             xScale={{
               type: "time",
@@ -104,6 +103,7 @@ const UserDetail = () => {
           />
         </div>
       </div>
+    </div>
   );
 };
 export default UserDetail;