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,
   },