fix: enhance layout

app/(protected)/_layout.tsx

@@ -2,10 +2,12 @@ import { Redirect, Tabs } from 'expo-router';
 import { Home, Clock, Zap, CalendarIcon, Building } from 'lucide-react-native';
 import { useContext } from 'react';
 import { AuthContext } from '@/utils/authContext';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export default function ProtectedLayout() {
   const authState = useContext(AuthContext);
-
+  const insets = useSafeAreaInsets();
+  
   if (!authState.isReady) {
     return null;
   }
@@ -23,7 +25,7 @@ export default function ProtectedLayout() {
           borderTopWidth: 1,
           borderTopColor: '#f3f4f6',
           height: 90,
-          paddingBottom: 30,
+          paddingBottom: insets.bottom,
           paddingTop: 10,
           paddingHorizontal: 10,
         },

app/(protected)/automation/index.tsx

@@ -158,7 +158,7 @@ export default function AutomationScreen() {
                                             areaData: JSON.stringify(area),
                                         }
                                     })}
-                                    className="bg-white rounded-3xl p-5 shadow-sm border border-gray-100 active:scale-[0.98] w-[48%] mb-4 aspect-square"
+                                    className="bg-white aspect-square rounded-3xl p-5 shadow-sm border border-gray-100 active:scale-[0.98] w-[48%] mb-4"
                                 >
                                     <View className="flex-1 justify-between">
                                         <View className={`${bgColor} w-14 h-14 items-center justify-center rounded-2xl`}>

app/login.tsx

@@ -120,9 +120,9 @@ export default function LoginScreen() {
                                     </TouchableOpacity>
                                 </View>
                                 {/* TODO: Implement password recovery functionality */}
-                                <TouchableOpacity className="mt-3 self-end" style={{ alignSelf: 'flex-end' }}>
+                                {/* <TouchableOpacity className="mt-3 self-end" style={{ alignSelf: 'flex-end' }}>
                                     <Text className="text-[#099499] font-bold text-base">Password dimenticata?</Text>
-                                </TouchableOpacity>
+                                </TouchableOpacity> */}
                             </View>
 
                             {/* Login Button */}

components/DeviceCard.tsx

@@ -55,7 +55,7 @@ const DeviceCard = ({ device, onToggle }: { device: HaEntity; onToggle: (entityI
 
     return (
         <View
-            className={`bg-white rounded-3xl p-5 shadow-sm border border-gray-100 w-[48%] mb-4`}
+            className="bg-white rounded-3xl p-5 shadow-sm border border-gray-100 w-[48%] mb-4"
             style={{ aspectRatio: 1 }}
         >
             <View className="flex-1 justify-between">

components/QrScanModal.tsx

@@ -62,35 +62,31 @@ export default function QrScanModal({ visible, onClose, onScan }: QrScanModalPro
                 />
 
                 {/* Dark Overlay with Transparent "Hole" (Visually Simulated with Borders or Opacity) */}
-                <SafeAreaView className="flex-1">
+                <SafeAreaView className="flex-1 justify-between bg-black/60 pt-8">
                     {/* Header Overlay */}
-                    <View className="flex-1 bg-black/60 items-center pt-8">
+                    <View className="items-center">
                         <Text className="text-white text-xl font-bold">Scansiona QR Code</Text>
                         <Text className="text-gray-300 text-base mt-1">Inquadra il codice nel riquadro</Text>
                     </View>
 
                     {/* Central Area (Transparent for the camera) */}
-                    <View className="flex-row" style={{ height: squareSize }}>
+                    <View className="items-center justify-center" style={{ height: squareSize }}>
-                        <View className="flex-1 bg-black/60" />
+                        <View style={{ width: squareSize, height: squareSize }}
-                        <View style={{ width: squareSize, height: squareSize }} className="border-2 border-[#099499] bg-transparent relative justify-center items-center">
+                            className="border-2 border-[#099499] bg-transparent relative justify-center items-center">
                             {/* Decorative Corners */}
                             <View className="absolute top-0 left-0 w-6 h-6 border-l-4 border-t-4 border-[#099499]" />
                             <View className="absolute top-0 right-0 w-6 h-6 border-r-4 border-t-4 border-[#099499]" />
                             <View className="absolute bottom-0 left-0 w-6 h-6 border-l-4 border-b-4 border-[#099499]" />
                             <View className="absolute bottom-0 right-0 w-6 h-6 border-r-4 border-b-4 border-[#099499]" />
-                            
+
                             {/* Animated Scan Line or Icon */}
                             {!scanned && <ScanLine color="#099499" size={40} className="opacity-50" />}
                         </View>
-                        <View className="flex-1 bg-black/60" />
                     </View>
 
                     {/* Footer Overlay */}
-                    <View className="flex-1 bg-black/60 items-center justify-end pb-12 px-6">
+                    <View className="items-center justify-end pb-12">
-                        <TouchableOpacity
+                        <TouchableOpacity onPress={onClose} className="bg-white/20 p-4 rounded-full">
-                            onPress={onClose}
-                            className="bg-white/20 p-4 rounded-full"
-                        >
                             <X color="white" size={32} />
                         </TouchableOpacity>
                         <Text className="text-white mt-4 font-medium">Chiudi</Text>