From fc4e59dd8c2da4fac4b425f11b32c6c24b8722c0 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Fri, 19 Sep 2025 10:32:08 -0400
Subject: [PATCH] More work on styles... flex wraps everywhere.

---
 src/app.css                                   |  4 +-
 src/routes/events/[event_id]/+page.svelte     | 31 +++----
 .../events/[event_id]/event_page_menu.svelte  |  2 +-
 .../location/[event_location_id]/+page.svelte | 85 ++++++++++---------
 .../location_page_menu.svelte                 |  2 +-
 .../events/[event_id]/locations/+page.svelte  | 35 +++++---
 .../locations/locations_page_menu.svelte      |  4 +-
 .../presenter/[presenter_id]/+page.svelte     | 20 +++--
 .../[presenter_id]/presenter_page_menu.svelte |  2 +-
 .../events/[event_id]/reports/+page.svelte    | 48 ++++++-----
 .../session/[session_id]/+page.svelte         | 17 ++--
 .../[session_id]/session_page_menu.svelte     |  2 +-
 .../events/ae_comp__events_menu_nav.svelte    |  2 +-
 13 files changed, 144 insertions(+), 110 deletions(-)

diff --git a/src/app.css b/src/app.css
index 702dcac0..f95e959d 100644
--- a/src/app.css
+++ b/src/app.css
@@ -368,7 +368,7 @@ html.trusted_access #appShell {
 .ae_module_header {
     /* LCI request 3a5997 */
     /* bg-gray-300 */
-    @apply preset-tonal-surface rounded-md flex flex-row gap-0.25 items-center justify-between w-full p-1 px-2;
+    @apply preset-tonal-surface rounded-md flex flex-col md:flex-row flex-wrap gap-0.25 items-center justify-between w-full max-w-7xl p-1 px-2;
 }
 
 [data-theme='AE_c_LCI'] .ae_module_header {
@@ -385,7 +385,7 @@ html.trusted_access #appShell {
     @apply container;
 }
 .ae_container_module_menu {
-    @apply w-full flex flex-col items-center justify-center gap-1 p-1
+    @apply w-full max-w-7xl flex flex-col items-center justify-center gap-1 p-1
     border rounded-md border-gray-200 dark:border-gray-800 hover:bg-gray-100 dark:hover:bg-gray-900 transition-all duration-700 hover:duration-300;
 }
 .ae_container_module_options {
diff --git a/src/routes/events/[event_id]/+page.svelte b/src/routes/events/[event_id]/+page.svelte
index 99f6d943..5a6c8c4c 100644
--- a/src/routes/events/[event_id]/+page.svelte
+++ b/src/routes/events/[event_id]/+page.svelte
@@ -435,10 +435,9 @@ max-w-max -->
 
 {:else if $lq__event_obj?.enable || $ae_loc.trusted_access}
 
-<!-- <header> -->
-<h2 class="ae_module_header h3">
+<header class="ae_module_header">
     <span
-        class="flex flex-row gap-1 items-center"
+        class="flex flex-row flex-wrap gap-1 items-center justify-center"
         >
         <span class="fas fa-calendar-day m-1 text-neutral-800/80"></span>
         <!-- Button to toggle between the regular event view and managing event files -->
@@ -476,19 +475,21 @@ max-w-max -->
         </button>
     </span>
 
-    <span class="sm:inline-block md:hidden">
-        {$lq__event_obj.cfg_json?.short_name ?? $lq__event_obj?.name}
-    </span>
-    <span class="hidden md:inline-block lg:hidden">
-        {$lq__event_obj.cfg_json?.med_name ?? $lq__event_obj?.name}
-    </span>
-    <span class="hidden lg:inline-block">
-        {$lq__event_obj.cfg_json?.long_name ?? $lq__event_obj?.name}
-    </span>
+    <h2 class="text-2xl font-bold text-center max-w-xs sm:max-w-lg md:max-w-2xl">
 
-</h2>
-<!-- <h3 class="h4 text-center">Presentations - Session Lookup</h3> -->
-<!-- </header> -->
+        <span class="sm:inline-block md:hidden">
+            {$lq__event_obj.cfg_json?.short_name ?? $lq__event_obj?.name}
+        </span>
+        <span class="hidden md:inline-block lg:hidden">
+            {$lq__event_obj.cfg_json?.med_name ?? $lq__event_obj?.name}
+        </span>
+        <span class="hidden lg:inline-block">
+            {$lq__event_obj.cfg_json?.long_name ?? $lq__event_obj?.name}
+        </span>
+
+    </h2>
+
+</header>
 
 
 
diff --git a/src/routes/events/[event_id]/event_page_menu.svelte b/src/routes/events/[event_id]/event_page_menu.svelte
index c9385bfe..1b21d180 100644
--- a/src/routes/events/[event_id]/event_page_menu.svelte
+++ b/src/routes/events/[event_id]/event_page_menu.svelte
@@ -40,7 +40,7 @@ import Comp__pres_mgmt_menu_nav from '../ae_comp__events_menu_nav.svelte';
         />
 
     <span
-        class="ae_menu__object_options flex flex-row items-center justify-around"
+        class="ae_menu__object_options flex flex-row flex-wrap gap-0.5 items-center justify-around"
         >
         <!-- Button to toggle between the regular event session search view and managing event files -->
         <button
diff --git a/src/routes/events/[event_id]/location/[event_location_id]/+page.svelte b/src/routes/events/[event_id]/location/[event_location_id]/+page.svelte
index 7878c69f..365310b0 100644
--- a/src/routes/events/[event_id]/location/[event_location_id]/+page.svelte
+++ b/src/routes/events/[event_id]/location/[event_location_id]/+page.svelte
@@ -167,49 +167,56 @@ $effect(() => {
 
 {:else if $lq__event_location_obj?.enable || $ae_loc.trusted_access}
 
-<h2 class="h2 text-center rounded-md p-1 px-2 bg-gray-300 flex flex-row gap-0.25 items-center justify-between w-full">
-    <span
-        class="flex flex-row gap-1 items-center"
+<header class="ae_module_header">
+    <h2
+        class="
+            text-2xl font-bold text-center
+            flex flex-row gap-0.25 items-center justify-between w-full
+            "
         >
-        <span class="fas fa-calendar-day m-1 text-neutral-800/80"></span>
-        <!-- Button to toggle between the regular location view and managing location files -->
-        <button
-            type="button"
-            onclick={() => {
-                if ($events_loc.pres_mgmt.show_content__location_view == 'manage_files') {
-                    $events_loc.pres_mgmt.show_content__location_view = null;
-                } else {
-                    $events_loc.pres_mgmt.show_content__location_view = 'manage_files';
-                }
-            }}
-            class="btn btn-md hover:preset-filled-secondary-500"
-            class:preset-filled-secondary-500={$events_loc.pres_mgmt.show_content__location_view == 'manage_files'}
-            class:preset-filled-tertiary-500={$events_loc.pres_mgmt.show_content__location_view != 'manage_files'}
-            class:hidden={!$ae_loc.administrator_access}
-            title="View location information or manage files for the location"
+        <span
+            class="flex flex-row gap-1 items-center"
             >
-            {#if $events_loc.pres_mgmt.show_content__location_view == 'manage_files'}
-                <span class="fas fa-info m-1"></span>
-                <!-- View Details -->
-                Location Info?
-            {:else}
-                <span class="fas fa-file-archive m-1"></span>
-                Location Files?
-                <span
-                    class="badge preset-tonal-success"
-                    class:hidden={!$lq__event_obj?.file_count}
-                    >
-                    <!-- absolute -top-1.5 -right-1.5 z-10 -->
-                     <span class="fas fa-file-alt m-1"></span>
-                    {$lq__event_obj?.file_count}×
-                </span>
-            {/if}
-        </button>
-    </span>
+            <span class="fas fa-calendar-day m-1 text-neutral-800/80"></span>
+            <!-- Button to toggle between the regular location view and managing location files -->
+            <button
+                type="button"
+                onclick={() => {
+                    if ($events_loc.pres_mgmt.show_content__location_view == 'manage_files') {
+                        $events_loc.pres_mgmt.show_content__location_view = null;
+                    } else {
+                        $events_loc.pres_mgmt.show_content__location_view = 'manage_files';
+                    }
+                }}
+                class="btn btn-md hover:preset-filled-secondary-500"
+                class:preset-filled-secondary-500={$events_loc.pres_mgmt.show_content__location_view == 'manage_files'}
+                class:preset-filled-tertiary-500={$events_loc.pres_mgmt.show_content__location_view != 'manage_files'}
+                class:hidden={!$ae_loc.administrator_access}
+                title="View location information or manage files for the location"
+                >
+                {#if $events_loc.pres_mgmt.show_content__location_view == 'manage_files'}
+                    <span class="fas fa-info m-1"></span>
+                    <!-- View Details -->
+                    Location Info?
+                {:else}
+                    <span class="fas fa-file-archive m-1"></span>
+                    Location Files?
+                    <span
+                        class="badge preset-tonal-success"
+                        class:hidden={!$lq__event_obj?.file_count}
+                        >
+                        <!-- absolute -top-1.5 -right-1.5 z-10 -->
+                        <span class="fas fa-file-alt m-1"></span>
+                        {$lq__event_obj?.file_count}×
+                    </span>
+                {/if}
+            </button>
+        </span>
 
-    {@html $lq__event_location_obj?.name ?? ae_snip.html__not_set}
+        {@html $lq__event_location_obj?.name ?? ae_snip.html__not_set}
 
-</h2>
+    </h2>
+</header>
 
 {#if !$events_loc.pres_mgmt.show_content__location_view || $events_loc.pres_mgmt.show_content__location_view == 'default'}
 
diff --git a/src/routes/events/[event_id]/location/[event_location_id]/location_page_menu.svelte b/src/routes/events/[event_id]/location/[event_location_id]/location_page_menu.svelte
index 274b2836..c097bc88 100644
--- a/src/routes/events/[event_id]/location/[event_location_id]/location_page_menu.svelte
+++ b/src/routes/events/[event_id]/location/[event_location_id]/location_page_menu.svelte
@@ -42,7 +42,7 @@ let ae_triggers: key_val = $state({});
         />
 
     <span
-        class="ae_menu__object_options flex flex-row items-center justify-around"
+        class="ae_menu__object_options flex flex-row flex-wrap items-center justify-around"
         >
         <!-- Button to toggle between the regular location view and managing location files -->
         <button
diff --git a/src/routes/events/[event_id]/locations/+page.svelte b/src/routes/events/[event_id]/locations/+page.svelte
index 6c0c1b36..c8c7fa51 100644
--- a/src/routes/events/[event_id]/locations/+page.svelte
+++ b/src/routes/events/[event_id]/locations/+page.svelte
@@ -106,21 +106,28 @@ onMount(() => {
 
 {:else}
 
-<h2 class="h2 text-center rounded-md p-1 px-2 bg-gray-300 flex flex-row gap-0.25 items-center justify-between w-full">
-    <span
-        class="flex flex-row gap-1 items-center"
+<header class="ae_module_header">
+    <h2
+        class="
+            text-2xl font-bold text-center
+            flex flex-row gap-0.25 items-center justify-between w-full
+            "
         >
-        <span class="fas fa-map-marked m-1 text-neutral-800/80"></span>
-        Locations/Rooms
-        <!-- Button to toggle between the regular location view and managing locations??? -->
-    </span>
-    <!-- Locations for: -->
-     {#if $lq__event_obj?.cfg_json?.short_name}
-        {@html $lq__event_obj?.cfg_json.short_name ?? ae_snip.html__not_set}
-    {:else}
-        {@html $lq__event_obj?.name ?? ae_snip.html__not_set}
-    {/if}
-</h2>
+        <span
+            class="flex flex-row gap-1 items-center"
+            >
+            <span class="fas fa-map-marked m-1 text-neutral-800/80"></span>
+            Locations/Rooms
+            <!-- Button to toggle between the regular location view and managing locations??? -->
+        </span>
+        <!-- Locations for: -->
+        {#if $lq__event_obj?.cfg_json?.short_name}
+            {@html $lq__event_obj?.cfg_json.short_name ?? ae_snip.html__not_set}
+        {:else}
+            {@html $lq__event_obj?.name ?? ae_snip.html__not_set}
+        {/if}
+    </h2>
+</header>
 
 <Element_data_store
     ds_code="events__pres_mgmt__locations_msg"
diff --git a/src/routes/events/[event_id]/locations/locations_page_menu.svelte b/src/routes/events/[event_id]/locations/locations_page_menu.svelte
index 29d1bead..e0fc68e3 100644
--- a/src/routes/events/[event_id]/locations/locations_page_menu.svelte
+++ b/src/routes/events/[event_id]/locations/locations_page_menu.svelte
@@ -40,7 +40,7 @@ import Comp__events_menu_nav from './../../ae_comp__events_menu_nav.svelte';
         />
 
     <span
-        class="ae_menu__object_options flex flex-row items-center justify-around"
+        class="ae_menu__object_options flex flex-row flex-wrap gap-0.5 items-center justify-around"
         >
         <!-- Button to toggle between showing and not showing the extended options menu -->
         <button
@@ -95,7 +95,7 @@ import Comp__events_menu_nav from './../../ae_comp__events_menu_nav.svelte';
 
     <!-- BEGIN: The expanded menu area for information and options -->
     <div
-        class="flex flex-row items-center justify-around w-full bg-blue-100 hover:bg-blue-200 border border-blue-200 hover:border-blue-400 p-2 rounded-md"
+        class="flex flex-row flex-wrap gap-0.5 items-center justify-around w-full bg-blue-100 hover:bg-blue-200 border border-blue-200 hover:border-blue-400 p-2 rounded-md"
         class:hidden={$events_loc.pres_mgmt.show_menu__location != 'options'}
         >
 
diff --git a/src/routes/events/[event_id]/presenter/[presenter_id]/+page.svelte b/src/routes/events/[event_id]/presenter/[presenter_id]/+page.svelte
index edc29692..86ec9eb7 100644
--- a/src/routes/events/[event_id]/presenter/[presenter_id]/+page.svelte
+++ b/src/routes/events/[event_id]/presenter/[presenter_id]/+page.svelte
@@ -120,7 +120,7 @@ let lq__auth__event_presenter_obj = $derived(liveQuery(async () => {
 
 {:else if $lq__event_presenter_obj?.enable || $ae_loc.trusted_access}
 
-<h2 class="ae_module_header h4">
+<header class="ae_module_header">
     <span
         class="flex flex-row flex-wrap gap-1 items-center justify-center"
         >
@@ -160,11 +160,16 @@ let lq__auth__event_presenter_obj = $derived(liveQuery(async () => {
         </button>
     </span>
 
-
-    {@html $lq__event_presenter_obj?.full_name ?? ae_snip.html__not_set}
-    <!-- <span class="text-sm text-gray-600 dark:text-gray-400">
-        Presenter ID: {$lq__event_presenter_obj?.event_presenter_id}
-    </span> -->
+    <!-- <span class="grow flex flex-row flex-wrap gap-1 items-center justify-around"> -->
+    <h2
+        class="text-2xl font-bold text-center max-w-xs sm:max-w-lg md:max-w-2xl"
+        title="{$lq__event_presenter_obj?.full_name} ID: {$lq__event_presenter_obj?.event_presenter_id}"
+        >
+        {@html $lq__event_presenter_obj?.full_name ?? ae_snip.html__not_set}
+        <!-- <span class="text-sm text-gray-600 dark:text-gray-400">
+            Presenter ID: {$lq__event_presenter_obj?.event_presenter_id}
+        </span> -->
+    </h2>
 
 
     <span
@@ -258,7 +263,8 @@ let lq__auth__event_presenter_obj = $derived(liveQuery(async () => {
     </span>
 
 
-</h2>
+
+</header>
 
 {#if !$events_loc.pres_mgmt.show_content__presenter_view || $events_loc.pres_mgmt.show_content__presenter_view == 'default' && $lq__event_presenter_obj}
     <Presenter_view
diff --git a/src/routes/events/[event_id]/presenter/[presenter_id]/presenter_page_menu.svelte b/src/routes/events/[event_id]/presenter/[presenter_id]/presenter_page_menu.svelte
index 83b5bbbb..918df91e 100644
--- a/src/routes/events/[event_id]/presenter/[presenter_id]/presenter_page_menu.svelte
+++ b/src/routes/events/[event_id]/presenter/[presenter_id]/presenter_page_menu.svelte
@@ -43,7 +43,7 @@ let ae_triggers: key_val = $state({});
         />
 
     <span
-        class="ae_menu__object_options flex flex-row flex-wrap items-center justify-around"
+        class="ae_menu__object_options flex flex-row flex-wrap gap-0.5 items-center justify-around"
         >
         <!-- Button to toggle between the regular presenter view and managing presenter files -->
         <button
diff --git a/src/routes/events/[event_id]/reports/+page.svelte b/src/routes/events/[event_id]/reports/+page.svelte
index d3f94585..89bad0e4 100644
--- a/src/routes/events/[event_id]/reports/+page.svelte
+++ b/src/routes/events/[event_id]/reports/+page.svelte
@@ -566,26 +566,36 @@ async function handle_qry__event_session(
 
 {:else}
 
-<h2
-    class="
-        h2 text-center rounded-md p-1 px-2
-        preset-filled-surface-400-600 text-neutral-800/90
-        flex flex-row gap-0.25 items-center justify-between w-full
-        "
+<header class="ae_module_header">
+    <!-- <span
+        class="flex flex-row flex-wrap gap-1 items-center justify-center"
+        > -->
+
+        <!-- rounded-md p-1 px-2 -->
+        <!-- preset-filled-surface-400-600 text-neutral-800/90 -->
+    <h2
+        class="
+            h2 text-center
+            flex flex-row gap-0.25 items-center justify-between w-full
+            "
         >
-    <span
-        class="flex flex-row gap-1 items-center"
-        >
-        <span class="fas fa-chart-line m-1 text-neutral-800/80"></span>
-        Reports
-    </span>
-    <!-- Reports for: -->
-     {#if $lq__event_obj?.cfg_json?.short_name}
-        {@html $lq__event_obj?.cfg_json.short_name ?? ae_snip.html__not_set}
-    {:else}
-        {@html $lq__event_obj?.name ?? ae_snip.html__not_set}
-    {/if}
-</h2>
+        <span
+            class="flex flex-row gap-1 items-center"
+            >
+            <span class="fas fa-chart-line m-1 text-neutral-800/80"></span>
+            Reports
+        </span>
+        <!-- Reports for: -->
+        {#if $lq__event_obj?.cfg_json?.short_name}
+            {@html $lq__event_obj?.cfg_json.short_name ?? ae_snip.html__not_set}
+        {:else}
+            {@html $lq__event_obj?.name ?? ae_snip.html__not_set}
+        {/if}
+    </h2>
+
+<!-- </span> -->
+
+</header>
 
 
 <div class="preset-tonal-success border border-success-500 my-2 p-2 rounded-md flex flex-row flex-wrap gap-1 items-center justify-center">
diff --git a/src/routes/events/[event_id]/session/[session_id]/+page.svelte b/src/routes/events/[event_id]/session/[session_id]/+page.svelte
index a5c288c6..dbad8592 100644
--- a/src/routes/events/[event_id]/session/[session_id]/+page.svelte
+++ b/src/routes/events/[event_id]/session/[session_id]/+page.svelte
@@ -189,7 +189,7 @@ if (!$ae_loc.authenticated_access && $events_loc.pres_mgmt.show_content__session
 
 {:else if $lq__event_session_obj?.enable || $ae_loc.trusted_access}
 
-<h2 class="ae_module_header h4">
+<header class="ae_module_header">
     <span
         class="flex flex-row flex-wrap gap-1 items-center justify-center"
         >
@@ -229,14 +229,16 @@ if (!$ae_loc.authenticated_access && $events_loc.pres_mgmt.show_content__session
         </button>
     </span>
 
-    <span class="flex flex-row flex-wrap gap-1 items-center justify-end text-right">
-    <span class="max-w-xs sm:max-w-lg md:max-w-2xl">
-    {@html $lq__event_session_obj?.name ?? ae_snip.html__not_set}
-    </span>
+    <span class="grow flex flex-row flex-wrap gap-1 items-center justify-around">
+    <h2 class="text-xl font-bold text-center max-w-xs sm:max-w-lg md:max-w-2xl">
+        <!-- <span class="max-w-xs sm:max-w-lg md:max-w-2xl"> -->
+        {@html $lq__event_session_obj?.name ?? ae_snip.html__not_set}
+        <!-- </span> -->
+    </h2>
 
     {#if !$events_loc.pres_mgmt?.hide__session_code && $lq__event_session_obj.code || $ae_loc.edit_mode}
     <span
-        class="badge text-sm preset-tonal-tertiary flex flex-col gap-0.25 max-w-fit"
+        class="badge text-sm preset-tonal-surface flex flex-col gap-0.25 max-w-fit shrink"
         title="Session code {$lq__event_session_obj.code}"
         >
         <span class="text-xs text-surface-800-200">
@@ -247,7 +249,8 @@ if (!$ae_loc.authenticated_access && $events_loc.pres_mgmt.show_content__session
     </span>
     {/if}
     </span>
-</h2>
+
+</header>
 
 <Element_data_store
     ds_code="events__pres_mgmt__session_msg"
diff --git a/src/routes/events/[event_id]/session/[session_id]/session_page_menu.svelte b/src/routes/events/[event_id]/session/[session_id]/session_page_menu.svelte
index 789d5bb6..83125d07 100644
--- a/src/routes/events/[event_id]/session/[session_id]/session_page_menu.svelte
+++ b/src/routes/events/[event_id]/session/[session_id]/session_page_menu.svelte
@@ -56,7 +56,7 @@ let ae_triggers: key_val = $state({});
         />
 
     <span
-        class="ae_menu__object_options flex flex-row items-center justify-around"
+        class="ae_menu__object_options flex flex-row flex-wrap gap-0.5 items-center justify-around"
         >
         <!-- Button to toggle between the regular session view and managing session files -->
         <button
diff --git a/src/routes/events/ae_comp__events_menu_nav.svelte b/src/routes/events/ae_comp__events_menu_nav.svelte
index 6634f1a4..3aa57580 100644
--- a/src/routes/events/ae_comp__events_menu_nav.svelte
+++ b/src/routes/events/ae_comp__events_menu_nav.svelte
@@ -56,7 +56,7 @@ export let events__session_search: boolean = false; // event_id
     </span>
 
     <span
-        class="ae_menu__navigation_options flex flex-row flex-wrap items-center justify-around"
+        class="ae_menu__navigation_options flex flex-row flex-wrap gap-0.5 items-center justify-around"
         >
         <a
             href="/events/{events__session_search}"