UI: Make preview canvas responsive, scale sizes

App.tsx

@@ -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: {