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,32 +34,34 @@ const Log = () => {
     <div className={styles.log}>
       <div>
         <h2>Ordre</h2>
-        <table>
-          <thead>
-            <tr>
-              <th scope="col">Når</th>
-              <th scope="col">Hvem</th>
-              <th scope="col">Hva</th>
-              <th scope="col">Sum</th>
-            </tr>
-          </thead>
-          <tbody>
-            {orders.map((order) => (
-              <tr key={order.id}>
-                <td>{formatTime(order.created)}</td>
-                <td>{order.isExternal ? "Ekstern" : `${order.customer?.firstName} ${order.customer?.lastName}`}</td>
-                <td>
-                  {(order.orderlines ?? []).map((line) => (
-                    <div key={line.id}>
-                      {Number(line.amount)}x {line.product.name}
-                    </div>
-                  ))}
-                </td>
-                <td>{Number(order.orderSum)}</td>
+        <div className={styles.tableWrap}>
+          <table>
+            <thead>
+              <tr>
+                <th scope="col">Når</th>
+                <th scope="col">Hvem</th>
+                <th scope="col">Hva</th>
+                <th scope="col">Sum</th>
               </tr>
-            ))}
-          </tbody>
-        </table>
+            </thead>
+            <tbody>
+              {orders.map((order) => (
+                <tr key={order.id}>
+                  <td>{formatTime(order.created)}</td>
+                  <td>{order.isExternal ? "Ekstern" : `${order.customer?.firstName} ${order.customer?.lastName}`}</td>
+                  <td>
+                    {(order.orderlines ?? []).map((line) => (
+                      <div key={line.id}>
+                        {Number(line.amount)}x {line.product.name}
+                      </div>
+                    ))}
+                  </td>
+                  <td>{Number(order.orderSum)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
         <nav aria-label="Order pagination">
           <ul className={styles.pagination}>
             <li className={clsx({ [styles.disabled]: orderOffset <= 0 })}>
@@ -89,26 +91,28 @@ const Log = () => {
       </div>
       <div>
         <h2>Transaksjoner</h2>
-        <table>
-          <thead>
-            <tr>
-              <th scope="col">Når</th>
-              <th scope="col">Hvem</th>
-              <th scope="col">Innskudd</th>
-            </tr>
-          </thead>
-          <tbody>
-            {transactions.map((trans) => (
-              <tr key={trans.id}>
-                <td>{formatTime(trans.created)}</td>
-                <td>
-                  {trans.user.firstName} {trans.user.lastName}
-                </td>
-                <td>{Number(trans.amount)}</td>
+        <div className={styles.tableWrap}>
+          <table>
+            <thead>
+              <tr>
+                <th scope="col">Når</th>
+                <th scope="col">Hvem</th>
+                <th scope="col">Innskudd</th>
               </tr>
-            ))}
-          </tbody>
-        </table>
+            </thead>
+            <tbody>
+              {transactions.map((trans) => (
+                <tr key={trans.id}>
+                  <td>{formatTime(trans.created)}</td>
+                  <td>
+                    {trans.user.firstName} {trans.user.lastName}
+                  </td>
+                  <td>{Number(trans.amount)}</td>
+                </tr>
+              ))}
+            </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;
-  grid-template-columns: repeat(5, 220px);
-  row-gap: 24px;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
 }
 
 .showAll {
@@ -11,9 +10,8 @@
 
 .productList {
   display: grid;
-  column-gap: 16px;
-  grid-template-columns: repeat(5, 220px);
-  row-gap: 24px;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
 }
 
 .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
-    data={data}
-    theme={chartTheme}
-    margin={{ left: 60, bottom: 40 }}
-    width={1200}
-    height={400}
-    colorBy="indexValue"
-    enableLabel={false}
-    tooltipLabel={(d) => d.id.toString()}
-    axisLeft={{ legend: "Ordre", legendPosition: "middle", legendOffset: -50 }}
-  />
+  <div className={styles.chart}>
+    <ResponsiveBar
+      data={data}
+      theme={chartTheme}
+      margin={{ top: 10, right: 10, bottom: 70, left: 60 }}
+      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,19 +23,19 @@ const ProductStats = () => {
         {(data?.allProducts || []).map((product) => (
           <div key={product.id}>
             {product.name}
-            <Pie
-              margin={{ top: 40, right: 120, bottom: 40, left: 120 }}
-              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 className={styles.productChart}>
+              <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,
+                }))}
+                theme={chartTheme}
+                arcLabelsTextColor="#17121a"
+                arcLabelsSkipAngle={8}
+              />
+            </div>
           </div>
         ))}
       </div>

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

@@ -1,8 +1,17 @@
 .products {
   display: grid;
-  max-width: 1200px;
-  gap: 1rem;
-  grid-template-columns: repeat(3, 1fr);
+  max-width: 100%;
+  gap: 1.5rem 1rem;
+  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,47 +21,47 @@ const Stats = () => {
   return (
     <StatsView loading={loading}>
       <h2>Kjøp over tid</h2>
-      <Line
-        data={series}
-        theme={chartTheme}
-        width={1000}
-        height={400}
-        margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
-        xScale={{
-          type: "time",
-          format: "%Y-%m-%d",
-          useUTC: false,
-          precision: "day",
-        }}
-        xFormat="time:%Y-%m-%d"
-        yScale={{
-          type: "linear",
-          stacked: false,
-        }}
-        axisLeft={{
-          legend: "Purchases",
-          legendOffset: 12,
-        }}
-        axisBottom={{
-          format: "%b %Y",
-          legend: "Date",
-          legendPosition: "middle",
-          legendOffset: -20,
-        }}
-        useMesh
-        pointLabelYOffset={0}
-        tooltip={({ point }) => (
-          <div style={chartTooltipStyle}>
-            <div>
-              <strong>{point.data.xFormatted}</strong>
+      <div className={styles.chart}>
+        <ResponsiveLine
+          data={series}
+          theme={chartTheme}
+          margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
+          xScale={{
+            type: "time",
+            format: "%Y-%m-%d",
+            useUTC: false,
+            precision: "day",
+          }}
+          xFormat="time:%Y-%m-%d"
+          yScale={{
+            type: "linear",
+            stacked: false,
+          }}
+          axisLeft={{
+            legend: "Purchases",
+            legendOffset: 12,
+          }}
+          axisBottom={{
+            format: "%b %Y",
+            legend: "Date",
+            legendPosition: "middle",
+            legendOffset: -20,
+          }}
+          useMesh
+          pointLabelYOffset={0}
+          tooltip={({ point }) => (
+            <div style={chartTooltipStyle}>
+              <div>
+                <strong>{point.data.xFormatted}</strong>
+              </div>
+              <div>
+                <span style={{ background: point.seriesColor, width: 13, height: 13, display: "inline-block" }} />{" "}
+                <strong>{String(point.data.yFormatted)}</strong> {point.seriesId}
+              </div>
             </div>
-            <div>
-              <span style={{ background: point.seriesColor, width: 13, height: 13, display: "inline-block" }} />{" "}
-              <strong>{String(point.data.yFormatted)}</strong> {point.seriesId}
-            </div>
-          </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,47 +61,47 @@ const UserDetail = () => {
       </div>
       <div>
         <h2>Kjøp over tid</h2>
-        <Line
-          data={series}
-          theme={chartTheme}
-          width={1000}
-          height={400}
-          margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
-          xScale={{
-            type: "time",
-            format: "%Y-%m-%d",
-            useUTC: false,
-            precision: "day",
-          }}
-          xFormat="time:%Y-%m-%d"
-          yScale={{
-            type: "linear",
-            stacked: false,
-          }}
-          axisLeft={{
-            legend: "Purchases",
-            legendOffset: 12,
-          }}
-          axisBottom={{
-            format: "%b %Y",
-            legend: "Date",
-            legendPosition: "middle",
-            legendOffset: -20,
-          }}
-          useMesh
-          pointLabelYOffset={0}
-          tooltip={({ point }) => (
-            <div style={chartTooltipStyle}>
-              <div>
-                <strong>{point.data.xFormatted}</strong>
+        <div className={styles.chart}>
+          <ResponsiveLine
+            data={series}
+            theme={chartTheme}
+            margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
+            xScale={{
+              type: "time",
+              format: "%Y-%m-%d",
+              useUTC: false,
+              precision: "day",
+            }}
+            xFormat="time:%Y-%m-%d"
+            yScale={{
+              type: "linear",
+              stacked: false,
+            }}
+            axisLeft={{
+              legend: "Purchases",
+              legendOffset: 12,
+            }}
+            axisBottom={{
+              format: "%b %Y",
+              legend: "Date",
+              legendPosition: "middle",
+              legendOffset: -20,
+            }}
+            useMesh
+            pointLabelYOffset={0}
+            tooltip={({ point }) => (
+              <div style={chartTooltipStyle}>
+                <div>
+                  <strong>{point.data.xFormatted}</strong>
+                </div>
+                <div>
+                  <span style={{ background: point.seriesColor, width: 13, height: 13, display: "inline-block" }} />{" "}
+                  <strong>{String(point.data.yFormatted)}</strong> {point.seriesId}
+                </div>
               </div>
-              <div>
-                <span style={{ background: point.seriesColor, width: 13, height: 13, display: "inline-block" }} />{" "}
-                <strong>{String(point.data.yFormatted)}</strong> {point.seriesId}
-              </div>
-            </div>
-          )}
-        />
+            )}
+          />
+        </div>
       </div>
     </div>
   );