From 11d7632571500fb9c6268b0b8eadf918bbc386fa Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Fri, 13 Mar 2026 17:44:21 -0400
Subject: [PATCH] feat(events): collapse session description by default with
 toggle

---
 .../session/[session_id]/session_view.svelte  | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/session_view.svelte b/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/session_view.svelte
index 6bd35d7d..a5c30d29 100644
--- a/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/session_view.svelte
+++ b/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/session_view.svelte
@@ -38,6 +38,9 @@
     $events_sess.pres_mgmt.show_modal__presenter_agree = false;
     $events_sess.pres_mgmt.show_content__presenter_start = false;
 
+    // Description expand/collapse — collapsed by default (descriptions can be long)
+    let desc_expanded = $state(false);
+
     // QR Code Generation Logic
     $events_sess.pres_mgmt.session__updated_on = null;
     $effect(() => {
@@ -171,12 +174,29 @@
         {/if}
     </div>
 
-    <!-- Description: shown only when present —
-         long descriptions are scrollable via the parent container -->
+    <!-- Description: shown only when present. Collapsed by default (can be long). -->
     {#if $lq__event_session_obj?.description}
         <div class="rounded-lg border border-surface-200-800 bg-surface-50-900 px-4 py-3">
-            <span class="text-xs font-bold uppercase tracking-wide opacity-40 block mb-1">Description</span>
-            <p class="whitespace-pre-wrap text-sm leading-relaxed">{$lq__event_session_obj.description}</p>
+            <button
+                type="button"
+                class="w-full flex items-center justify-between gap-2 text-left focus-visible:ring-2 focus-visible:ring-primary-500 rounded"
+                onclick={() => desc_expanded = !desc_expanded}
+                aria-expanded={desc_expanded}
+            >
+                <span class="text-xs font-bold uppercase tracking-wide opacity-40">Description</span>
+                <span class="text-xs opacity-40 shrink-0">
+                    {#if desc_expanded}
+                        <span class="fas fa-chevron-up" aria-hidden="true"></span>
+                        <span class="sr-only">Collapse description</span>
+                    {:else}
+                        <span class="fas fa-chevron-down" aria-hidden="true"></span>
+                        <span class="sr-only">Expand description</span>
+                    {/if}
+                </span>
+            </button>
+            {#if desc_expanded}
+                <p class="whitespace-pre-wrap text-sm leading-relaxed mt-2">{$lq__event_session_obj.description}</p>
+            {/if}
         </div>
     {/if}