Fix iOS layout editor orientation mismatch state

Author: J1coding

app/src/main/swift/Views/Settings/PadLayoutEditView.swift

@@ -24,17 +24,36 @@ struct PadLayoutEditView: View {
         GeometryReader { geo in
             let isActuallyLandscape = geo.size.width > geo.size.height
             let safeAreaTop = geo.safeAreaInsets.top
+            let safeAreaBottom = geo.safeAreaInsets.bottom
+            let isMismatch = isActuallyLandscape != editLandscape
             ZStack {
                 // Canvas
                 if isActuallyLandscape {
-                    landscapeEditorCanvas()
+                    landscapeEditorCanvas(isEditable: !isMismatch)
                 } else {
-                    portraitEditorCanvas(width: geo.size.width, height: geo.size.height)
+                    portraitEditorCanvas(width: geo.size.width, height: geo.size.height, isEditable: !isMismatch)
+                }
+
+                // Orientation mismatch overlay
+                if isMismatch {
+                    orientationMismatchView(isLandscape: isActuallyLandscape)
+                        .zIndex(1)
+                        .allowsHitTesting(false)
                 }
 
                 // Chrome overlay
-                editorChrome(isLandscape: isActuallyLandscape, safeAreaTop: safeAreaTop)
-                    .zIndex(1)
+                VStack(spacing: 0) {
+                    if isActuallyLandscape {
+                        editorToolbar(isLandscape: true)
+                        Spacer()
+                    } else {
+                        Spacer()
+                        editorToolbar(isLandscape: false)
+                    }
+                }
+                .padding(.top, isActuallyLandscape ? max(safeAreaTop, 4) : 0)
+                .padding(.bottom, isActuallyLandscape ? 0 : max(safeAreaBottom, 8))
+                .zIndex(2)
             }
         }
         .navigationBarHidden(true)
@@ -54,25 +73,26 @@ struct PadLayoutEditView: View {
     }
 
     // MARK: - Landscape editor canvas (always shown when device is landscape)
-    private func landscapeEditorCanvas() -> some View {
+    private func landscapeEditorCanvas(isEditable: Bool) -> some View {
         GeometryReader { geo in
             let width = geo.size.width
             let height = geo.size.height
             ZStack {
                 Color.clear
                     .allowsHitTesting(false)
 
-                customSkinPreview(isLandscape: true, width: width, height: height)
-
-                editorContent(areaW: width, areaH: height)
+                if isEditable {
+                    customSkinPreview(isLandscape: true, width: width, height: height)
+                    editorContent(areaW: width, areaH: height)
+                }
             }
             .contentShape(Rectangle())
         }
         .ignoresSafeArea()
     }
 
     // MARK: - Portrait editor canvas (always shown when device is portrait)
-    private func portraitEditorCanvas(width: CGFloat, height: CGFloat) -> some View {
+    private func portraitEditorCanvas(width: CGFloat, height: CGFloat, isEditable: Bool) -> some View {
         let gameHeight = min(width * 3 / 4, height * 0.55)
         let padHeight = height - gameHeight
         return VStack(spacing: 0) {
@@ -84,29 +104,17 @@ struct PadLayoutEditView: View {
             // Bottom: controller deck editing area (dark enough for controls)
             ZStack {
                 Color.black.opacity(0.85)
-                customSkinPreview(isLandscape: false, width: width, height: padHeight)
-                editorPortraitContent(areaW: width, areaH: padHeight)
+                if isEditable {
+                    customSkinPreview(isLandscape: false, width: width, height: padHeight)
+                    editorPortraitContent(areaW: width, areaH: padHeight)
+                }
             }
             .frame(height: padHeight)
             .clipped()
         }
     }
 
-    // MARK: - Editor chrome overlay
-    private func editorChrome(isLandscape: Bool, safeAreaTop: CGFloat) -> some View {
-        VStack(spacing: 0) {
-            editorToolbar(isLandscape: isLandscape)
-
-            if isLandscape != editLandscape {
-                rotationWarningBanner()
-                    .padding(.top, 8)
-            }
-
-            Spacer()
-        }
-        .padding(.top, max(safeAreaTop, 4))
-    }
-
+    // MARK: - Editor toolbar
     private func editorToolbar(isLandscape: Bool) -> some View {
         HStack(spacing: isLandscape ? 8 : 12) {
             // Cancel
@@ -164,27 +172,37 @@ struct PadLayoutEditView: View {
                     .foregroundStyle(.green)
             }
         }
-        .padding(.horizontal)
-        .padding(.top, 4)
-        .padding(.bottom, 8)
-        .background(.black.opacity(0.72), in: RoundedRectangle(cornerRadius: 12, style: .continuous))
+        .padding(.horizontal, 12)
+        .padding(.vertical, 6)
+        .background(.black.opacity(0.55), in: RoundedRectangle(cornerRadius: 10, style: .continuous))
     }
 
-    private func rotationWarningBanner() -> some View {
-        HStack(spacing: 6) {
-            Image(systemName: "exclamationmark.triangle.fill")
-            Text(editLandscape
-                 ? "Editing landscape layout in portrait. Rotate device to landscape for full canvas."
-                 : "Editing portrait layout in landscape. Rotate device to portrait for full canvas.")
-                .font(.caption.weight(.semibold))
+    private func orientationMismatchView(isLandscape: Bool) -> some View {
+        let message = editLandscape
+            ? "Rotate device to landscape to edit landscape layout"
+            : "Rotate device to portrait to edit portrait layout"
+        let explanation = editLandscape
+            ? "Accurate editing requires rotating the device or switching to portrait layout."
+            : "Accurate editing requires rotating the device or switching to landscape layout."
+        return VStack(spacing: 12) {
+            Image(systemName: "rotate.right")
+                .font(.system(size: 48, weight: .light))
+                .foregroundStyle(.white.opacity(0.6))
+            Text(message)
+                .font(.headline.weight(.semibold))
+                .foregroundStyle(.white)
+                .multilineTextAlignment(.center)
+                .lineLimit(3)
+            Text(explanation)
+                .font(.subheadline)
+                .foregroundStyle(.white.opacity(0.7))
                 .multilineTextAlignment(.center)
                 .lineLimit(3)
         }
-        .foregroundStyle(.yellow)
-        .padding(.horizontal, 12)
-        .padding(.vertical, 8)
-        .background(.black.opacity(0.6), in: RoundedRectangle(cornerRadius: 8))
-        .padding(.horizontal, 20)
+        .padding(.horizontal, 32)
+        .padding(.vertical, 24)
+        .background(.black.opacity(0.6), in: RoundedRectangle(cornerRadius: 16))
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
         .allowsHitTesting(false)
     }