fix: multiple UX issues (black camera screen, layout proportions, sticker delete button scaling, save without reset)

App.tsx

@@ -150,7 +150,7 @@ export default function App() {
         <View 
           style={[
             StyleSheet.absoluteFill, 
-            (currentScreen === 'preview' || currentScreen === 'admin') && { opacity: 0, zIndex: -10, transform: [{ translateX: -10000 }] }
+            (currentScreen === 'preview' || currentScreen === 'admin') && { zIndex: -10 }
           ]} 
           pointerEvents={(currentScreen === 'preview' || currentScreen === 'admin') ? 'none' : 'auto'}
         >

src/components/DraggableSticker.tsx

@@ -121,6 +121,13 @@ export default function DraggableSticker({
     ],
   }));
 
+  const deleteBtnStyle = useAnimatedStyle(() => ({
+    transform: [
+      { scale: 1 / scale.value },
+      { rotate: `-${rotation.value}rad` }, // keep it upright
+    ],
+  }));
+
   const isText = sticker.type === 'text';
 
   return (
@@ -134,13 +141,15 @@ export default function DraggableSticker({
           <Text style={styles.emojiText}>{sticker.content}</Text>
         )}
         {isSelected && (
+          <Animated.View style={[styles.deleteBtnWrapper, deleteBtnStyle]}>
             <TouchableOpacity
               style={styles.deleteBtn}
               onPress={() => onDelete(sticker.id)}
-            hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+              hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
             >
               <Text style={styles.deleteBtnText}>×</Text>
             </TouchableOpacity>
+          </Animated.View>
         )}
       </Animated.View>
     </GestureDetector>
@@ -177,17 +186,22 @@ const styles = StyleSheet.create({
     textShadowOffset: { width: 0, height: 0 },
     textShadowRadius: 6,
   },
-  deleteBtn: {
+  deleteBtnWrapper: {
     position: 'absolute',
-    top: 15,
-    right: 15,
-    width: 24,
-    height: 24,
-    borderRadius: 12,
+    top: 5,
+    right: 5,
+    zIndex: 200,
+    elevation: 25,
+  },
+  deleteBtn: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
     backgroundColor: THEME.colors.error,
     alignItems: 'center',
     justifyContent: 'center',
-    zIndex: 200,
+    borderWidth: 2,
+    borderColor: '#fff',
   },
   deleteBtnText: {
     color: '#fff',

src/screens/PreviewScreen.tsx

@@ -297,7 +297,6 @@ export default function PreviewScreen({
       setTimeout(() => {
         if (!mountedRef.current) return;
         setIsProcessing(false);
-        onReset();
       }, 1500);
     } catch (error: any) {
       if (!mountedRef.current) return;
@@ -393,7 +392,7 @@ export default function PreviewScreen({
                   key={idx} 
                   source={{ uri }} 
                   style={styles.stripImage} 
-                  resizeMode="cover"
+                  resizeMode="contain"
                   resizeMethod="resize"
                   onLoad={() => logger.log(`Image loaded successfully: ${uri}`)}
                   onError={(e) => logger.error(`Image load failed: ${uri}`, e.nativeEvent?.error || e)}
@@ -415,7 +414,7 @@ export default function PreviewScreen({
                   key={idx} 
                   source={{ uri }} 
                   style={styles.gridImage} 
-                  resizeMode="cover"
+                  resizeMode="contain"
                   resizeMethod="resize"
                   onLoad={() => logger.log(`Grid Image loaded successfully: ${uri}`)}
                   onError={(e) => logger.error(`Grid Image load failed: ${uri}`, e.nativeEvent?.error || e)}
@@ -436,7 +435,7 @@ export default function PreviewScreen({
                   key={idx} 
                   source={{ uri }} 
                   style={styles.duoImage} 
-                  resizeMode="cover"
+                  resizeMode="contain"
                   resizeMethod="resize"
                   onLoad={() => logger.log(`Duo Image loaded successfully: ${uri}`)}
                   onError={(e) => logger.error(`Duo Image load failed: ${uri}`, e.nativeEvent?.error || e)}