Improve mobile responsiveness across pages

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

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