From 097c1da0af4314d50d669fba02731af0235d1177 Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Sun, 18 Oct 2026 12:47:43 +0200
Subject: [PATCH] fix(mobile): a transport card shows the notes of its booking

On the phone the Transports tab never rendered a booking's notes, so what
someone typed into a flight was only to be found by opening its sheet,
while the booking cards next to it showed theirs. Both cards now take the
notes from one part, sized on the caption tier so the text size setting
reaches them.
---
 client/scripts/theme-baseline.json            |  2 +-
 .../mobile/screens/trip/tabs/MBookingsTab.tsx |  8 ++-----
 .../trip/tabs/MReservationCardParts.test.tsx  | 22 +++++++++++++++++--
 .../trip/tabs/MReservationCardParts.tsx       | 16 ++++++++++++++
 .../screens/trip/tabs/MTransportsTab.tsx      |  4 +++-
 5 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/client/scripts/theme-baseline.json b/client/scripts/theme-baseline.json
index eb70e63a0..7180acc43 100644
--- a/client/scripts/theme-baseline.json
+++ b/client/scripts/theme-baseline.json
@@ -269,7 +269,7 @@
   "mobile/screens/trip/sheets/PlSheetChrome.tsx": 7,
   "mobile/screens/trip/sheets/PlTimeFields.tsx": 3,
   "mobile/screens/trip/tabs/MBagsSheet.tsx": 13,
-  "mobile/screens/trip/tabs/MBookingsTab.tsx": 3,
+  "mobile/screens/trip/tabs/MBookingsTab.tsx": 2,
   "mobile/screens/trip/tabs/MCollabChat.tsx": 22,
   "mobile/screens/trip/tabs/MCollabNotes.tsx": 19,
   "mobile/screens/trip/tabs/MCollabPolls.tsx": 18,
diff --git a/client/src/mobile/screens/trip/tabs/MBookingsTab.tsx b/client/src/mobile/screens/trip/tabs/MBookingsTab.tsx
index 700a70c00..8c397ceed 100644
--- a/client/src/mobile/screens/trip/tabs/MBookingsTab.tsx
+++ b/client/src/mobile/screens/trip/tabs/MBookingsTab.tsx
@@ -4,7 +4,7 @@ import { RES_ICONS } from '../../../../components/Planner/DayPlanSidebar.constan
 import { formatTime, formatPriceText } from '../../../../utils/formatters'
 import { useTranslation } from '../../../../i18n'
 import type { Reservation } from '../../../../types'
-import { CardActions, CardDeleteSheet, CardFiles, CardTitleButton, CardWhenAndCode } from './MReservationCardParts'
+import { CardActions, CardDeleteSheet, CardFiles, CardNotes, CardTitleButton, CardWhenAndCode } from './MReservationCardParts'
 import { Field, ReservationPluginSlots, SectionHeader, StatusDot, TabScroller, TravelerAvatars, TravelerFilterRow } from './tabChrome'
 import { STATUS_COLOR, type MTabScreenProps } from './tabModel'
 import { cardWhen, parseTransportMeta } from './transportsModel'
@@ -173,11 +173,7 @@ function BookingCard({ res, planner, canEdit, compact }: {
               </div>
             )}
 
-            {res.notes && (
-              <div className="mt-2 rounded-[10px] border border-[color:var(--m-rowbr)] bg-m-card px-[10px] py-2">
-                <p className="whitespace-pre-wrap font-geist text-[0.6875rem] leading-[1.5] text-m-muted">{res.notes}</p>
-              </div>
-            )}
+            <CardNotes notes={res.notes} />
 
             <CardFiles files={files} card={card} t={t} />
           </button>
diff --git a/client/src/mobile/screens/trip/tabs/MReservationCardParts.test.tsx b/client/src/mobile/screens/trip/tabs/MReservationCardParts.test.tsx
index f95bd07f0..065d815c9 100644
--- a/client/src/mobile/screens/trip/tabs/MReservationCardParts.test.tsx
+++ b/client/src/mobile/screens/trip/tabs/MReservationCardParts.test.tsx
@@ -1,11 +1,18 @@
-// FE-COMP-MRESCARD-001 to FE-COMP-MRESCARD-009
+// FE-COMP-MRESCARD-001 to FE-COMP-MRESCARD-010
 import { fireEvent, render, screen } from '@testing-library/react';
 import { Hotel, Plane } from 'lucide-react';
 import { describe, expect, it, vi } from 'vitest';
 
 import type { useReservationCard } from '../../../../components/Planner/bookings/useReservationCard';
 import type { Reservation } from '../../../../types';
-import { CardActions, CardDeleteSheet, CardFiles, CardTitleButton, CardWhenAndCode } from './MReservationCardParts';
+import {
+  CardActions,
+  CardDeleteSheet,
+  CardFiles,
+  CardNotes,
+  CardTitleButton,
+  CardWhenAndCode,
+} from './MReservationCardParts';
 
 const t = (key: string, params?: Record<string, string | number>) =>
   params ? `${key}:${Object.values(params).join(',')}` : key;
@@ -149,4 +156,15 @@ describe('MReservationCardParts', () => {
     expect(title.contains(date)).toBe(false);
     expect(container.querySelector('button > div')).toHaveClass('flex-col');
   });
+
+  it('FE-COMP-MRESCARD-010: shows the notes of a booking, and nothing for empty ones (Discord, 15.10.2026)', () => {
+    const notes = 'Gate closes 40 min early\nBag drop at counter C';
+    const { container, rerender } = render(<CardNotes notes={notes} />);
+    expect(container.querySelector('p')?.textContent).toBe(notes);
+
+    rerender(<CardNotes notes="   " />);
+    expect(container).toBeEmptyDOMElement();
+    rerender(<CardNotes notes={null} />);
+    expect(container).toBeEmptyDOMElement();
+  });
 });
diff --git a/client/src/mobile/screens/trip/tabs/MReservationCardParts.tsx b/client/src/mobile/screens/trip/tabs/MReservationCardParts.tsx
index 0b89fc657..120137286 100644
--- a/client/src/mobile/screens/trip/tabs/MReservationCardParts.tsx
+++ b/client/src/mobile/screens/trip/tabs/MReservationCardParts.tsx
@@ -128,6 +128,22 @@ export function CardWhenAndCode({
   );
 }
 
+/**
+ * The booking's notes, inside the card body button. A transport card on the phone
+ * never showed them, so notes typed into a flight were nowhere to be read
+ * (reported on Discord, 15.10.2026); both cards now take them from here.
+ */
+export function CardNotes({ notes }: { notes: string | null | undefined }) {
+  if (!notes?.trim()) return null;
+  return (
+    <div className="mt-2 rounded-[10px] border border-[color:var(--m-rowbr)] bg-m-card px-[10px] py-2">
+      <p className="whitespace-pre-wrap font-geist text-caption leading-[1.5] text-m-muted [overflow-wrap:anywhere]">
+        {notes}
+      </p>
+    </div>
+  );
+}
+
 /** Attached files, listed inside the card body button. */
 export function CardFiles({ files, card, t }: { files: ReturnType<typeof filesFor>; card: CardState; t: T }) {
   if (files.length === 0) return null;
diff --git a/client/src/mobile/screens/trip/tabs/MTransportsTab.tsx b/client/src/mobile/screens/trip/tabs/MTransportsTab.tsx
index 55be19857..9828397b2 100644
--- a/client/src/mobile/screens/trip/tabs/MTransportsTab.tsx
+++ b/client/src/mobile/screens/trip/tabs/MTransportsTab.tsx
@@ -3,7 +3,7 @@ import { RES_ICONS } from '../../../../components/Planner/DayPlanSidebar.constan
 import { formatPriceText } from '../../../../utils/formatters'
 import { useTranslation } from '../../../../i18n'
 import type { Reservation } from '../../../../types'
-import { CardActions, CardDeleteSheet, CardFiles, CardTitleButton, CardWhenAndCode } from './MReservationCardParts'
+import { CardActions, CardDeleteSheet, CardFiles, CardNotes, CardTitleButton, CardWhenAndCode } from './MReservationCardParts'
 import { Field, ReservationPluginSlots, SectionHeader, StatusDot, TabScroller, TravelerAvatars, TravelerFilterRow } from './tabChrome'
 import { STATUS_COLOR, type MTabScreenProps } from './tabModel'
 import { cardWhen, parseTransportMeta } from './transportsModel'
@@ -189,6 +189,8 @@ function TransportCard({ res, planner, shell, canEdit, compact }: {
 
             <TravelerAvatars travelers={res.travelers || []} label={t('reservations.travelers.label')} />
 
+            <CardNotes notes={res.notes} />
+
             <CardFiles files={files} card={card} t={t} />
           </button>
         </div>