Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(launcher): stabilize session header height to prevent bouncing

Browse Source 
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
This commit is contained in:
Scott Idem
2026-03-06 20:37:23 -05:00
parent c0729ab4f3
commit 5f57d81ead
1 changed files with 13 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/routes/events/[event_id]/(launcher)/launcher_session_view.svelte
View File

@@ -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>