mobile ui fix

apps/frontend-mobile/app/(tabs)/profile.tsx

@@ -818,6 +818,9 @@ const styles = StyleSheet.create({
     color: colors.text,
     marginTop: spacing.lg,
   },
+  authTitleTablet: {
+    fontSize: 32,
+  },
   authSubtitle: {
     fontSize: 16,
     color: colors.textSecondary,
@@ -825,11 +828,18 @@ const styles = StyleSheet.create({
     marginTop: spacing.sm,
     marginBottom: spacing.xl,
   },
+  authSubtitleTablet: {
+    fontSize: 18,
+    maxWidth: 400,
+  },
   avatarSection: {
     alignItems: 'center',
     padding: spacing.xl,
     backgroundColor: colors.card,
   },
+  avatarSectionTablet: {
+    paddingVertical: spacing.xxl,
+  },
   avatarContainer: {
     width: 100,
     height: 100,
@@ -839,11 +849,21 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     overflow: 'hidden',
   },
+  avatarContainerTablet: {
+    width: 140,
+    height: 140,
+    borderRadius: 70,
+  },
   avatarImage: {
     width: 100,
     height: 100,
     borderRadius: 50,
   },
+  avatarImageTablet: {
+    width: 140,
+    height: 140,
+    borderRadius: 70,
+  },
   avatarOverlay: {
     position: 'absolute',
     top: 0,
@@ -866,6 +886,11 @@ const styles = StyleSheet.create({
     marginTop: spacing.sm,
     gap: spacing.md,
   },
+  infoSectionTablet: {
+    maxWidth: 600,
+    alignSelf: 'center',
+    width: '100%',
+  },
   infoCard: {
     backgroundColor: colors.surfaceLow,
     padding: spacing.md,
@@ -890,6 +915,11 @@ const styles = StyleSheet.create({
     marginTop: spacing.sm,
     backgroundColor: colors.card,
   },
+  menuSectionTablet: {
+    maxWidth: 600,
+    alignSelf: 'center',
+    width: '100%',
+  },
   menuItem: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -936,11 +966,18 @@ const styles = StyleSheet.create({
     paddingVertical: spacing.md,
     paddingHorizontal: spacing.xl,
   },
+  buttonTablet: {
+    paddingVertical: spacing.lg,
+    paddingHorizontal: spacing.xl * 1.5,
+  },
   buttonText: {
     color: colors.textInverse,
     fontSize: 16,
     fontWeight: '600',
   },
+  buttonTextTablet: {
+    fontSize: 18,
+  },
   linkButton: {
     marginTop: spacing.md,
   },
@@ -959,6 +996,11 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: colors.danger,
   },
+  logoutButtonTablet: {
+    maxWidth: 600,
+    alignSelf: 'center',
+    width: '100%',
+  },
   logoutText: {
     marginLeft: spacing.sm,
     color: colors.danger,

apps/frontend-mobile/components/MedicineCard.tsx

@@ -1,26 +1,34 @@
 import React from 'react';
-import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { View, Text, StyleSheet, TouchableOpacity, useWindowDimensions } from 'react-native';
 import { useRouter } from 'expo-router';
 import { Ionicons } from '@expo/vector-icons';
 import { colors, spacing, borderRadius } from '../constants/theme';
 import { StockBadge } from './StockBadge';
 import { Medicine } from '../types';
 
+const TABLET_MIN_WIDTH = 768;
+
 interface MedicineCardProps {
   medicine: Medicine;
 }
 
 export function MedicineCard({ medicine }: MedicineCardProps) {
   const router = useRouter();
+  const { width } = useWindowDimensions();
+  const isTablet = width >= TABLET_MIN_WIDTH;
 
   const handlePress = () => {
     router.push(`/medicine/${medicine.nregistro}`);
   };
 
   return (
-    <TouchableOpacity style={styles.card} onPress={handlePress} activeOpacity={0.7}>
+    <TouchableOpacity
+      style={[styles.card, isTablet && styles.cardTablet]}
+      onPress={handlePress}
+      activeOpacity={0.7}
+    >
       <View style={styles.header}>
-        <Text style={styles.name} numberOfLines={2}>
+        <Text style={[styles.name, isTablet && styles.nameTablet]} numberOfLines={2}>
           {medicine.nombre}
         </Text>
         <StockBadge stock={medicine.stock} />
@@ -33,14 +41,14 @@ export function MedicineCard({ medicine }: MedicineCardProps) {
       <View style={styles.footer}>
         <View style={styles.priceContainer}>
           <Ionicons name="pricetag" size={14} color={colors.textSecondary} />
-          <Text style={styles.price}>
+          <Text style={[styles.price, isTablet && styles.priceTablet]}>
             {medicine.precio ? `${medicine.precio.toFixed(2)} €` : 'Sin precio'}
           </Text>
         </View>
 
         <View style={styles.labContainer}>
           <Ionicons name="business" size={14} color={colors.textSecondary} />
-          <Text style={styles.laboratorio} numberOfLines={1}>
+          <Text style={[styles.laboratorio, isTablet && styles.laboratorioTablet]} numberOfLines={1}>
             {medicine.laboratorio}
           </Text>
         </View>
@@ -62,6 +70,12 @@ const styles = StyleSheet.create({
     shadowRadius: 8,
     elevation: 2,
   },
+  cardTablet: {
+    padding: spacing.lg,
+    maxWidth: 700,
+    alignSelf: 'center',
+    width: '100%',
+  },
   header: {
     flexDirection: 'row',
     justifyContent: 'space-between',
@@ -75,6 +89,9 @@ const styles = StyleSheet.create({
     color: colors.text,
     marginRight: spacing.sm,
   },
+  nameTablet: {
+    fontSize: 18,
+  },
   principioActivo: {
     fontSize: 14,
     color: colors.textSecondary,
@@ -95,6 +112,9 @@ const styles = StyleSheet.create({
     color: colors.primary,
     marginLeft: spacing.xs,
   },
+  priceTablet: {
+    fontSize: 16,
+  },
   labContainer: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -107,4 +127,8 @@ const styles = StyleSheet.create({
     marginLeft: spacing.xs,
     maxWidth: 120,
   },
+  laboratorioTablet: {
+    fontSize: 14,
+    maxWidth: 200,
+  },
 });

apps/frontend-mobile/components/SearchBar.tsx

@@ -1,8 +1,10 @@
 import React, { useState } from 'react';
-import { View, TextInput, StyleSheet, TouchableOpacity } from 'react-native';
+import { View, TextInput, StyleSheet, TouchableOpacity, useWindowDimensions } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { colors, spacing, borderRadius } from '../constants/theme';
 
+const TABLET_MIN_WIDTH = 768;
+
 interface SearchBarProps {
   placeholder?: string;
   onSearch: (query: string) => void;
@@ -16,6 +18,8 @@ export function SearchBar({
   value,
   onChangeText
 }: SearchBarProps) {
+  const { width } = useWindowDimensions();
+  const isTablet = width >= TABLET_MIN_WIDTH;
   const [localValue, setLocalValue] = useState(value || '');
 
   const handleChange = (text: string) => {
@@ -34,10 +38,10 @@ export function SearchBar({
   };
 
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, isTablet && styles.containerTablet]}>
       <Ionicons name="search" size={20} color={colors.textSecondary} style={styles.icon} />
       <TextInput
-        style={styles.input}
+        style={[styles.input, isTablet && styles.inputTablet]}
         placeholder={placeholder}
         placeholderTextColor={colors.textSecondary}
         value={localValue}
@@ -71,6 +75,10 @@ const styles = StyleSheet.create({
     shadowRadius: 8,
     elevation: 2,
   },
+  containerTablet: {
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.md,
+  },
   icon: {
     marginRight: spacing.sm,
   },
@@ -80,6 +88,10 @@ const styles = StyleSheet.create({
     color: colors.text,
     paddingVertical: spacing.xs,
   },
+  inputTablet: {
+    fontSize: 18,
+    paddingVertical: spacing.sm,
+  },
   clearButton: {
     marginLeft: spacing.sm,
   },