From 0099aab09342eb7523542c5fa888b20873f4f80e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Antoni=20Nu=C3=B1ez=20Romeu?= <antoni.nunez@ficosa.com>
Date: Tue, 7 Jul 2026 23:43:18 +0200
Subject: [PATCH] mobile ui fix

---
 apps/frontend-mobile/components/SearchBar.tsx | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/apps/frontend-mobile/components/SearchBar.tsx b/apps/frontend-mobile/components/SearchBar.tsx
index 73553d1..02038ed 100644
--- a/apps/frontend-mobile/components/SearchBar.tsx
+++ b/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;
@@ -10,12 +12,14 @@ interface SearchBarProps {
   onChangeText?: (text: string) => void;
 }
 
-export function SearchBar({ 
-  placeholder = 'Buscar medicamentos...', 
+export function SearchBar({
+  placeholder = 'Buscar medicamentos...',
   onSearch,
   value,
-  onChangeText 
+  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,
   },