From 41752887dc18ccf376fca03fa5b2e306e1892b59 Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Sun, 8 Nov 2026 00:10:57 +0000
Subject: [PATCH] fix(journey): a folded Duo on its side gets the compact cards
 in the wide size class too

The folded Duo on its side is over 500px high and so in the wide size
class, whose large cards won over the short window's compact ones. Short
is now asked first.
---
 client/src/mobile/screens/journey/MJourneyDetail.tsx     | 3 ++-
 client/tests/unit/mobile/journey/MJourneyDetail.test.tsx | 7 +++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/client/src/mobile/screens/journey/MJourneyDetail.tsx b/client/src/mobile/screens/journey/MJourneyDetail.tsx
index 8c568377a..a3831d906 100644
--- a/client/src/mobile/screens/journey/MJourneyDetail.tsx
+++ b/client/src/mobile/screens/journey/MJourneyDetail.tsx
@@ -593,7 +593,8 @@ export default function MJourneyDetail({ journeyId, embedded = false }: JourneyD
                 showMood={current.show_mood !== 0}
                 showWeather={current.show_weather !== 0}
                 tone="mobile"
-                size={wide ? 'large' : short ? 'compact' : 'regular'}
+                // Short before wide: a folded Duo on its side is wide (over 500px high) and short.
+                size={short ? 'compact' : wide ? 'large' : 'regular'}
               />
             </div>
           ))}
diff --git a/client/tests/unit/mobile/journey/MJourneyDetail.test.tsx b/client/tests/unit/mobile/journey/MJourneyDetail.test.tsx
index b8ea512f9..c66ca9f65 100644
--- a/client/tests/unit/mobile/journey/MJourneyDetail.test.tsx
+++ b/client/tests/unit/mobile/journey/MJourneyDetail.test.tsx
@@ -1,7 +1,7 @@
-// FE-MOB-JDET-001 to FE-MOB-JDET-048
+// FE-MOB-JDET-001 to FE-MOB-JDET-049
 import { describe, it, expect, beforeEach, afterEach, onTestFinished, vi } from 'vitest';
-import { render, screen, fireEvent, waitFor, act } from '../../../helpers/render';
 import { setSizeClass } from '../../../helpers/sizeClass';
+import { render, screen, fireEvent, waitFor, act } from '../../../helpers/render';
 import MJourneyDetail from '../../../../src/mobile/screens/journey/MJourneyDetail';
 import { addonsApi, journeyApi, memoriesApi } from '../../../../src/api/client';
 import { useJourneyStore } from '../../../../src/store/journeyStore';
@@ -256,9 +256,12 @@ describe('MJourneyDetail', () => {
     };
     window.matchMedia = tall;
     onTestFinished(() => { window.matchMedia = real; });
+    // At 720 by 540 it is the wide size class too, whose large cards must not win.
+    setSizeClass('wide');
     setup();
     expect(document.querySelector('.h-\\[112px\\]')).toBeInTheDocument();
     expect(document.querySelector('.h-\\[152px\\]')).not.toBeInTheDocument();
+    expect(document.querySelector('.h-\\[196px\\]')).not.toBeInTheDocument();
   });
 
   it('FE-MOB-JDET-001: shows a spinner while the journey is loading', () => {