Update made info tooltips available on mobile, flex-wrap for smaller screens

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

src/components/day-schedule.tsx

@@ -116,6 +116,10 @@ const DaySchedule: React.FC<DayScheduleProps> = ({
                   <TooltipProvider>
                     <Tooltip>
                       <TooltipTrigger asChild>
+                        <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"
+                        >
                           <Badge
                             variant="outline"
                             className={`text-xs ${doseCountDiff > 0 ? 'bg-blue-50' : 'bg-orange-50'}`}
@@ -123,6 +127,7 @@ const DaySchedule: React.FC<DayScheduleProps> = ({
                             {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,6 +145,10 @@ const DaySchedule: React.FC<DayScheduleProps> = ({
                   <TooltipProvider>
                     <Tooltip>
                       <TooltipTrigger asChild>
+                        <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"
+                        >
                           <Badge
                             variant="outline"
                             className={`text-xs ${totalMgDiff > 0 ? 'bg-blue-50' : 'bg-orange-50'}`}
@@ -147,6 +156,7 @@ const DaySchedule: React.FC<DayScheduleProps> = ({
                             {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">

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">
+    <div className="flex flex-wrap-reverse items-center gap-2">
-      <Label className="text-sm font-medium">{t('language')}:</Label>
+      <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="en">{t('languageSelectorEN')}</SelectItem>
-          <SelectItem value="de">{t('german')}</SelectItem>
+          <SelectItem value="de">{t('languageSelectorDE')}</SelectItem>
         </SelectContent>
       </Select>
     </div>

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">
+                      <button
-                        {t('showTemplateDayInChart')}
+                        type="button"
-                      </Label>
+                        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">
+                      <button
-                        {t('showDayReferenceLines')}
+                        type="button"
-                      </Label>
+                        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">
+                      <button
-                        {t('showTherapeuticRangeLines')}
+                        type="button"
-                      </Label>
+                        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">
+                  <div className="flex items-center gap-2">
+                    <Label className="font-medium">
+                      {t('therapeuticRange')}
+                    </Label>
                     <TooltipProvider>
                       <Tooltip>
                         <TooltipTrigger asChild>
-                        <Label className="font-medium cursor-help">
+                          <button
-                          {t('therapeuticRange')}
+                            type="button"
-                        </Label>
+                            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 className="flex items-center gap-2">
+                  </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">
+              <div className="flex items-center gap-2">
+                <Label className="font-medium">{t('displayedDays')}</Label>
                 <TooltipProvider>
                   <Tooltip>
                     <TooltipTrigger asChild>
-                    <Label className="font-medium cursor-help">{t('displayedDays')}</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('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">
+              <div className="flex items-center gap-2">
+                <Label className="font-medium">{t('yAxisRange')}</Label>
                 <TooltipProvider>
                   <Tooltip>
                     <TooltipTrigger asChild>
-                    <Label className="font-medium cursor-help">{t('yAxisRange')}</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('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 className="flex items-center gap-2">
+              </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">
+              <div className="flex items-center gap-2">
+                <Label className="font-medium">{t('simulationDuration')}</Label>
                 <TooltipProvider>
                   <Tooltip>
                     <TooltipTrigger asChild>
-                    <Label className="font-medium cursor-help">{t('simulationDuration')}</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('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">
+              <div className="flex items-center gap-2">
+                <Label className="font-medium">{t('steadyStateDays')}</Label>
                 <TooltipProvider>
                   <Tooltip>
                     <TooltipTrigger asChild>
-                    <Label className="font-medium cursor-help">{t('steadyStateDays')}</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('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">
+              <div className="flex items-center gap-2">
+                <Label className="font-medium">{t('halfLife')}</Label>
                 <TooltipProvider>
                   <Tooltip>
                     <TooltipTrigger asChild>
-                    <Label className="font-medium cursor-help">{t('halfLife')}</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('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">
+              <div className="flex items-center gap-2">
+                <Label className="font-medium">{t('conversionHalfLife')}</Label>
                 <TooltipProvider>
                   <Tooltip>
                     <TooltipTrigger asChild>
-                    <Label className="font-medium cursor-help">{t('conversionHalfLife')}</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('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">
+              <div className="flex items-center gap-2">
+                <Label className="font-medium">{t('absorptionHalfLife')}</Label>
                 <TooltipProvider>
                   <Tooltip>
                     <TooltipTrigger asChild>
-                    <Label className="font-medium cursor-help">{t('absorptionHalfLife')}</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('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">
+                      <button
-                        {t('weightBasedVdScaling')}
+                        type="button"
-                      </Label>
+                        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">
+                  <div className="flex items-center gap-2">
+                    <Label className="text-sm font-medium">{t('bodyWeight')}</Label>
                     <TooltipProvider>
                       <Tooltip>
                         <TooltipTrigger asChild>
-                        <Label className="text-sm font-medium cursor-help">{t('bodyWeight')}</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('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">
+                      <button
-                        {t('foodEffectEnabled')}
+                        type="button"
-                      </Label>
+                        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">
+                  <div className="flex items-center gap-2">
+                    <Label className="text-sm font-medium">{t('tmaxDelay')}</Label>
                     <TooltipProvider>
                       <Tooltip>
                         <TooltipTrigger asChild>
-                        <Label className="text-sm font-medium cursor-help">{t('tmaxDelay')}</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('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">
+                      <button
-                        {t('urinePHTendency')}
+                        type="button"
-                      </Label>
+                        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">
+                  <div className="flex items-center gap-2">
+                    <Label className="text-sm font-medium">{t('urinePHValue')}</Label>
                     <TooltipProvider>
                       <Tooltip>
                         <TooltipTrigger asChild>
-                        <Label className="text-sm font-medium cursor-help">{t('urinePHValue')}</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('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">
+              <div className="flex items-center gap-2">
+                <Label className="font-medium">{t('oralBioavailability')}</Label>
                 <TooltipProvider>
                   <Tooltip>
                     <TooltipTrigger asChild>
-                    <Label className="font-medium cursor-help">{t('oralBioavailability')}</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('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)}

src/locales/de.ts

@@ -10,9 +10,9 @@ export const de = {
   both: "Beide",
 
   // Language selector
-  language: "Sprache",
+  languageSelectorLabel: "Sprache",
-  english: "English",
+  languageSelectorEN: "English",
-  german: "Deutsch",
+  languageSelectorDE: "Deutsch",
 
   // Dose Schedule
   myPlan: "Mein Plan",

src/locales/en.ts

@@ -10,9 +10,9 @@ export const en = {
   both: "Both",
 
   // Language selector
-  language: "Language",
+  languageSelectorLabel: "Language",
-  english: "English",
+  languageSelectorEN: "English",
-  german: "Deutsch",
+  languageSelectorDE: "Deutsch",
 
   // Dose Schedule
   myPlan: "My Plan",