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

src/App.tsx

@@ -49,6 +49,19 @@ const MedPlanAssistant = () => {
     setShowDisclaimer(true);
   };
 
+  // Use shorter button labels on narrow screens to keep the pin control visible
+  const [useCompactButtons, setUseCompactButtons] = React.useState(false);
+
+  React.useEffect(() => {
+    const updateCompact = () => {
+      setUseCompactButtons(window.innerWidth < 520); // tweakable threshold
+    };
+
+    updateCompact();
+    window.addEventListener('resize', updateCompact);
+    return () => window.removeEventListener('resize', updateCompact);
+  }, []);
+
   const {
     appState,
     updateNestedState,
@@ -113,19 +126,19 @@ const MedPlanAssistant = () => {
           {/* Both Columns - Chart */}
           <div className={`xl:col-span-2 bg-card p-6 rounded-lg border min-h-[600px] flex flex-col ${uiSettings.stickyChart ? 'sticky top-2 z-30 shadow-lg' : ''}`}
                style={uiSettings.stickyChart ? { borderColor: 'hsl(var(--primary))' } : {}}>
-            <div className="flex justify-between items-center mb-4">
-              <div className="flex justify-center gap-2">
+            <div className="flex flex-wrap items-center gap-3 justify-between mb-4">
+              <div className="flex flex-wrap justify-center gap-2">
                 <Button
                   onClick={() => updateUiSetting('chartView', 'damph')}
                   variant={chartView === 'damph' ? 'default' : 'secondary'}
                 >
-                  {t('dAmphetamine')}
+                  {t(useCompactButtons ? 'dAmphetamineShort' : 'dAmphetamine')}
                 </Button>
                 <Button
                   onClick={() => updateUiSetting('chartView', 'ldx')}
                   variant={chartView === 'ldx' ? 'default' : 'secondary'}
                 >
-                  {t('lisdexamfetamine')}
+                  {t(useCompactButtons ? 'lisdexamfetamineShort' : 'lisdexamfetamine')}
                 </Button>
                 <Button
                   onClick={() => updateUiSetting('chartView', 'both')}
@@ -138,6 +151,7 @@ const MedPlanAssistant = () => {
                 onClick={() => updateUiSetting('stickyChart', !uiSettings.stickyChart)}
                 variant={uiSettings.stickyChart ? 'default' : 'outline'}
                 size="sm"
+                className="shrink-0"
                 title={uiSettings.stickyChart ? t('unpinChart') : t('pinChart')}
               >
                 {uiSettings.stickyChart ? <Pin size={16} /> : <PinOff size={16} />}