Auto-Commit: 2026-06-28 14:51:23

src/screens/PreviewScreen.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useCallback, useEffect } from 'react';
-import { ScrollView, StyleSheet, Text, View, Image, TouchableOpacity, ActivityIndicator, BackHandler } from 'react-native';
+import { ScrollView, StyleSheet, Text, View, Image, TouchableOpacity, ActivityIndicator, BackHandler, useWindowDimensions } from 'react-native';
 import ViewShot from 'react-native-view-shot';
 import { LinearGradient } from 'expo-linear-gradient';
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
@@ -61,6 +61,9 @@ export default function PreviewScreen({
   const [isCapturing, setIsCapturing] = useState<boolean>(false);
   const [statusMessage, setStatusMessage] = useState<string>('');
   
+  const { width, height } = useWindowDimensions();
+  const isPortrait = height > width;
+
   const [activeUris, setActiveUris] = useState<string[]>([]);
 
   // Initialize activeUris with all available photos up to 4 when first loaded
@@ -466,12 +469,12 @@ export default function PreviewScreen({
 
   return (
     <View 
-      style={styles.container}
+      style={[styles.container, { flexDirection: isPortrait ? 'column' : 'row' }]}
       onTouchStart={resetIdleTimer}
     >
       {/* Left panel: Preview Canvas */}
       <TouchableOpacity
-        style={styles.previewPanel}
+        style={[styles.previewPanel, { flex: isPortrait ? 1 : 1.2 }]}
         activeOpacity={1}
         onPress={handleCanvasPress}
       >
@@ -533,7 +536,10 @@ export default function PreviewScreen({
       )}
 
       {/* Right panel: Controls */}
-      <View style={styles.controlPanel}>
+      <ScrollView 
+        style={[styles.controlPanel, { flex: isPortrait ? 1 : 0.8 }]}
+        contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}
+      >
         <Text style={styles.header}>{eventText}</Text>
         
         {/* Thumbnail Reel for Photo Selection */}
@@ -660,7 +666,7 @@ export default function PreviewScreen({
             </TouchableOpacity>
           </View>
         </View>
-      </View>
+      </ScrollView>
 
       {/* Loading Overlay */}
       {isProcessing && (
@@ -678,11 +684,9 @@ export default function PreviewScreen({
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    flexDirection: 'row',
     backgroundColor: THEME.colors.background,
   },
   previewPanel: {
-    flex: 1.2,
     justifyContent: 'flex-start',
     alignItems: 'center',
     padding: THEME.spacing.md,
@@ -698,10 +702,8 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
   },
   controlPanel: {
-    flex: 0.8,
     backgroundColor: THEME.colors.surface,
     padding: THEME.spacing.xl,
-    justifyContent: 'center',
     borderLeftWidth: 1,
     borderColor: THEME.colors.border,
   },