UI: Make preview canvas responsive, scale sizes

App.tsx

@@ -77,7 +77,7 @@ export default function App() {
     await saveSettings(updated);
     setSettings(updated);
     setShowEventModal(false);
-    
+
     // Resume start
     setPhotoUris([]);
     setCaptureHistory([]);
@@ -117,7 +117,7 @@ export default function App() {
     const removedUris = updatedUris.splice(-lastCaptureCount, lastCaptureCount);
     setPhotoUris(updatedUris);
     setCaptureHistory((prev) => prev.slice(0, -1));
-    
+
     // Clean up temp files
     for (const uri of removedUris) {
       try {
@@ -126,7 +126,7 @@ export default function App() {
         console.warn('Failed to delete temp file:', e);
       }
     }
-    
+
     // Always let user retake
     setCurrentScreen('camera');
   };
@@ -163,13 +163,13 @@ export default function App() {
     <GestureHandlerRootView style={styles.container}>
       <SafeAreaView style={styles.container}>
         <StatusBar hidden={true} />
-        
+
         {/* 
           Keep CameraScreen ALWAYS mounted in the background to prevent 
           Android expo-camera hardware crashes when unmounting right after capture 
         */}
-        <View 
+        <View
-          style={StyleSheet.absoluteFill} 
+          style={StyleSheet.absoluteFill}
           pointerEvents={(currentScreen === 'preview' || currentScreen === 'admin') ? 'none' : 'auto'}
         >
           <CameraScreen
@@ -233,7 +233,7 @@ export default function App() {
               </Text>
               <TextInput
                 style={styles.modalInput}
-                placeholder="Schnappix-Party"
+                placeholder="z.B. Schnappix-Party"
                 placeholderTextColor="#666"
                 value={tempEventName}
                 onChangeText={setTempEventName}

src/screens/PreviewScreen.tsx

@@ -699,8 +699,8 @@ const styles = StyleSheet.create({
     backgroundColor: '#030308',
   },
   viewShotContainer: {
-    width: 480,
+    width: '100%',
-    height: 320,
+    aspectRatio: 1.5,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: THEME.colors.background,
@@ -897,8 +897,8 @@ const styles = StyleSheet.create({
   },
   // ── Photo Canvases ──
   singleCanvas: {
-    width: 480,
+    width: '100%',
-    height: 320,
+    height: '100%',
     backgroundColor: '#fff',
     padding: 0,
     shadowColor: THEME.colors.gradientGlow,
@@ -913,30 +913,30 @@ const styles = StyleSheet.create({
     resizeMode: 'cover',
   },
   collageCanvas: {
-    width: 480,
+    width: '100%',
-    height: 320,
+    height: '100%',
     backgroundColor: '#ffffff',
-    padding: 12,
+    padding: 16,
     alignItems: 'center',
     justifyContent: 'space-between',
   },
   collageFooter: {
-    height: 35,
+    height: 50,
     justifyContent: 'center',
     alignItems: 'center',
     width: '100%',
-    borderTopWidth: 0.5,
+    borderTopWidth: 1,
     borderTopColor: '#e0e0e0',
-    marginTop: 6,
+    marginTop: 10,
   },
   collageFooterText: {
-    fontSize: 10,
+    fontSize: 16,
     fontWeight: 'bold',
     color: '#333333',
-    letterSpacing: 2,
+    letterSpacing: 3,
   },
   collageFooterDate: {
-    fontSize: 8,
+    fontSize: 12,
     color: '#666666',
   },
   stripCanvas: {},
@@ -987,16 +987,16 @@ const styles = StyleSheet.create({
     zIndex: 12,
   },
   dateOverlayText: {
-    fontSize: 11,
+    fontSize: 16,
     fontWeight: 'bold',
     color: '#FFFFFF',
     textShadowColor: 'rgba(0, 0, 0, 0.8)',
     textShadowOffset: { width: 1, height: 1 },
     textShadowRadius: 3,
     backgroundColor: 'rgba(0, 0, 0, 0.35)',
-    paddingVertical: 2,
+    paddingVertical: 4,
-    paddingHorizontal: 6,
+    paddingHorizontal: 8,
-    borderRadius: 3,
+    borderRadius: 6,
   },
   // ── Loading ──
   loadingOverlay: {