From 5f57d81ead559dde33d7b37c100d130734f306ba Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Fri, 6 Mar 2026 20:37:23 -0500
Subject: [PATCH] fix(launcher): stabilize session header height to prevent
 bouncing

Root cause: flex-row flex-wrap on the session header caused the datetime
and name to compete for the same row. Long session names (up to 300 chars)
wrapped onto 2-3 lines while short names stayed 1 line, making the header
jump in height every time the operator switched sessions.

Fix:
- header: flex-row flex-wrap -> flex-col; datetime and name are now
  always on separate rows, header height is predictable in both cases
- h2 name: shrink -> grow line-clamp-2 min-w-0; height is always exactly
  2 lines, never less, never more; full text accessible via title attribute
- code badge: added shrink-0 so it is never squeezed by a long name
- removed justify-between/justify-end conditional classes (no longer relevant)
- Section 508: title attribute on h2 provides full text for screen readers
---
 .../(launcher)/launcher_session_view.svelte   | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/routes/events/[event_id]/(launcher)/launcher_session_view.svelte b/src/routes/events/[event_id]/(launcher)/launcher_session_view.svelte
index 7d36bc79..d4ec56ce 100644
--- a/src/routes/events/[event_id]/(launcher)/launcher_session_view.svelte
+++ b/src/routes/events/[event_id]/(launcher)/launcher_session_view.svelte
@@ -163,13 +163,19 @@
     {/if}
 
     {#if $lq__event_session_obj && $lq__event_session_obj.event_session_id}
+        <!--
+            Session header: flex-col keeps datetime and name on separate rows so
+            the header height is predictable regardless of session name length.
+            Long names (300+ chars) are clamped to 2 lines; short names never
+            collapse the header below that height. Zero layout shift between sessions.
+        -->
         <header
-            class="event_session_about text-center border-b-2 border-gray-400 dark:border-gray-600 flex flex-row flex-wrap gap-2 items-center justify-between"
+            class="event_session_about border-b-2 border-gray-400 dark:border-gray-600 flex flex-col gap-0.5 items-stretch"
         >
             <h3
                 class:hidden={!$lq__event_session_obj?.start_datetime ||
                     $events_loc.launcher.hide__session_datetimes}
-                class="shrink event_session_datetimes"
+                class="event_session_datetimes text-sm text-center"
             >
                 <button
                     type="button"
@@ -216,21 +222,19 @@
             </h3>
 
             <span
-                class:justify-between={$events_loc.launcher
-                    .hide__session_datetimes}
-                class:justify-end={!$events_loc.launcher
-                    .hide__session_datetimes}
-                class="grow flex flex-row gap-2 items-center"
+                class="w-full flex flex-row gap-2 items-center justify-between"
             >
+                <!-- grow + line-clamp-2 = stable 2-line max; title provides full text for screen readers + hover -->
                 <h2
-                    class="shrink text-xl"
+                    class="grow text-xl line-clamp-2 min-w-0"
                     title={`Name: ${$lq__event_session_obj.name}\nType: ${$lq__event_session_obj.type_code} \nCode: ${$lq__event_session_obj.code} \nID: ${$lq__event_session_obj.event_session_id} \nStart Date/Time: ${ae_util.iso_datetime_formatter($lq__event_session_obj.start_datetime, 'week_long')} ${ae_util.iso_datetime_formatter($lq__event_session_obj.start_datetime, $events_loc.launcher.time_format)} \nEnd Date/Time: ${ae_util.iso_datetime_formatter($lq__event_session_obj.end_datetime, $events_loc.launcher.time_format)}`}
                 >
                     {$lq__event_session_obj?.name}
                 </h2>
                 {#if $lq__event_session_obj?.code}
+                    <!-- shrink-0: code badge never gets squeezed by a long name -->
                     <span
-                        class="text-base text-gray-500 font-normal p-1"
+                        class="shrink-0 text-base text-gray-500 font-normal p-1"
                         title="Session code {$lq__event_session_obj.code}"
                     >
                         <span class="fas fa-barcode"></span>