Update shorten day separator labels based on chart width

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) => {
+  const getDayLabel = React.useCallback((dayNumber: number, useShort = false) => {
-    if (dayNumber === 1) return t('refLineRegularPlan');
+    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(useShort ? 'refLineNoDeviationShort' : 'refLineNoDeviation');
-      return t('refLineNoDeviation');
     } else if (!hasSchedule) {
-      // Deviates but no schedule = recovering
+      return t(useShort ? 'refLineRecoveringShort' : 'refLineRecovering');
-      return t('refLineRecovering');
     } else {
-      // Has deviation and has schedule = actual irregular intake
+      return t(useShort ? 'refLineIrregularIntakeShort' : 'refLineIrregularIntake');
-      return t('refLineIrregularIntake');
     }
   }, [days, daysWithDeviations, t]);
 
@@ -424,12 +418,23 @@ const SimulationChart = ({
                 />
             <CartesianGrid strokeDasharray="1 1" xAxisId="hours" yAxisId="concentration" />
 
-            {showDayReferenceLines !== false && [...Array(dispDays+1).keys()].map(day => (
+            {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: t('refLineDayX', { x: day+1 }) + ' ' + getDayLabel(day + 1),
+                    value: `${label}`,
                     position: 'insideTopRight',
                     style: {
                       fontSize: '0.75rem',
@@ -442,7 +447,8 @@ const SimulationChart = ({
                   xAxisId="hours"
                   yAxisId="concentration"
                 />
-            ))}
+              );
+            })}
             {showTherapeuticRange && (chartView === 'damph' || chartView === 'both') && (
               <ReferenceLine
                 y={parseFloat(therapeuticRange.min) || 0}

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",

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",