finger

commit 21df8ea11a0225fec69ded5e7f64d75d9f370685
parent 41520cdfc4cc42432fcef059e1ac1f24d03ded57
Author: Damian Myrda <damian@prime8.dev>
Date:   Wed,  9 Jul 2025 20:50:52 -0500

Fix mobile screen issue

Diffstat:
M
app/home.tsx
 | 
173
++++++++++++++++++++++++++++++++++++++++---------------------------------------
M
app/index.tsx
 | 
6
+++---

2 files changed, 91 insertions(+), 88 deletions(-)
diff --git a/app/home.tsx b/app/home.tsx
@@ -3,6 +3,7 @@ import { supabase } from "@/lib/supabase";
 import { Session } from "@supabase/supabase-js";
 import { Button, Text, YStack, XStack, Card, H1, H2, Separator } from "tamagui";
 import { router } from "expo-router";
+import { SafeAreaView } from "react-native-safe-area-context";
 
 export default function Home() {
   const [session, setSession] = useState<Session | null>(null);
@@ -23,97 +24,99 @@ export default function Home() {
   }
 
   return (
-    <YStack
-      flex={1}
-      alignItems="center"
-      justifyContent="center"
-      padding={24}
-      backgroundColor="$background"
-      gap="$4"
-    >
-      <Card
-        elevate
-        size="$4"
-        padded
-        animation="bouncy"
-        scale={0.9}
-        hoverStyle={{ scale: 0.95 }}
-        pressStyle={{ scale: 0.85 }}
+    <SafeAreaView style={{ flex: 1 }}>
+      <YStack
+        flex={1}
+        alignItems="center"
+        justifyContent="center"
+        padding={24}
         backgroundColor="$background"
-        borderColor="$borderColor"
-        borderWidth={1}
-        borderRadius="$4"
-        shadowColor="$shadowColor"
-        shadowOffset={{ width: 0, height: 2 }}
-        shadowOpacity={0.1}
-        shadowRadius={8}
-        elevation={4}
+        gap="$4"
       >
-        <YStack alignItems="center" gap="$4" padding="$4">
-          <H1
-            textAlign="center"
-            color="$color"
-            fontWeight="bold"
-            fontSize="$8"
-            letterSpacing="$1"
-          >
-            Welcome to Finger! 👋
-          </H1>
-
-          <Separator marginVertical="$2" />
-
-          <YStack alignItems="center" gap="$2">
-            <H2
-              color="$color"
-              fontSize="$4"
-              fontWeight="600"
+        <Card
+          elevate
+          size="$4"
+          padded
+          animation="bouncy"
+          scale={0.9}
+          hoverStyle={{ scale: 0.95 }}
+          pressStyle={{ scale: 0.85 }}
+          backgroundColor="$background"
+          borderColor="$borderColor"
+          borderWidth={1}
+          borderRadius="$4"
+          shadowColor="$shadowColor"
+          shadowOffset={{ width: 0, height: 2 }}
+          shadowOpacity={0.1}
+          shadowRadius={8}
+          elevation={4}
+        >
+          <YStack alignItems="center" gap="$4" padding="$4">
+            <H1
               textAlign="center"
-            >
-              You&apos;re signed in as:
-            </H2>
-            <Text
               color="$color"
-              fontSize="$3"
-              textAlign="center"
-              backgroundColor="$background"
-              paddingHorizontal="$3"
-              paddingVertical="$2"
-              borderRadius="$2"
-              borderWidth={1}
-              borderColor="$borderColor"
-              fontFamily="$mono"
+              fontWeight="bold"
+              fontSize="$8"
+              letterSpacing="$1"
             >
-              {session?.user?.email || "Loading..."}
-            </Text>
-          </YStack>
+              Welcome to Finger! 👋
+            </H1>
 
-          <Separator marginVertical="$2" />
+            <Separator marginVertical="$2" />
 
-          <XStack gap="$3" justifyContent="center">
-            <Button
-              onPress={signOut}
-              backgroundColor="$red9"
-              color="white"
-              fontWeight="600"
-              fontSize="$3"
-              paddingHorizontal="$4"
-              paddingVertical="$2"
-              borderRadius="$3"
-              borderWidth={0}
-              pressStyle={{
-                backgroundColor: "$red10",
-                scale: 0.95,
-              }}
-              hoverStyle={{
-                backgroundColor: "$red8",
-              }}
-              animation="bouncy"
-            >
-              Sign Out
-            </Button>
-          </XStack>
-        </YStack>
-      </Card>
-    </YStack>
+            <YStack alignItems="center" gap="$2">
+              <H2
+                color="$color"
+                fontSize="$4"
+                fontWeight="600"
+                textAlign="center"
+              >
+                You&apos;re signed in as:
+              </H2>
+              <Text
+                color="$color"
+                fontSize="$3"
+                textAlign="center"
+                backgroundColor="$background"
+                paddingHorizontal="$3"
+                paddingVertical="$2"
+                borderRadius="$2"
+                borderWidth={1}
+                borderColor="$borderColor"
+                fontFamily="$mono"
+              >
+                {session?.user?.email || "Loading..."}
+              </Text>
+            </YStack>
+
+            <Separator marginVertical="$2" />
+
+            <XStack gap="$3" justifyContent="center">
+              <Button
+                onPress={signOut}
+                backgroundColor="$red9"
+                color="white"
+                fontWeight="600"
+                fontSize="$3"
+                paddingHorizontal="$4"
+                paddingVertical="$2"
+                borderRadius="$3"
+                borderWidth={0}
+                pressStyle={{
+                  backgroundColor: "$red10",
+                  scale: 0.95,
+                }}
+                hoverStyle={{
+                  backgroundColor: "$red8",
+                }}
+                animation="bouncy"
+              >
+                Sign Out
+              </Button>
+            </XStack>
+          </YStack>
+        </Card>
+      </YStack>
+    </SafeAreaView>
   );
 }
diff --git a/app/index.tsx b/app/index.tsx
@@ -1,10 +1,10 @@
-import { View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
 import Auth from "./auth";
 
 export default function App() {
   return (
-    <View>
+    <SafeAreaView style={{ flex: 1 }}>
       <Auth />
-    </View>
+    </SafeAreaView>
   );
 }