From c60d5bb888abf56995d376c56d6e4d30e73877fe Mon Sep 17 00:00:00 2001
From: Guy MANDINA <guyghost@gmail.com>
Date: Wed, 29 Jul 2026 19:59:45 +0200
Subject: [PATCH] fix(layout): resolve overflow in Suivi section mission list

The Suivi (Applications) page mission list overflowed in the narrow side
panel context:

1. The lg: breakpoint (1024px) never triggers inside a Chrome side panel
   (~400px wide), so lg:max-h-[32rem] and lg:overflow-y-auto were inert.
   The mission list had no height cap and the detail panel (1240px)
   stacked below it, producing 3100px+ of scroll.

2. CSS Grid's default align-items: stretch equalized column heights at
   wide widths, stretching the left mission list card from its natural
   ~365px to match the right detail column's 1240px (~900px empty void).

Fix:
- Drop the lg: prefix so the scroll cap applies at all panel widths;
  use max-h-[min(50vh,28rem)] for a viewport-relative ceiling.
- Add items-start to the grid to prevent column-height equalization.

Verified at 400px and 1100px widths: list scrolls internally (capped at
360px), left column keeps natural height (365px vs 1240px before), no
horizontal overflow.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
---
 apps/extension/src/ui/pages/ApplicationsPage.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/extension/src/ui/pages/ApplicationsPage.svelte b/apps/extension/src/ui/pages/ApplicationsPage.svelte
index 79a174e6..f9b32250 100644
--- a/apps/extension/src/ui/pages/ApplicationsPage.svelte
+++ b/apps/extension/src/ui/pages/ApplicationsPage.svelte
@@ -691,13 +691,13 @@
       />
     </div>
   {:else}
-    <div class="mt-5 grid gap-4 lg:grid-cols-[0.85fr_1.15fr]">
+    <div class="mt-5 grid items-start gap-4 lg:grid-cols-[0.85fr_1.15fr]">
       <section class="section-card rounded-xl p-3">
         <div class="flex items-center justify-between px-2 pb-2">
           <h3 class="text-body-lg font-medium text-text-primary">Missions</h3>
           <span class="text-meta text-text-muted">{trackedMissions.length} suivies</span>
         </div>
-        <div class="space-y-2 pr-1 lg:max-h-[32rem] lg:overflow-y-auto">
+        <div class="max-h-[min(50vh,28rem)] space-y-2 overflow-y-auto pr-1">
           {#each trackedMissions.length > 0 ? trackedMissions : missions
                 .slice(0, 20)
                 .map( (mission) => ({ mission, record: tracking.getTrackingForMission(mission.id) ?? null }) ) as item (item.mission.id)}