From 678bd6c7b647c1bed4110c862b40696945c84055 Mon Sep 17 00:00:00 2001
From: Andreas Weyer <dev@cbaoth.de>
Date: Fri, 16 Jan 2026 14:08:36 +0000
Subject: [PATCH] Update shorten day separator labels based on chart width

---
 src/components/simulation-chart.tsx | 66 ++++++++++++++++-------------
 src/locales/de.ts                   |  5 +++
 src/locales/en.ts                   |  5 +++
 3 files changed, 46 insertions(+), 30 deletions(-)

diff --git a/src/components/simulation-chart.tsx b/src/components/simulation-chart.tsx
index 48cf9a0..66112be 100644
--- a/src/components/simulation-chart.tsx
+++ b/src/components/simulation-chart.tsx
@@ -184,24 +184,18 @@ const SimulationChart = ({
   }, [combinedProfile, templateProfile, simulationDays]);
 
   // Determine label for each day's reference line
-  const getDayLabel = React.useCallback((dayNumber: number) => {
-    if (dayNumber === 1) return t('refLineRegularPlan');
+  const getDayLabel = React.useCallback((dayNumber: number, useShort = false) => {
+    if (dayNumber === 1) return t(useShort ? 'refLineRegularPlanShort' : 'refLineRegularPlan');
 
-    // Check if this day has an actual schedule entry (not auto-filled)
     const hasSchedule = days && days.length >= dayNumber;
-
-    // Check if this day deviates from template
     const hasDeviation = daysWithDeviations.has(dayNumber);
 
     if (!hasDeviation) {
-      // Matches template
-      return t('refLineNoDeviation');
+      return t(useShort ? 'refLineNoDeviationShort' : 'refLineNoDeviation');
     } else if (!hasSchedule) {
-      // Deviates but no schedule = recovering
-      return t('refLineRecovering');
+      return t(useShort ? 'refLineRecoveringShort' : 'refLineRecovering');
     } else {
-      // Has deviation and has schedule = actual irregular intake
-      return t('refLineIrregularIntake');
+      return t(useShort ? 'refLineIrregularIntakeShort' : 'refLineIrregularIntake');
     }
   }, [days, daysWithDeviations, t]);
 
@@ -424,25 +418,37 @@ const SimulationChart = ({
                 />
             <CartesianGrid strokeDasharray="1 1" xAxisId="hours" yAxisId="concentration" />
 
-            {showDayReferenceLines !== false && [...Array(dispDays+1).keys()].map(day => (
-              <ReferenceLine
-                key={`day-${day+1}`}
-                x={24 * (day+1)}
-                label={{
-                  value: t('refLineDayX', { x: day+1 }) + ' ' + getDayLabel(day + 1),
-                  position: 'insideTopRight',
-                  style: {
-                    fontSize: '0.75rem',
-                    fontStyle: 'italic',
-                    fill: day === 0 ? CHART_COLORS.regularPlanDivider : CHART_COLORS.deviationDayDivider
-                  }
-                }}
-                stroke={day === 0 ? CHART_COLORS.regularPlanDivider : CHART_COLORS.deviationDayDivider}
-                //strokeDasharray="0 0"
-                xAxisId="hours"
-                yAxisId="concentration"
-              />
-            ))}
+            {showDayReferenceLines !== false && [...Array(dispDays + 1).keys()].map(day => {
+              // Determine whether to use compact day labels to avoid overlap on narrow screens
+              const pxPerDay = scrollableWidth / Math.max(1, dispDays);
+              let label = "";
+              if (pxPerDay < 75) { // tweakable threshold, minimal label
+                label = t('refLineDayShort', { x: day + 1 });
+              } else if (pxPerDay < 110) { // tweakable threshold, compact label
+                label = t('refLineDayShort', { x: day + 1 }) + ' ' + getDayLabel(day + 1, true);
+              } else { // full label
+                label = t('refLineDayX', { x: day + 1 }) + ' ' + getDayLabel(day + 1);
+              }
+              return (
+                <ReferenceLine
+                  key={`day-${day + 1}`}
+                  x={24 * (day + 1)}
+                  label={{
+                    value: `${label}`,
+                    position: 'insideTopRight',
+                    style: {
+                      fontSize: '0.75rem',
+                      fontStyle: 'italic',
+                      fill: day === 0 ? CHART_COLORS.regularPlanDivider : CHART_COLORS.deviationDayDivider
+                    }
+                  }}
+                  stroke={day === 0 ? CHART_COLORS.regularPlanDivider : CHART_COLORS.deviationDayDivider}
+                  //strokeDasharray="0 0"
+                  xAxisId="hours"
+                  yAxisId="concentration"
+                />
+              );
+            })}
             {showTherapeuticRange && (chartView === 'damph' || chartView === 'both') && (
               <ReferenceLine
                 y={parseFloat(therapeuticRange.min) || 0}
diff --git a/src/locales/de.ts b/src/locales/de.ts
index 602ae8d..6c1497d 100644
--- a/src/locales/de.ts
+++ b/src/locales/de.ts
@@ -48,6 +48,11 @@ export const de = {
   refLineRecovering: "Erholung",
   refLineIrregularIntake: "Irregulär",
   refLineDayX: "T{{x}}",
+  refLineRegularPlanShort: "(Reg.)",
+  refLineNoDeviationShort: "(Reg.)",
+  refLineRecoveringShort: "(Erh.)",
+  refLineIrregularIntakeShort: "(Irr.)",
+  refLineDayShort: "T{{x}}",
   refLineMin: "Min",
   refLineMax: "Max",
   tooltipHour: "Stunde",
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 689a8a6..6bbe96a 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -48,6 +48,11 @@ export const en = {
   refLineRecovering: "Recovering",
   refLineIrregularIntake: "Irregular",
   refLineDayX: "D{{x}}",
+  refLineRegularPlanShort: "(Reg.)",
+  refLineNoDeviationShort: "(Reg.)",
+  refLineRecoveringShort: "(Rec.)",
+  refLineIrregularIntakeShort: "(Ireg.)",
+  refLineDayShort: "D{{x}}",
   refLineMin: "Min",
   refLineMax: "Max",