feat: update dependencies and enhance TableScreen for better responsiveness and user guidance

src/screens/TableScreen.js

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
+import { Animated, Pressable, StyleSheet, Text, useWindowDimensions, View } from 'react-native';
 import { LinearGradient } from 'expo-linear-gradient';
 import { BlurView } from 'expo-blur';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -21,6 +21,8 @@ export default function TableScreen({ token, tableId, user, onLeave }) {
   const wsRef = useRef(null);
   const pulse = useRef(new Animated.Value(0)).current;
   const insets = useSafeAreaInsets();
+  const { width, height } = useWindowDimensions();
+  const isPortrait = height >= width;
 
   useEffect(() => {
     const ws = new WebSocket(WS_URL);
@@ -128,6 +130,26 @@ export default function TableScreen({ token, tableId, user, onLeave }) {
 
   const seats = table?.seats || [];
 
+  if (isPortrait) {
+    return (
+      <LinearGradient
+        colors={[colors.backgroundTop, colors.backgroundBottom]}
+        style={[
+          styles.container,
+          {
+            paddingTop: insets.top + 12,
+            paddingBottom: insets.bottom + 12
+          }
+        ]}
+      >
+        <View style={styles.rotateWrap}>
+          <Text style={styles.rotateTitle}>Fordítsd el a telefont</Text>
+          <Text style={styles.rotateSubtitle}>A blackjack asztal fekvő nézetben működik jól.</Text>
+        </View>
+      </LinearGradient>
+    );
+  }
+
   return (
     <LinearGradient
       colors={[colors.backgroundTop, colors.backgroundBottom]}
@@ -323,6 +345,26 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     marginBottom: 6,
     fontFamily: fonts.mono
+  },
+  rotateWrap: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 24
+  },
+  rotateTitle: {
+    color: colors.goldBright,
+    fontFamily: fonts.display,
+    fontSize: 24,
+    letterSpacing: 2,
+    textAlign: 'center'
+  },
+  rotateSubtitle: {
+    color: colors.muted,
+    fontFamily: fonts.body,
+    fontSize: 14,
+    marginTop: 12,
+    textAlign: 'center'
   }
 });