Faro & grafana improvements

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

@@ -1,9 +1,11 @@
 import { Tabs } from 'expo-router';
 import { Ionicons } from '@expo/vector-icons';
-import { View, StyleSheet, Platform } from 'react-native';
+import { View, StyleSheet, Platform, useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { colors, shadows } from '../../constants/theme';
 
+const TABLET_MIN_WIDTH = 768;
+
 function ScanIcon({ color, size }: { color: string; size: number }) {
   return (
     <View style={styles.fabContainer}>
@@ -16,6 +18,8 @@ function ScanIcon({ color, size }: { color: string; size: number }) {
 
 export default function TabLayout() {
   const insets = useSafeAreaInsets();
+  const { width } = useWindowDimensions();
+  const isTablet = width >= TABLET_MIN_WIDTH;
   const bottomPadding = Platform.OS === 'ios' ? insets.bottom : 8;
 
   return (
@@ -24,14 +28,20 @@ export default function TabLayout() {
         tabBarActiveTintColor: colors.primary,
         tabBarInactiveTintColor: colors.textSecondary,
         tabBarStyle: {
-          ...styles.tabBar,
-          height: 60 + bottomPadding,
+          ...(isTablet ? styles.tabBarTablet : styles.tabBar),
+          height: (isTablet ? 64 : 60) + bottomPadding,
           paddingBottom: bottomPadding,
         },
-        tabBarLabelStyle: styles.tabBarLabel,
+        tabBarLabelStyle: {
+          ...styles.tabBarLabel,
+          ...(isTablet ? styles.tabBarLabelTablet : {}),
+        },
         headerStyle: styles.header,
         headerTintColor: colors.primary,
-        headerTitleStyle: styles.headerTitle,
+        headerTitleStyle: {
+          ...styles.headerTitle,
+          ...(isTablet ? styles.headerTitleTablet : {}),
+        },
       }}
     >
       <Tabs.Screen
@@ -94,10 +104,19 @@ const styles = StyleSheet.create({
     borderTopColor: colors.border,
     paddingTop: 8,
   },
+  tabBarTablet: {
+    backgroundColor: colors.card,
+    borderTopColor: colors.border,
+    paddingTop: 10,
+    paddingHorizontal: 24,
+  },
   tabBarLabel: {
     fontSize: 11,
     fontWeight: '500',
   },
+  tabBarLabelTablet: {
+    fontSize: 13,
+  },
   header: {
     backgroundColor: colors.card,
     shadowColor: '#000',
@@ -111,6 +130,9 @@ const styles = StyleSheet.create({
     fontWeight: '600',
     fontSize: 17,
   },
+  headerTitleTablet: {
+    fontSize: 20,
+  },
   fabContainer: {
     position: 'absolute',
     top: -16,