📱 feat: improve switch component layout for mobile devices

- Fix switch layout in advanced settings to prevent text wrapping issues
- Add flex-shrink-0 to prevent switch compression on small screens
- Improve switch thumb visibility with stronger shadow
- Add pointer-events-none to thumb to fix iOS touch issues
- Use focus-visible instead of focus for better keyboard navigation
- Separate switch and label elements for better click targets

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: ervwalter

apps/web/src/components/settings/AdvancedSection.tsx

@@ -62,13 +62,15 @@ export function AdvancedSection({ control }: AdvancedSectionProps) {
             name="showCalories"
             control={control}
             render={({ field }) => (
-              <label className="flex items-start space-x-3 cursor-pointer">
-                <Switch checked={field.value ?? false} onCheckedChange={field.onChange} />
-                <div>
+              <div className="flex items-start space-x-3">
+                <div className="flex-shrink-0">
+                  <Switch checked={field.value ?? false} onCheckedChange={field.onChange} />
+                </div>
+                <label htmlFor={field.name} className="cursor-pointer">
                   <div className="text-sm font-medium text-gray-700">Show calorie calculations</div>
                   <p className="text-sm text-gray-600 mt-1">Display estimated calorie surplus/deficit based on your weight changes</p>
-                </div>
-              </label>
+                </label>
+              </div>
             )}
           />
         </div>

apps/web/src/components/ui/Switch.tsx

@@ -16,9 +16,9 @@ export const Switch = forwardRef<HTMLButtonElement, SwitchProps>(({ checked, onC
       onCheckedChange={onCheckedChange}
       name={name}
       disabled={disabled}
-      className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-gray-200"
+      className="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-gray-200"
     >
-      <SwitchPrimitive.Thumb className="inline-block h-5 w-5 transform rounded-full bg-white shadow-sm transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0.5" />
+      <SwitchPrimitive.Thumb className="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0" />
     </SwitchPrimitive.Root>
   );
 });