Improve mobile responsiveness across pages

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

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>
   );
 };