From 6f6e5d9696b5d4ebe34428a20cb7f8a9c8f7fca3 Mon Sep 17 00:00:00 2001
From: Andreas Weyer <dev@cbaoth.de>
Date: Sat, 10 Jan 2026 14:43:37 +0000
Subject: [PATCH] Update made info tooltips available on mobile, flex-wrap for
 smaller screens

---
 src/App.tsx                          |   2 +-
 src/components/day-schedule.tsx      |  34 ++-
 src/components/language-selector.tsx |   8 +-
 src/components/settings.tsx          | 434 ++++++++++++++++++---------
 src/locales/de.ts                    |   6 +-
 src/locales/en.ts                    |   6 +-
 6 files changed, 325 insertions(+), 165 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index e2444bb..44a851d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -102,10 +102,10 @@ const MedPlanAssistant = () => {
           <div className="flex justify-between items-start">
             <div>
               <h1 className="text-3xl md:text-4xl font-bold tracking-tight">{t('appTitle')}</h1>
-              <p className="text-muted-foreground mt-1">{t('appSubtitle')}</p>
             </div>
             <LanguageSelector currentLanguage={currentLanguage} onLanguageChange={changeLanguage} t={t} />
           </div>
+          <p className="text-muted-foreground mt-1">{t('appSubtitle')}</p>
         </header>
 
         <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
diff --git a/src/components/day-schedule.tsx b/src/components/day-schedule.tsx
index a390b8b..9178c94 100644
--- a/src/components/day-schedule.tsx
+++ b/src/components/day-schedule.tsx
@@ -116,13 +116,18 @@ const DaySchedule: React.FC<DayScheduleProps> = ({
                   <TooltipProvider>
                     <Tooltip>
                       <TooltipTrigger asChild>
-                        <Badge
-                          variant="outline"
-                          className={`text-xs ${doseCountDiff > 0 ? 'bg-blue-50' : 'bg-orange-50'}`}
+                        <button
+                          type="button"
+                          className="inline-flex items-center cursor-help focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 rounded-md"
                         >
-                          {doseCountDiff > 0 ? <TrendingUp className="h-3 w-3 inline mr-1" /> : <TrendingDown className="h-3 w-3 inline mr-1" />}
-                          {day.doses.length} {day.doses.length === 1 ? t('dose') : t('doses')}
-                        </Badge>
+                          <Badge
+                            variant="outline"
+                            className={`text-xs ${doseCountDiff > 0 ? 'bg-blue-50' : 'bg-orange-50'}`}
+                          >
+                            {doseCountDiff > 0 ? <TrendingUp className="h-3 w-3 inline mr-1" /> : <TrendingDown className="h-3 w-3 inline mr-1" />}
+                            {day.doses.length} {day.doses.length === 1 ? t('dose') : t('doses')}
+                          </Badge>
+                        </button>
                       </TooltipTrigger>
                       <TooltipContent>
                         <p className="text-xs">
@@ -140,13 +145,18 @@ const DaySchedule: React.FC<DayScheduleProps> = ({
                   <TooltipProvider>
                     <Tooltip>
                       <TooltipTrigger asChild>
-                        <Badge
-                          variant="outline"
-                          className={`text-xs ${totalMgDiff > 0 ? 'bg-blue-50' : 'bg-orange-50'}`}
+                        <button
+                          type="button"
+                          className="inline-flex items-center cursor-help focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 rounded-md"
                         >
-                          {totalMgDiff > 0 ? <TrendingUp className="h-3 w-3 inline mr-1" /> : <TrendingDown className="h-3 w-3 inline mr-1" />}
-                          {day.doses.reduce((sum, dose) => sum + (parseFloat(dose.ldx) || 0), 0).toFixed(1)} mg
-                        </Badge>
+                          <Badge
+                            variant="outline"
+                            className={`text-xs ${totalMgDiff > 0 ? 'bg-blue-50' : 'bg-orange-50'}`}
+                          >
+                            {totalMgDiff > 0 ? <TrendingUp className="h-3 w-3 inline mr-1" /> : <TrendingDown className="h-3 w-3 inline mr-1" />}
+                            {day.doses.reduce((sum, dose) => sum + (parseFloat(dose.ldx) || 0), 0).toFixed(1)} mg
+                          </Badge>
+                        </button>
                       </TooltipTrigger>
                       <TooltipContent>
                         <p className="text-xs">
diff --git a/src/components/language-selector.tsx b/src/components/language-selector.tsx
index 132996c..0289fdd 100644
--- a/src/components/language-selector.tsx
+++ b/src/components/language-selector.tsx
@@ -14,15 +14,15 @@ import { Label } from './ui/label';
 
 const LanguageSelector = ({ currentLanguage, onLanguageChange, t }: any) => {
   return (
-    <div className="flex items-center gap-2">
-      <Label className="text-sm font-medium">{t('language')}:</Label>
+    <div className="flex flex-wrap-reverse items-center gap-2">
+      <Label className="text-sm font-medium">{t('languageSelectorLabel')}</Label>
       <Select value={currentLanguage} onValueChange={onLanguageChange}>
         <SelectTrigger className="w-32">
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
-          <SelectItem value="en">{t('english')}</SelectItem>
-          <SelectItem value="de">{t('german')}</SelectItem>
+          <SelectItem value="en">{t('languageSelectorEN')}</SelectItem>
+          <SelectItem value="de">{t('languageSelectorDE')}</SelectItem>
         </SelectContent>
       </Select>
     </div>
diff --git a/src/components/settings.tsx b/src/components/settings.tsx
index 140ccb5..4f5330e 100644
--- a/src/components/settings.tsx
+++ b/src/components/settings.tsx
@@ -18,7 +18,7 @@ import { Label } from './ui/label';
 import { Separator } from './ui/separator';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
-import { ChevronDown, ChevronUp } from 'lucide-react';
+import { ChevronDown, ChevronUp, Info } from 'lucide-react';
 import { getDefaultState } from '../constants/defaults';
 
 /**
@@ -173,12 +173,19 @@ const Settings = ({
                   checked={showTemplateDay}
                   onCheckedChange={checked => onUpdateUiSetting('showTemplateDay', checked)}
                 />
+                <Label htmlFor="showTemplateDay" className="font-medium">
+                  {t('showTemplateDayInChart')}
+                </Label>
                 <TooltipProvider>
                   <Tooltip>
                     <TooltipTrigger asChild>
-                      <Label htmlFor="showTemplateDay" className="font-medium cursor-help">
-                        {t('showTemplateDayInChart')}
-                      </Label>
+                      <button
+                        type="button"
+                        className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                        aria-label={t('showTemplateDayTooltip')}
+                      >
+                        <Info className="h-4 w-4" />
+                      </button>
                     </TooltipTrigger>
                     <TooltipContent side="right">
                       <p className="text-xs max-w-xs">{tWithDefaults(t, 'showTemplateDayTooltip', defaultsForT)}</p>
@@ -195,12 +202,19 @@ const Settings = ({
                   checked={showDayReferenceLines}
                   onCheckedChange={checked => onUpdateUiSetting('showDayReferenceLines', checked)}
                 />
+                <Label htmlFor="showDayReferenceLines" className="font-medium">
+                  {t('showDayReferenceLines')}
+                </Label>
                 <TooltipProvider>
                   <Tooltip>
                     <TooltipTrigger asChild>
-                      <Label htmlFor="showDayReferenceLines" className="font-medium cursor-help">
-                        {t('showDayReferenceLines')}
-                      </Label>
+                      <button
+                        type="button"
+                        className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                        aria-label={t('showDayReferenceLinesTooltip')}
+                      >
+                        <Info className="h-4 w-4" />
+                      </button>
                     </TooltipTrigger>
                     <TooltipContent side="right">
                       <p className="text-xs max-w-xs">{tWithDefaults(t, 'showDayReferenceLinesTooltip', defaultsForT)}</p>
@@ -217,12 +231,19 @@ const Settings = ({
                   checked={showTherapeuticRange}
                   onCheckedChange={checked => onUpdateUiSetting('showTherapeuticRange', checked)}
                 />
+                <Label htmlFor="showTherapeuticRange" className="font-medium">
+                  {t('showTherapeuticRangeLines')}
+                </Label>
                 <TooltipProvider>
                   <Tooltip>
                     <TooltipTrigger asChild>
-                      <Label htmlFor="showTherapeuticRange" className="font-medium cursor-help">
-                        {t('showTherapeuticRangeLines')}
-                      </Label>
+                      <button
+                        type="button"
+                        className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                        aria-label={t('showTherapeuticRangeLinesTooltip')}
+                      >
+                        <Info className="h-4 w-4" />
+                      </button>
                     </TooltipTrigger>
                     <TooltipContent side="right">
                       <p className="text-xs max-w-xs">{tWithDefaults(t, 'showTherapeuticRangeLinesTooltip', defaultsForT)}</p>
@@ -232,19 +253,28 @@ const Settings = ({
               </div>
               {showTherapeuticRange && (
                 <div className="ml-8 space-y-2">
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <Label className="font-medium cursor-help">
-                          {t('therapeuticRange')}
-                        </Label>
-                      </TooltipTrigger>
-                      <TooltipContent side="right">
-                        <p className="text-xs max-w-xs">{tWithDefaults(t, 'therapeuticRangeTooltip', defaultsForT)}</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
                   <div className="flex items-center gap-2">
+                    <Label className="font-medium">
+                      {t('therapeuticRange')}
+                    </Label>
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <button
+                            type="button"
+                            className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                            aria-label={t('therapeuticRangeTooltip')}
+                          >
+                            <Info className="h-4 w-4" />
+                          </button>
+                        </TooltipTrigger>
+                        <TooltipContent side="right">
+                          <p className="text-xs max-w-xs">{tWithDefaults(t, 'therapeuticRangeTooltip', defaultsForT)}</p>
+                        </TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+                  </div>
+                  <div className="flex flex-wrap items-center gap-2">
                     <FormNumericInput
                       value={therapeuticRange.min}
                       onChange={val => onUpdateTherapeuticRange('min', val)}
@@ -273,16 +303,25 @@ const Settings = ({
             <Separator className="my-4" />
 
             <div className="space-y-2">
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Label className="font-medium cursor-help">{t('displayedDays')}</Label>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">
-                    <p className="text-xs max-w-xs">{tWithDefaults(t, 'displayedDaysTooltip', defaultsForT)}</p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
+              <div className="flex items-center gap-2">
+                <Label className="font-medium">{t('displayedDays')}</Label>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button
+                        type="button"
+                        className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                        aria-label={t('displayedDaysTooltip')}
+                      >
+                        <Info className="h-4 w-4" />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent side="right">
+                      <p className="text-xs max-w-xs">{tWithDefaults(t, 'displayedDaysTooltip', defaultsForT)}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </div>
               <FormNumericInput
                 value={displayedDays}
                 onChange={val => onUpdateUiSetting('displayedDays', val)}
@@ -296,17 +335,26 @@ const Settings = ({
             </div>
 
             <div className="space-y-2">
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Label className="font-medium cursor-help">{t('yAxisRange')}</Label>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">
-                    <p className="text-xs max-w-xs">{tWithDefaults(t, 'yAxisRangeTooltip', defaultsForT)}</p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
               <div className="flex items-center gap-2">
+                <Label className="font-medium">{t('yAxisRange')}</Label>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button
+                        type="button"
+                        className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                        aria-label={t('yAxisRangeTooltip')}
+                      >
+                        <Info className="h-4 w-4" />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent side="right">
+                      <p className="text-xs max-w-xs">{tWithDefaults(t, 'yAxisRangeTooltip', defaultsForT)}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </div>
+              <div className="flex flex-wrap items-center gap-2">
                 <FormNumericInput
                   value={yAxisMin}
                   onChange={val => onUpdateUiSetting('yAxisMin', val)}
@@ -392,16 +440,25 @@ const Settings = ({
         {isSimulationExpanded && (
           <CardContent className="space-y-4">
             <div className="space-y-2">
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Label className="font-medium cursor-help">{t('simulationDuration')}</Label>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">
-                    <p className="text-xs max-w-xs">{tWithDefaults(t, 'simulationDurationTooltip', defaultsForT)}</p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
+              <div className="flex items-center gap-2">
+                <Label className="font-medium">{t('simulationDuration')}</Label>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button
+                        type="button"
+                        className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                        aria-label={t('simulationDurationTooltip')}
+                      >
+                        <Info className="h-4 w-4" />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent side="right">
+                      <p className="text-xs max-w-xs">{tWithDefaults(t, 'simulationDurationTooltip', defaultsForT)}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </div>
               <FormNumericInput
                 value={simulationDays}
                 onChange={val => onUpdateUiSetting('simulationDays', val)}
@@ -415,16 +472,25 @@ const Settings = ({
             </div>
 
             <div className="space-y-2">
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Label className="font-medium cursor-help">{t('steadyStateDays')}</Label>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">
-                    <p className="text-xs max-w-xs">{tWithDefaults(t, 'steadyStateDaysTooltip', defaultsForT)}</p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
+              <div className="flex items-center gap-2">
+                <Label className="font-medium">{t('steadyStateDays')}</Label>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button
+                        type="button"
+                        className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                        aria-label={t('steadyStateDaysTooltip')}
+                      >
+                        <Info className="h-4 w-4" />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent side="right">
+                      <p className="text-xs max-w-xs">{tWithDefaults(t, 'steadyStateDaysTooltip', defaultsForT)}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </div>
               <FormNumericInput
                 value={pkParams.advanced.steadyStateDays}
                 onChange={val => updateAdvancedDirect('steadyStateDays', val)}
@@ -451,16 +517,25 @@ const Settings = ({
           <CardContent className="space-y-4">
             <h3 className="text-lg font-semibold">{t('dAmphetamineParameters')}</h3>
             <div className="space-y-2">
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Label className="font-medium cursor-help">{t('halfLife')}</Label>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">
-                    <p className="text-xs max-w-xs">{renderTooltipWithLinks(tWithDefaults(t, 'halfLifeTooltip', defaultsForT))}</p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
+              <div className="flex items-center gap-2">
+                <Label className="font-medium">{t('halfLife')}</Label>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button
+                        type="button"
+                        className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                        aria-label={t('halfLifeTooltip')}
+                      >
+                        <Info className="h-4 w-4" />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent side="right">
+                      <p className="text-xs max-w-xs">{renderTooltipWithLinks(tWithDefaults(t, 'halfLifeTooltip', defaultsForT))}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </div>
               <FormNumericInput
                 value={pkParams.damph.halfLife}
                 onChange={val => onUpdatePkParams('damph', { ...pkParams.damph, halfLife: val })}
@@ -480,16 +555,25 @@ const Settings = ({
 
             <h3 className="text-lg font-semibold">{t('lisdexamfetamineParameters')}</h3>
             <div className="space-y-2">
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Label className="font-medium cursor-help">{t('conversionHalfLife')}</Label>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">
-                    <p className="text-xs max-w-xs">{tWithDefaults(t, 'conversionHalfLifeTooltip', defaultsForT)}</p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
+              <div className="flex items-center gap-2">
+                <Label className="font-medium">{t('conversionHalfLife')}</Label>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button
+                        type="button"
+                        className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                        aria-label={t('conversionHalfLifeTooltip')}
+                      >
+                        <Info className="h-4 w-4" />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent side="right">
+                      <p className="text-xs max-w-xs">{tWithDefaults(t, 'conversionHalfLifeTooltip', defaultsForT)}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </div>
               <FormNumericInput
                 value={pkParams.ldx.halfLife}
                 onChange={val => onUpdatePkParams('ldx', { ...pkParams.ldx, halfLife: val })}
@@ -505,16 +589,25 @@ const Settings = ({
             </div>
 
             <div className="space-y-2">
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Label className="font-medium cursor-help">{t('absorptionHalfLife')}</Label>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">
-                    <p className="text-xs max-w-xs">{tWithDefaults(t, 'absorptionHalfLifeTooltip', defaultsForT)}</p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
+              <div className="flex items-center gap-2">
+                <Label className="font-medium">{t('absorptionHalfLife')}</Label>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button
+                        type="button"
+                        className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                        aria-label={t('absorptionHalfLifeTooltip')}
+                      >
+                        <Info className="h-4 w-4" />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent side="right">
+                      <p className="text-xs max-w-xs">{tWithDefaults(t, 'absorptionHalfLifeTooltip', defaultsForT)}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </div>
               <FormNumericInput
                 value={pkParams.ldx.absorptionHalfLife}
                 onChange={val => onUpdatePkParams('ldx', { ...pkParams.ldx, absorptionHalfLife: val })}
@@ -554,12 +647,19 @@ const Settings = ({
                   checked={pkParams.advanced.weightBasedVd.enabled}
                   onCheckedChange={checked => updateAdvanced('weightBasedVd', 'enabled', checked)}
                 />
+                <Label htmlFor="weightBasedVdEnabled" className="font-medium">
+                  {t('weightBasedVdScaling')}
+                </Label>
                 <TooltipProvider>
                   <Tooltip>
                     <TooltipTrigger asChild>
-                      <Label htmlFor="weightBasedVdEnabled" className="font-medium cursor-help">
-                        {t('weightBasedVdScaling')}
-                      </Label>
+                      <button
+                        type="button"
+                        className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                        aria-label={t('weightBasedVdTooltip')}
+                      >
+                        <Info className="h-4 w-4" />
+                      </button>
                     </TooltipTrigger>
                     <TooltipContent side="right">
                       <p className="text-xs max-w-xs">{tWithDefaults(t, 'weightBasedVdTooltip', defaultsForT)}</p>
@@ -569,16 +669,25 @@ const Settings = ({
               </div>
               {pkParams.advanced.weightBasedVd.enabled && (
                 <div className="ml-8 space-y-2">
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <Label className="text-sm font-medium cursor-help">{t('bodyWeight')}</Label>
-                      </TooltipTrigger>
-                      <TooltipContent side="right">
-                        <p className="text-xs max-w-xs">{renderTooltipWithLinks(tWithDefaults(t, 'bodyWeightTooltip', defaultsForT))}</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
+                  <div className="flex items-center gap-2">
+                    <Label className="text-sm font-medium">{t('bodyWeight')}</Label>
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <button
+                            type="button"
+                            className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                            aria-label={t('bodyWeightTooltip')}
+                          >
+                            <Info className="h-4 w-4" />
+                          </button>
+                        </TooltipTrigger>
+                        <TooltipContent side="right">
+                          <p className="text-xs max-w-xs">{renderTooltipWithLinks(tWithDefaults(t, 'bodyWeightTooltip', defaultsForT))}</p>
+                        </TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+                  </div>
                   <FormNumericInput
                     value={pkParams.advanced.weightBasedVd.bodyWeight}
                     onChange={val => updateAdvanced('weightBasedVd', 'bodyWeight', val)}
@@ -602,12 +711,19 @@ const Settings = ({
                   checked={pkParams.advanced.foodEffect.enabled}
                   onCheckedChange={checked => updateAdvanced('foodEffect', 'enabled', checked)}
                 />
+                <Label htmlFor="foodEffectEnabled" className="font-medium">
+                  {t('foodEffectEnabled')}
+                </Label>
                 <TooltipProvider>
                   <Tooltip>
                     <TooltipTrigger asChild>
-                      <Label htmlFor="foodEffectEnabled" className="font-medium cursor-help">
-                        {t('foodEffectEnabled')}
-                      </Label>
+                      <button
+                        type="button"
+                        className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                        aria-label={t('foodEffectTooltip')}
+                      >
+                        <Info className="h-4 w-4" />
+                      </button>
                     </TooltipTrigger>
                     <TooltipContent side="right">
                       <p className="text-xs max-w-xs">{tWithDefaults(t, 'foodEffectTooltip', defaultsForT)}</p>
@@ -617,16 +733,25 @@ const Settings = ({
               </div>
               {pkParams.advanced.foodEffect.enabled && (
                 <div className="ml-8 space-y-2">
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <Label className="text-sm font-medium cursor-help">{t('tmaxDelay')}</Label>
-                      </TooltipTrigger>
-                      <TooltipContent side="right">
-                        <p className="text-xs max-w-xs">{renderTooltipWithLinks(tWithDefaults(t, 'tmaxDelayTooltip', defaultsForT))}</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
+                  <div className="flex items-center gap-2">
+                    <Label className="text-sm font-medium">{t('tmaxDelay')}</Label>
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <button
+                            type="button"
+                            className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                            aria-label={t('tmaxDelayTooltip')}
+                          >
+                            <Info className="h-4 w-4" />
+                          </button>
+                        </TooltipTrigger>
+                        <TooltipContent side="right">
+                          <p className="text-xs max-w-xs">{renderTooltipWithLinks(tWithDefaults(t, 'tmaxDelayTooltip', defaultsForT))}</p>
+                        </TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+                  </div>
                   <FormNumericInput
                     value={pkParams.advanced.foodEffect.tmaxDelay}
                     onChange={val => updateAdvanced('foodEffect', 'tmaxDelay', val)}
@@ -650,12 +775,19 @@ const Settings = ({
                   checked={pkParams.advanced.urinePh.enabled}
                   onCheckedChange={checked => updateAdvanced('urinePh', 'enabled', checked)}
                 />
+                <Label htmlFor="urinePHEnabled" className="font-medium">
+                  {t('urinePHTendency')}
+                </Label>
                 <TooltipProvider>
                   <Tooltip>
                     <TooltipTrigger asChild>
-                      <Label htmlFor="urinePHEnabled" className="font-medium cursor-help">
-                        {t('urinePHTendency')}
-                      </Label>
+                      <button
+                        type="button"
+                        className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                        aria-label={t('urinePHTooltip')}
+                      >
+                        <Info className="h-4 w-4" />
+                      </button>
                     </TooltipTrigger>
                     <TooltipContent side="right">
                       <p className="text-xs max-w-xs">{tWithDefaults(t, 'urinePHTooltip', defaultsForT)}</p>
@@ -665,25 +797,34 @@ const Settings = ({
               </div>
               {pkParams.advanced.urinePh.enabled && (
                 <div className="ml-8 space-y-2">
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <Label className="text-sm font-medium cursor-help">{t('urinePHValue')}</Label>
-                      </TooltipTrigger>
-                      <TooltipContent side="right">
-                        <p className="text-xs max-w-xs">{tWithDefaults(t, 'urinePHValueTooltip', defaultsForT)}</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
+                  <div className="flex items-center gap-2">
+                    <Label className="text-sm font-medium">{t('urinePHValue')}</Label>
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <button
+                            type="button"
+                            className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                            aria-label={t('urinePHValueTooltip')}
+                          >
+                            <Info className="h-4 w-4" />
+                          </button>
+                        </TooltipTrigger>
+                        <TooltipContent side="right">
+                          <p className="text-xs max-w-xs">{tWithDefaults(t, 'urinePHValueTooltip', defaultsForT)}</p>
+                        </TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+                  </div>
                   <FormNumericInput
                     value={pkParams.advanced.urinePh.phTendency}
                     onChange={val => updateAdvanced('urinePh', 'phTendency', val)}
                     increment={0.1}
                     min={5.5}
                     max={8.0}
+                    unit={t('phUnit')}
                     required={true}
                   />
-                  <p className="text-xs text-muted-foreground">{t('phUnit')}</p>
                 </div>
               )}
             </div>
@@ -692,16 +833,25 @@ const Settings = ({
 
             {/* Oral Bioavailability */}
             <div className="space-y-2">
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Label className="font-medium cursor-help">{t('oralBioavailability')}</Label>
-                  </TooltipTrigger>
-                  <TooltipContent side="right">
-                    <p className="text-xs max-w-xs">{renderTooltipWithLinks(tWithDefaults(t, 'oralBioavailabilityTooltip', defaultsForT))}</p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
+              <div className="flex items-center gap-2">
+                <Label className="font-medium">{t('oralBioavailability')}</Label>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button
+                        type="button"
+                        className="inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                        aria-label={t('oralBioavailabilityTooltip')}
+                      >
+                        <Info className="h-4 w-4" />
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent side="right">
+                      <p className="text-xs max-w-xs">{renderTooltipWithLinks(tWithDefaults(t, 'oralBioavailabilityTooltip', defaultsForT))}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </div>
               <FormNumericInput
                 value={pkParams.advanced.fOral}
                 onChange={val => updateAdvancedDirect('fOral', val)}
diff --git a/src/locales/de.ts b/src/locales/de.ts
index 2c30568..602ae8d 100644
--- a/src/locales/de.ts
+++ b/src/locales/de.ts
@@ -10,9 +10,9 @@ export const de = {
   both: "Beide",
 
   // Language selector
-  language: "Sprache",
-  english: "English",
-  german: "Deutsch",
+  languageSelectorLabel: "Sprache",
+  languageSelectorEN: "English",
+  languageSelectorDE: "Deutsch",
 
   // Dose Schedule
   myPlan: "Mein Plan",
diff --git a/src/locales/en.ts b/src/locales/en.ts
index e53e989..689a8a6 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -10,9 +10,9 @@ export const en = {
   both: "Both",
 
   // Language selector
-  language: "Language",
-  english: "English",
-  german: "Deutsch",
+  languageSelectorLabel: "Language",
+  languageSelectorEN: "English",
+  languageSelectorDE: "Deutsch",
 
   // Dose Schedule
   myPlan: "My Plan",