From 28abde334e90529e0979189821c6d3f1a1f0e26f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Thu, 22 Oct 2026 02:31:56 +0200
Subject: [PATCH] fix(insights): keep the source comparison range on a 390 px
 phone

Three spelled-out range labels beside the card title pushed /insights/sources
past the viewport. Use the charts' short day labels and keep the long form as
the segment title. The route sweep resolves the new module pages and drops
mood from the arrangement pages, whose old address now redirects to them.
---
 e2e/mobile-route-overflow.spec.ts             |  9 ++++++--
 .../__tests__/source-provenance-view.test.tsx | 15 +++++++++++++
 .../provenance/source-provenance-view.tsx     | 22 +++++++------------
 3 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/e2e/mobile-route-overflow.spec.ts b/e2e/mobile-route-overflow.spec.ts
index 0972d705c..a0d0397b8 100644
--- a/e2e/mobile-route-overflow.spec.ts
+++ b/e2e/mobile-route-overflow.spec.ts
@@ -4,6 +4,7 @@ import { join, relative, sep } from "node:path";
 import type { APIRequestContext } from "@playwright/test";
 
 import { ADMIN_SECTION_SLUGS } from "@/components/admin/section-slugs";
+import { MODULE_SETTINGS_PAGE_IDS } from "@/components/settings/module-settings-page-ids";
 import { SETTINGS_SECTION_SLUGS } from "@/components/settings/section-slugs";
 
 import { expect, test } from "./setup/test";
@@ -80,17 +81,21 @@ const DYNAMIC_ROUTES: Record<string, Resolver> = {
     ADMIN_SECTION_SLUGS.map((slug) => `/admin/${slug}`),
   // `LAYOUT_GROUP_IDS` lives beside React components the test runner cannot
   // load; `settings/layout/[module]` 404s an unknown group, so a stale entry
-  // here fails on the status check below rather than passing quietly.
+  // here fails on the status check below rather than passing quietly. Mood
+  // has no arrangement page since v1.44: its old address redirects to
+  // `/settings/modules/mood`, which the entry below sweeps.
   "/settings/layout/[module]": async () =>
     [
       "dashboard",
       "insights",
       "medications",
-      "mood",
       "labs",
       "illness",
+      "documents",
       "vorsorge",
     ].map((group) => `/settings/layout/${group}`),
+  "/settings/modules/[module]": async () =>
+    MODULE_SETTINGS_PAGE_IDS.map((module) => `/settings/modules/${module}`),
   "/insights/scores/[metric]": async () =>
     ["sleep", "readiness", "recovery", "stress", "strain"].map(
       (metric) => `/insights/scores/${metric}`,
diff --git a/src/components/provenance/__tests__/source-provenance-view.test.tsx b/src/components/provenance/__tests__/source-provenance-view.test.tsx
index a951201f5..0ec141b7b 100644
--- a/src/components/provenance/__tests__/source-provenance-view.test.tsx
+++ b/src/components/provenance/__tests__/source-provenance-view.test.tsx
@@ -164,6 +164,21 @@ describe("SourceProvenanceView", () => {
     expect(html).toContain('data-slot="provenance-day-empty"');
     expect(html).toContain('data-slot="provenance-compare-empty"');
   });
+
+  it("labels the range with the charts' short day labels and spells them out", () => {
+    state.day = DAY;
+    state.compare = COMPARE;
+    const html = render(
+      <SourceProvenanceView initialType="SLEEP_DURATION" initialDate={null} />,
+    );
+    for (const days of ["30", "90", "365"]) {
+      expect(html).toMatch(
+        new RegExp(
+          `data-slot="provenance-range-${days}"[^>]*title="${days} days"[^>]*>${days}d<|title="${days} days"[^>]*data-slot="provenance-range-${days}"[^>]*>${days}d<`,
+        ),
+      );
+    }
+  });
 });
 
 describe("SourceProvenanceLink", () => {
diff --git a/src/components/provenance/source-provenance-view.tsx b/src/components/provenance/source-provenance-view.tsx
index e5a1dffb0..f3bd93d5f 100644
--- a/src/components/provenance/source-provenance-view.tsx
+++ b/src/components/provenance/source-provenance-view.tsx
@@ -224,20 +224,14 @@ export function SourceProvenanceView({
                 slot="provenance-range"
                 value={range}
                 onChange={setRange}
-                options={[
-                  {
-                    value: "30",
-                    label: t("sourceProvenance.rangeDays", { days: 30 }),
-                  },
-                  {
-                    value: "90",
-                    label: t("sourceProvenance.rangeDays", { days: 90 }),
-                  },
-                  {
-                    value: "365",
-                    label: t("sourceProvenance.rangeDays", { days: 365 }),
-                  },
-                ]}
+                // The charts' short range labels ("30d"), spelled out in
+                // the title: three long ones beside the title push the card
+                // past a 390 px phone.
+                options={(["30", "90", "365"] as const).map((days) => ({
+                  value: days,
+                  label: t("charts.daysNLabel", { days }),
+                  title: t("sourceProvenance.rangeDays", { days }),
+                }))}
               />
             }
           />