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 = ({
/>
- {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 (
+
+ );
+ })}
{showTherapeuticRange && (chartView === 'damph' || chartView === 'both') && (