Update shorten line names (legend, tooltip, buttons) based on window width

src/components/simulation-chart.tsx

@@ -10,7 +10,23 @@
  */
 
 import React from 'react';
-import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ReferenceLine, ResponsiveContainer } from 'recharts';
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip as RechartsTooltip,
+  Legend,
+  ReferenceLine,
+  ResponsiveContainer,
+} from 'recharts';
+import {
+  Tooltip as UiTooltip,
+  TooltipTrigger as UiTooltipTrigger,
+  TooltipContent as UiTooltipContent,
+  TooltipProvider as UiTooltipProvider,
+} from './ui/tooltip';
 
 // Chart color scheme
 const CHART_COLORS = {
@@ -69,6 +85,43 @@ const SimulationChart = ({
     return () => window.removeEventListener('resize', updateWidth);
   }, []);
 
+  // Use shorter captions on narrow containers to reduce wrapping
+  const isCompactLabels = containerWidth < 640; // tweakable threshold for mobile
+
+  const seriesLabels = React.useMemo<Record<string, { full: string; short: string; display: string }>>(() => {
+    const damphFull = t('dAmphetamine');
+    const damphShort = t('dAmphetamineShort', { defaultValue: damphFull });
+    const ldxFull = t('lisdexamfetamine');
+    const ldxShort = t('lisdexamfetamineShort', { defaultValue: ldxFull });
+    const overlayFull = t('regularPlanOverlay');
+    const overlayShort = t('regularPlanOverlayShort', { defaultValue: overlayFull });
+
+    const useShort = isCompactLabels;
+
+    return {
+      combinedDamph: {
+        full: damphFull,
+        short: damphShort,
+        display: useShort ? damphShort : damphFull,
+      },
+      combinedLdx: {
+        full: ldxFull,
+        short: ldxShort,
+        display: useShort ? ldxShort : ldxFull,
+      },
+      templateDamph: {
+        full: `${damphFull} (${overlayFull})`,
+        short: `${damphShort} (${overlayShort})`,
+        display: useShort ? `${damphShort} (${overlayShort})` : `${damphFull} (${overlayFull})`,
+      },
+      templateLdx: {
+        full: `${ldxFull} (${overlayFull})`,
+        short: `${ldxShort} (${overlayShort})`,
+        display: useShort ? `${ldxShort} (${overlayShort})` : `${ldxFull} (${overlayFull})`,
+      },
+    };
+  }, [isCompactLabels, t]);
+
   const simDays = parseInt(simulationDays, 10) || 3;
 
   // Y-axis takes ~80px, scrollable area gets the rest
@@ -236,71 +289,92 @@ const SimulationChart = ({
     ? scrollableWidth
     : Math.ceil((scrollableWidth / dispDays) * simDays);
 
+  const renderLegend = React.useCallback((props: any) => {
+    const { payload } = props;
+    if (!payload) return null;
+
+    return (
+      <UiTooltipProvider>
+        <ul className="flex flex-wrap gap-2 text-xs leading-tight">
+          {payload.map((item: any) => {
+            const labelInfo = seriesLabels[item.dataKey] || { display: item.value, full: item.value };
+            const opacity = item.payload?.opacity ?? 1;
+
+            return (
+              <li key={item.dataKey} className="flex items-center gap-1 max-w-[140px]">
+                <span
+                  className="inline-block w-3 h-3 rounded-sm"
+                  style={{ backgroundColor: item.color, opacity }}
+                />
+                <UiTooltip>
+                  <UiTooltipTrigger asChild>
+                    <span
+                      className="px-1 py-0.5 rounded-sm bg-white text-black shadow-sm border border-muted truncate inline-block max-w-[100px]"
+                      title={labelInfo.full}
+                    >
+                      {labelInfo.display}
+                    </span>
+                  </UiTooltipTrigger>
+                  <UiTooltipContent className="bg-white text-black shadow-md border max-w-xs">
+                    <span className="font-medium">{labelInfo.full}</span>
+                  </UiTooltipContent>
+                </UiTooltip>
+              </li>
+            );
+          })}
+        </ul>
+      </UiTooltipProvider>
+    );
+  }, [seriesLabels]);
+
   return (
     <div ref={containerRef} className="flex-grow w-full flex flex-col overflow-y-hidden">
       {/* Fixed Legend at top */}
-      <div style={{ height: 40, marginBottom: 8, paddingLeft: yAxisWidth + 10 }}>
-        <ResponsiveContainer width="100%" height="100%">
-          <LineChart data={mergedData} margin={{ top: 0, right: 20, left: 0, bottom: 0 }}>
-            <Legend
-              verticalAlign="top"
-              align="left"
-              height={36}
-              wrapperStyle={{ paddingLeft: 0 }}
-              formatter={(value: string) => {
-                // Apply lighter color to template overlay entries in legend
-                const isTemplate = value.includes(t('regularPlanOverlay'));
-                return <span style={{ opacity: isTemplate ? 0.5 : 1 }}>{value}</span>;
-              }}
-            />
-            {/* Invisible lines just to show in legend */}
-            {(chartView === 'damph' || chartView === 'both') && (
-              <Line
-                dataKey="combinedDamph"
-                name={`${t('dAmphetamine')}`}
-                stroke={CHART_COLORS.idealDamph}
-                strokeWidth={2.5}
-                dot={false}
-                strokeOpacity={0}
-              />
-            )}
-            {(chartView === 'ldx' || chartView === 'both') && (
-              <Line
-                dataKey="combinedLdx"
-                name={`${t('lisdexamfetamine')}`}
-                stroke={CHART_COLORS.idealLdx}
-                strokeWidth={2}
-                strokeDasharray="3 3"
-                dot={false}
-                strokeOpacity={0}
-              />
-            )}
-            {templateProfile && daysWithDeviations.size > 0 && (chartView === 'damph' || chartView === 'both') && (
-              <Line
-                dataKey="templateDamph"
-                name={`${t('dAmphetamine')} (${t('regularPlanOverlay')})`}
-                stroke={CHART_COLORS.idealDamph}
-                strokeWidth={2}
-                strokeDasharray="3 3"
-                dot={false}
-                strokeOpacity={0}
-                opacity={0.5}
-              />
-            )}
-            {templateProfile && daysWithDeviations.size > 0 && (chartView === 'ldx' || chartView === 'both') && (
-              <Line
-                dataKey="templateLdx"
-                name={`${t('lisdexamfetamine')} (${t('regularPlanOverlay')})`}
-                stroke={CHART_COLORS.idealLdx}
-                strokeWidth={1.5}
-                strokeDasharray="3 3"
-                dot={false}
-                strokeOpacity={0}
-                opacity={0.5}
-              />
-            )}
-          </LineChart>
-        </ResponsiveContainer>
+      <div style={{ marginBottom: 8, paddingLeft: yAxisWidth + 10 }}>
+        {renderLegend({
+          payload: [
+            ...(chartView === 'damph' || chartView === 'both'
+              ? [
+                  {
+                    dataKey: 'combinedDamph',
+                    value: seriesLabels.combinedDamph.display,
+                    color: CHART_COLORS.idealDamph,
+                    payload: { opacity: 1 },
+                  },
+                ]
+              : []),
+            ...(chartView === 'ldx' || chartView === 'both'
+              ? [
+                  {
+                    dataKey: 'combinedLdx',
+                    value: seriesLabels.combinedLdx.display,
+                    color: CHART_COLORS.idealLdx,
+                    payload: { opacity: 1 },
+                  },
+                ]
+              : []),
+            ...(templateProfile && daysWithDeviations.size > 0 && (chartView === 'damph' || chartView === 'both')
+              ? [
+                  {
+                    dataKey: 'templateDamph',
+                    value: seriesLabels.templateDamph.display,
+                    color: CHART_COLORS.idealDamph,
+                    payload: { opacity: 0.5 },
+                  },
+                ]
+              : []),
+            ...(templateProfile && daysWithDeviations.size > 0 && (chartView === 'ldx' || chartView === 'both')
+              ? [
+                  {
+                    dataKey: 'templateLdx',
+                    value: seriesLabels.templateLdx.display,
+                    color: CHART_COLORS.idealLdx,
+                    payload: { opacity: 0.5 },
+                  },
+                ]
+              : []),
+          ],
+        })}
       </div>
 
       {/* Chart */}
@@ -321,7 +395,7 @@ const SimulationChart = ({
                 const h = payload.value as number;
                 let label: string;
                 if (showDayTimeOnXAxis === '24h') {
-                  label = `${h % 24}h`;
+                  label = `${h % 24}${t('unitHour')}`;
                 } else if (showDayTimeOnXAxis === '12h') {
                   const hour12 = h % 24;
                   if (hour12 === 12) {
@@ -365,7 +439,7 @@ const SimulationChart = ({
               allowDecimals={false}
               tickCount={20}
             />
-            <Tooltip
+            <RechartsTooltip
               content={({ active, payload, label }) => {
                 if (!active || !payload || payload.length === 0) return null;
 
@@ -395,13 +469,18 @@ const SimulationChart = ({
                     <p className="recharts-tooltip-label" style={{ margin: 0 }}>{t('time')}: {timeLabel}</p>
                     <ul className="recharts-tooltip-item-list" style={{ padding: 0, margin: 0 }}>
                       {payload.map((entry: any, index: number) => {
-                        const isTemplate = entry.name?.includes(t('regularPlanOverlay'));
+                        const labelInfo = seriesLabels[entry.dataKey] || { display: entry.name, full: entry.name };
+                        const isTemplate = entry.dataKey?.toString().includes('template');
                         const opacity = isTemplate ? 0.5 : 1;
                         const value = typeof entry.value === 'number' ? entry.value.toFixed(1) : entry.value;
 
                         return (
-                          <li key={`item-${index}`} className="recharts-tooltip-item" style={{ display: 'block', paddingTop: 4, paddingBottom: 4, color: entry.color, opacity }}>
-                            <span className="recharts-tooltip-item-name">{entry.name}</span>
+                          <li
+                            key={`item-${index}`}
+                            className="recharts-tooltip-item"
+                            style={{ display: 'block', paddingTop: 4, paddingBottom: 4, color: entry.color, opacity }}
+                          >
+                            <span className="recharts-tooltip-item-name" title={labelInfo.full}>{labelInfo.display}</span>
                             <span className="recharts-tooltip-item-separator">: </span>
                             <span className="recharts-tooltip-item-value">{value} {t('unitNgml')}</span>
                           </li>
@@ -486,7 +565,7 @@ const SimulationChart = ({
               <Line
                 type="monotone"
                 dataKey="combinedDamph"
-                name={`${t('dAmphetamine')}`}
+                name={seriesLabels.combinedDamph.display}
                 stroke={CHART_COLORS.idealDamph}
                 strokeWidth={2.5}
                 dot={false}
@@ -499,7 +578,7 @@ const SimulationChart = ({
               <Line
                 type="monotone"
                 dataKey="combinedLdx"
-                name={`${t('lisdexamfetamine')}`}
+                name={seriesLabels.combinedLdx.display}
                 stroke={CHART_COLORS.idealLdx}
                 strokeWidth={2}
                 dot={false}
@@ -514,7 +593,7 @@ const SimulationChart = ({
               <Line
                 type="monotone"
                 dataKey="templateDamph"
-                name={`${t('dAmphetamine')} (${t('regularPlanOverlay')})`}
+                name={seriesLabels.templateDamph.display}
                 stroke={CHART_COLORS.idealDamph}
                 strokeWidth={2}
                 strokeDasharray="3 3"
@@ -529,7 +608,7 @@ const SimulationChart = ({
               <Line
                 type="monotone"
                 dataKey="templateLdx"
-                name={`${t('lisdexamfetamine')} (${t('regularPlanOverlay')})`}
+                name={seriesLabels.templateLdx.display}
                 stroke={CHART_COLORS.idealLdx}
                 strokeWidth={1.5}
                 strokeDasharray="3 3"