From bb725ac8d81205ea67a8c2bf86efe28efffa0623 Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Sat, 7 Nov 2026 20:12:12 +0100
Subject: [PATCH] fix(native): the first screens on an upright iPad read as one
 page, not a phone column

On an iPad upright or an unfolded foldable the welcome, address, TREK Cloud
and plan screens kept the phone's narrow column in the middle of the glass,
with the photo fading out across the top left. Now the photo spans the
width as a band across the top, the choices stand under it in a wider
column, and the plans take two columns. Landscape keeps the photo as a
panel beside the choices; phones are unchanged.
---
 client/native-shell/shell.css | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/client/native-shell/shell.css b/client/native-shell/shell.css
index ee1e85e3e..016c73e61 100644
--- a/client/native-shell/shell.css
+++ b/client/native-shell/shell.css
@@ -1024,9 +1024,30 @@ a.linkbtn {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
+/* An iPad upright or an unfolded foldable: the photo spans the width as a band
+   across the top, and the choices stand under it in a wider column than a
+   phone's, so the page reads as one composition rather than a phone screen
+   floating in the middle of the glass. The plans take two columns. */
 @media (min-width: 700px) and (min-height: 900px) and (orientation: portrait) {
   body::before,
   body::after {
     height: 52vh;
   }
+  body::after {
+    -webkit-mask-image: none;
+    mask-image: none;
+  }
+  .shell {
+    max-width: 560px;
+    justify-content: flex-start;
+    padding-top: calc(env(safe-area-inset-top) + 38vh);
+  }
+  .shell:has(.plans) {
+    max-width: 760px;
+    padding-top: calc(env(safe-area-inset-top) + 16vh);
+  }
+  .plans {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }