From 7083667cbf85f926f0aa4548f6d5db484dc30b39 Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Sat, 7 Nov 2026 16:43:54 +0100
Subject: [PATCH] fix(mobile): grid cards keep their height, a previewed photo
 its proportions

Cards in the large-screen grid keep their own height instead of stretching
to a taller neighbour in their row, which drew a short booking as an empty
panel. The file preview beside the grid shows a photo at its own
proportions rather than letterboxed in a portrait frame.

On a 13" iPad on its side the cloud plans of the native shell stand two by
two in their half of the screen, so the whole offer is in view at once.
---
 client/native-shell/shell.css                 | 11 ++++++
 .../mobile/screens/trip/tabs/MFilesBoard.tsx  | 37 +++++++++++--------
 .../mobile/screens/trip/tabs/tabChrome.tsx    | 11 ++++--
 3 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/client/native-shell/shell.css b/client/native-shell/shell.css
index c14d2cb86..9b83e87a6 100644
--- a/client/native-shell/shell.css
+++ b/client/native-shell/shell.css
@@ -1013,6 +1013,17 @@ a.linkbtn {
     inset-inline: max(32px, calc(25vw - 220px));
   }
 }
+/* With the whole half of a 13" iPad on its side, the plans stand two by two
+   rather than in a column to scroll through. */
+@media (min-width: 1200px) and (min-height: 600px) and (orientation: landscape) {
+  .shell:has(.plans) {
+    padding-inline: max(32px, calc(25vw - 320px));
+  }
+  .plans {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
 @media (min-width: 700px) and (min-height: 900px) and (orientation: portrait) {
   body::before,
   body::after {
diff --git a/client/src/mobile/screens/trip/tabs/MFilesBoard.tsx b/client/src/mobile/screens/trip/tabs/MFilesBoard.tsx
index 51779c569..4857d4d70 100644
--- a/client/src/mobile/screens/trip/tabs/MFilesBoard.tsx
+++ b/client/src/mobile/screens/trip/tabs/MFilesBoard.tsx
@@ -194,22 +194,29 @@ export function FilePreviewPane({ file, planner, onOpen, onStar, onLinks, onMenu
 
   return (
     <div className="flex flex-col gap-3">
-      <div className="relative aspect-[4/5] max-h-[56dvh] w-full overflow-hidden rounded-2xl border border-[color:var(--m-rowbr)] bg-m-sheetop">
-        {isImage(file.mime_type) && src ? (
-          <img src={src} alt={file.original_name} className="absolute inset-0 h-full w-full object-contain" />
-        ) : isPdf(file) && src ? (
-          <object
-            data={`${src}#view=FitH`}
-            type="application/pdf"
-            title={file.original_name}
-            className="absolute inset-0 h-full w-full"
-          >
+      {isImage(file.mime_type) && src ? (
+        // A photo takes its own proportions, up to the height the pane can spare.
+        <img
+          src={src}
+          alt={file.original_name}
+          className="block max-h-[60dvh] w-full rounded-2xl border border-[color:var(--m-rowbr)] bg-m-sheetop object-contain"
+        />
+      ) : (
+        <div className="relative aspect-[4/5] max-h-[56dvh] w-full overflow-hidden rounded-2xl border border-[color:var(--m-rowbr)] bg-m-sheetop">
+          {isPdf(file) && src ? (
+            <object
+              data={`${src}#view=FitH`}
+              type="application/pdf"
+              title={file.original_name}
+              className="absolute inset-0 h-full w-full"
+            >
+              <TypeArt file={file} large />
+            </object>
+          ) : (
             <TypeArt file={file} large />
-          </object>
-        ) : (
-          <TypeArt file={file} large />
-        )}
-      </div>
+          )}
+        </div>
+      )}
 
       <div>
         <h3 className="break-words text-[length:calc(16px*var(--fs-scale-subtitle,1))] font-extrabold leading-[1.3] text-m-ink">
diff --git a/client/src/mobile/screens/trip/tabs/tabChrome.tsx b/client/src/mobile/screens/trip/tabs/tabChrome.tsx
index 840ee01af..32edfbbd3 100644
--- a/client/src/mobile/screens/trip/tabs/tabChrome.tsx
+++ b/client/src/mobile/screens/trip/tabs/tabChrome.tsx
@@ -40,11 +40,16 @@ const PANE_INSETS = 'pb-[calc(var(--bottom-nav-h,84px)+22px)] pt-[calc(var(--m-s
  * The cards of a list tab (transports, bookings, tasks): one column on a phone;
  * on a wide window as many columns of at least a phone's width as the page
  * holds, three on a 13" iPad on its side, two upright or on an unfolded
- * foldable on its side, one in a narrow Split View. A row's cards share its
- * height, so the grid reads as rows rather than as a ragged wall.
+ * foldable on its side, one in a narrow Split View. Cards stay in reading
+ * order along the rows and keep their own height: stretched to a taller
+ * neighbour, a short booking read as an empty panel.
  */
 export function CardGrid({ children }: { children: ReactNode }) {
-  return <div className="wide:grid wide:grid-cols-[repeat(auto-fill,minmax(min(100%,340px),1fr))] wide:gap-x-3">{children}</div>
+  return (
+    <div className="wide:grid wide:grid-cols-[repeat(auto-fill,minmax(min(100%,340px),1fr))] wide:items-start wide:gap-x-3">
+      {children}
+    </div>
+  )
 }
 
 /**