Faro & grafana improvements

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

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { View, FlatList, StyleSheet, Text, TouchableOpacity } from 'react-native';
+import { View, FlatList, StyleSheet, Text, TouchableOpacity, useWindowDimensions } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { useRouter } from 'expo-router';
 import { SearchBar } from '../../components/SearchBar';
@@ -11,13 +11,17 @@ import { colors, spacing, borderRadius } from '../../constants/theme';
 import { Medicine } from '../../types';
 import { config } from '../../constants/config';
 
+const TABLET_MIN_WIDTH = 768;
+
 export default function HomeScreen() {
   const router = useRouter();
+  const { width } = useWindowDimensions();
+  const isTablet = width >= TABLET_MIN_WIDTH;
   const [query, setQuery] = useState('');
   const [results, setResults] = useState<Medicine[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  
+
   const debouncedQuery = useDebounce(query, config.SEARCH_DEBOUNCE_MS);
 
   useEffect(() => {
@@ -49,7 +53,7 @@ export default function HomeScreen() {
 
   return (
     <View style={styles.container}>
-      <View style={styles.searchContainer}>
+      <View style={[styles.searchContainer, isTablet && styles.searchContainerTablet]}>
         <SearchBar
           onSearch={handleSearch}
           value={query}
@@ -62,26 +66,26 @@ export default function HomeScreen() {
           <Ionicons name="scan" size={22} color="#ffffff" />
         </TouchableOpacity>
       </View>
-      
+
       {isLoading && <LoadingSpinner message="Buscando medicamentos..." />}
-      
+
       {error && (
-        <View style={styles.errorContainer}>
+        <View style={[styles.errorContainer, isTablet && styles.errorContainerTablet]}>
           <Text style={styles.errorText}>{error}</Text>
         </View>
       )}
-      
+
       {!isLoading && !error && results.length === 0 && query.length >= 2 && (
         <View style={styles.emptyContainer}>
           <Text style={styles.emptyText}>No se encontraron medicamentos</Text>
         </View>
       )}
-      
+
       <FlatList
         data={results}
         keyExtractor={(item) => item.nregistro}
         renderItem={({ item }) => <MedicineCard medicine={item} />}
-        contentContainerStyle={styles.list}
+        contentContainerStyle={[styles.list, isTablet && styles.listTablet]}
         showsVerticalScrollIndicator={false}
       />
     </View>
@@ -98,6 +102,11 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     paddingRight: spacing.lg,
   },
+  searchContainerTablet: {
+    maxWidth: 700,
+    alignSelf: 'center',
+    width: '100%',
+  },
   scannerButton: {
     width: 44,
     height: 44,
@@ -114,12 +123,21 @@ const styles = StyleSheet.create({
   list: {
     paddingBottom: spacing.xl,
   },
+  listTablet: {
+    maxWidth: 700,
+    alignSelf: 'center',
+    width: '100%',
+  },
   errorContainer: {
     padding: spacing.md,
     marginHorizontal: spacing.lg,
     backgroundColor: colors.dangerContainer,
     borderRadius: borderRadius.lg,
   },
+  errorContainerTablet: {
+    maxWidth: 700,
+    alignSelf: 'center',
+  },
   errorText: {
     color: colors.danger,
     textAlign: 'center',