From 0c18eea31cbdcb3778dae65e5df9b6780da4f0e0 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Fri, 13 Mar 2026 13:11:23 -0400
Subject: [PATCH] refactor(pres_mgmt): consistent layout, menu structure, and
 centering
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add (pres_mgmt)/+layout.svelte with shared section wrapper (max-w-7xl mx-auto)
  so all child pages center correctly on wide viewports
- Strip per-page outer <section> tags from session, presenter, location pages;
  replace with inner <div max-w-7xl mx-auto> for detail constraint
- Restructure all page menus from flex-row to flex-col so nav bar occupies its
  own row and options/actions sit in a separate justified row below — prevents
  unwanted wrapping when nav is w-full
- Standardize Æ Core button visibility to edit_mode && manager_access across all
  menus; update button style to ae_btn_warning for visual distinction
- Add w-full + justify-between to ae_comp__events_menu_nav outer div

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../[event_id]/(pres_mgmt)/+layout.svelte     |   7 +
 .../(pres_mgmt)/event_page_menu.svelte        |   8 +-
 .../location/[event_location_id]/+page.svelte |   4 +-
 .../location_page_menu.svelte                 |   2 +-
 .../(pres_mgmt)/locations/+page.svelte        |  17 +--
 .../locations/locations_page_menu.svelte      |   2 +-
 .../presenter/[presenter_id]/+page.svelte     |   4 +-
 .../[presenter_id]/presenter_page_menu.svelte | 120 +++++++++---------
 .../reports/event_reports_page_menu.svelte    |   2 +-
 .../session/[session_id]/+page.svelte         |   4 +-
 .../[session_id]/session_page_menu.svelte     |  70 +++++-----
 .../events/ae_comp__events_menu_nav.svelte    |   4 +-
 12 files changed, 121 insertions(+), 123 deletions(-)
 create mode 100644 src/routes/events/[event_id]/(pres_mgmt)/+layout.svelte

diff --git a/src/routes/events/[event_id]/(pres_mgmt)/+layout.svelte b/src/routes/events/[event_id]/(pres_mgmt)/+layout.svelte
new file mode 100644
index 00000000..21836dc1
--- /dev/null
+++ b/src/routes/events/[event_id]/(pres_mgmt)/+layout.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    let { children } = $props();
+</script>
+
+<section class="ae_events_pres_mgmt w-full max-w-7xl mx-auto flex flex-col gap-1 py-1 px-2 pb-16">
+    {@render children?.()}
+</section>
diff --git a/src/routes/events/[event_id]/(pres_mgmt)/event_page_menu.svelte b/src/routes/events/[event_id]/(pres_mgmt)/event_page_menu.svelte
index 90b69b6b..23afc5f2 100644
--- a/src/routes/events/[event_id]/(pres_mgmt)/event_page_menu.svelte
+++ b/src/routes/events/[event_id]/(pres_mgmt)/event_page_menu.svelte
@@ -56,19 +56,19 @@
 </script>
 
 <div class="pres_mgmt__session_search_menu ae_container_module_menu">
-    <div class="flex flex-row flex-wrap gap-1 items-center justify-around w-full">
+    <div class="flex flex-col gap-1 w-full">
 
         <Comp__events_menu_nav
             hide={!$ae_loc.authenticated_access}
             event_id={$lq__event_obj?.event_id}
-            ae_core={$ae_loc.administrator_access}
+            ae_core={$ae_loc.edit_mode && $ae_loc.manager_access}
             events__locations={$ae_loc.administrator_access}
             events__reports={$ae_loc.trusted_access}
-            events__settings={$ae_loc.edit_mode && $ae_loc.administrator_access}
+            events__settings={$ae_loc.edit_mode && $ae_loc.manager_access}
             events__session_search={false}
         />
 
-        <span class="ae_menu__object_options flex flex-row flex-wrap gap-0.5 items-center justify-around">
+        <span class="ae_menu__object_options flex flex-row flex-wrap gap-0.5 items-center justify-between w-full">
             <!-- Event Files toggle — the one real working button from the old menu, kept in place -->
             <!-- <button
                 type="button"
diff --git a/src/routes/events/[event_id]/(pres_mgmt)/location/[event_location_id]/+page.svelte b/src/routes/events/[event_id]/(pres_mgmt)/location/[event_location_id]/+page.svelte
index ce117a6d..fdd2f23e 100644
--- a/src/routes/events/[event_id]/(pres_mgmt)/location/[event_location_id]/+page.svelte
+++ b/src/routes/events/[event_id]/(pres_mgmt)/location/[event_location_id]/+page.svelte
@@ -103,7 +103,7 @@
     </title>
 </svelte:head>
 
-<section class="ae_events_pres_mgmt_event_location container mx-auto py-1 px-2 pb-16 space-y-6">
+<div class="ae_events_pres_mgmt_event_location w-full max-w-7xl mx-auto space-y-6">
     <Location_page_menu
         lq__event_location_obj={lq__event_location_obj}
         lq__event_obj={lq__event_obj}
@@ -152,4 +152,4 @@
             {/if}
         {/if}
     {/if}
-</section>
+</div>
diff --git a/src/routes/events/[event_id]/(pres_mgmt)/location/[event_location_id]/location_page_menu.svelte b/src/routes/events/[event_id]/(pres_mgmt)/location/[event_location_id]/location_page_menu.svelte
index 64bea958..bd7dc5a8 100644
--- a/src/routes/events/[event_id]/(pres_mgmt)/location/[event_location_id]/location_page_menu.svelte
+++ b/src/routes/events/[event_id]/(pres_mgmt)/location/[event_location_id]/location_page_menu.svelte
@@ -64,7 +64,7 @@
         <Comp__events_menu_nav
             hide={!$ae_loc.authenticated_access}
             event_id={$lq__event_obj?.event_id}
-            ae_core={$ae_loc.administrator_access}
+            ae_core={$ae_loc.edit_mode && $ae_loc.manager_access}
             events__locations={$ae_loc.trusted_access}
             events__session_search={$events_slct.event_id}
         />
diff --git a/src/routes/events/[event_id]/(pres_mgmt)/locations/+page.svelte b/src/routes/events/[event_id]/(pres_mgmt)/locations/+page.svelte
index 006a45cc..0584c024 100644
--- a/src/routes/events/[event_id]/(pres_mgmt)/locations/+page.svelte
+++ b/src/routes/events/[event_id]/(pres_mgmt)/locations/+page.svelte
@@ -101,20 +101,7 @@
     </title>
 </svelte:head>
 
-<section
-    class="
-        ae_events_pres_mgmt_event_location
-        md:container
-        flex flex-col gap-1
-        items-center
-        justify-start
-        mx-auto
-        py-1 px-2 pb-16
-        h-full
-        min-w-full
-        max-w-max
-        "
->
+<div class="ae_events_pres_mgmt_event_locations w-full">
     <Locations_page_menu {lq__event_obj} />
 
     {#if !$lq__event_location_obj_li}
@@ -164,7 +151,7 @@
         {lq__event_location_obj_li}
         link_to_id={$events_slct?.event_id ?? ''}
     />
-</section>
+</div>
 
 <style lang="postcss">
 </style>
diff --git a/src/routes/events/[event_id]/(pres_mgmt)/locations/locations_page_menu.svelte b/src/routes/events/[event_id]/(pres_mgmt)/locations/locations_page_menu.svelte
index 7f962921..4c467aef 100644
--- a/src/routes/events/[event_id]/(pres_mgmt)/locations/locations_page_menu.svelte
+++ b/src/routes/events/[event_id]/(pres_mgmt)/locations/locations_page_menu.svelte
@@ -27,7 +27,7 @@
         <Comp__events_menu_nav
             hide={!$ae_loc.authenticated_access}
             event_id={$lq__event_obj?.event_id}
-            ae_core={$ae_loc.administrator_access}
+            ae_core={$ae_loc.edit_mode && $ae_loc.manager_access}
             events__reports={$ae_loc.trusted_access}
             events__session_search={$events_slct.event_id}
         />
diff --git a/src/routes/events/[event_id]/(pres_mgmt)/presenter/[presenter_id]/+page.svelte b/src/routes/events/[event_id]/(pres_mgmt)/presenter/[presenter_id]/+page.svelte
index 9706a2a0..04cd842f 100644
--- a/src/routes/events/[event_id]/(pres_mgmt)/presenter/[presenter_id]/+page.svelte
+++ b/src/routes/events/[event_id]/(pres_mgmt)/presenter/[presenter_id]/+page.svelte
@@ -124,7 +124,7 @@
     </title>
 </svelte:head>
 
-<section class="ae_events_pres_mgmt_event_presenter w-full flex flex-col gap-1 py-1 px-2 pb-16">
+<div class="ae_events_pres_mgmt_event_presenter w-full max-w-7xl mx-auto">
     <Presenter_page_menu {lq__event_obj} {lq__event_presenter_obj} />
 
     {#if !$lq__event_presenter_obj}
@@ -495,7 +495,7 @@
             </p>
         </div>
     {/if}
-</section>
+</div>
 
 <!-- Main modal -->
 <Modal
diff --git a/src/routes/events/[event_id]/(pres_mgmt)/presenter/[presenter_id]/presenter_page_menu.svelte b/src/routes/events/[event_id]/(pres_mgmt)/presenter/[presenter_id]/presenter_page_menu.svelte
index 9392d954..2b4d1b95 100644
--- a/src/routes/events/[event_id]/(pres_mgmt)/presenter/[presenter_id]/presenter_page_menu.svelte
+++ b/src/routes/events/[event_id]/(pres_mgmt)/presenter/[presenter_id]/presenter_page_menu.svelte
@@ -61,7 +61,7 @@
 </script>
 
 <div class="pres_mgmt__presenter_view_menu ae_container_module_menu">
-    <div class="flex flex-row flex-wrap gap-1 items-center justify-around w-full">
+    <div class="flex flex-col gap-1 w-full">
 
         <Comp__events_menu_nav
             hide={false}
@@ -72,70 +72,72 @@
             events__session_search={$events_slct.event_id}
         />
 
-        <span class="ae_menu__object_options flex flex-row flex-wrap gap-0.5 items-center justify-around">
-            <!-- Options modal trigger -->
-            {#if $ae_loc.trusted_access}
-                <button
-                    type="button"
-                    onclick={() => (show_modal = true)}
-                    class="btn btn-sm ae_btn_info"
-                    title="Presenter options"
-                >
-                    <Settings size="1em" class="mr-1" />
-                    Options
-                </button>
-            {/if}
-
-            <!-- Help toggle -->
-            <button
-                type="button"
-                onclick={() => (show_help = !show_help)}
-                class="btn btn-sm"
-                class:ae_btn_info_filled={show_help}
-                class:ae_btn_info={!show_help}
-                title="Help and information about the presenter"
-            >
-                <Info size="1em" class="mr-1" />
-                {show_help ? 'Hide Help' : 'Help'}
-            </button>
-        </span>
-
-        <!-- Presenter agreement action (shown when require__presenter_agree is on) -->
-        {#if $events_loc.pres_mgmt?.require__presenter_agree}
-            <span class="ae_menu__action_options flex flex-row items-center justify-around">
-                {#if $lq__event_presenter_obj?.agree}
+        <div class="flex flex-row flex-wrap gap-1 items-center justify-between w-full">
+            <span class="ae_menu__object_options flex flex-row flex-wrap gap-0.5 items-center">
+                <!-- Options modal trigger -->
+                {#if $ae_loc.trusted_access}
                     <button
                         type="button"
-                        disabled={!$ae_loc.trusted_access && !$events_loc.auth__kv.presenter[$lq__event_presenter_obj?.event_presenter_id]}
-                        onclick={() => {
-                            $events_slct.event_presentation_id = $lq__event_presenter_obj?.event_presentation_id_random;
-                            $events_slct.event_presenter_id = $lq__event_presenter_obj?.event_presenter_id;
-                            $events_loc.pres_mgmt.show_modal__presenter_agree = $lq__event_presenter_obj?.event_presenter_id;
-                        }}
-                        class="btn btn-sm mx-1 font-bold ae_btn_success_filled"
-                        title="Agreed to terms and conditions"
+                        onclick={() => (show_modal = true)}
+                        class="btn btn-sm ae_btn_info"
+                        title="Presenter options"
                     >
-                        <span class="fas fa-check text-green-500 px-1"></span>
-                        Agreed
-                    </button>
-                {:else}
-                    <button
-                        type="button"
-                        disabled={!$ae_loc.trusted_access && !$events_loc.auth__kv.presenter[$lq__event_presenter_obj?.event_presenter_id]}
-                        onclick={() => {
-                            $events_slct.event_presentation_id = $lq__event_presenter_obj?.event_presentation_id_random;
-                            $events_slct.event_presenter_id = $lq__event_presenter_obj?.event_presenter_id;
-                            $events_loc.pres_mgmt.show_modal__presenter_agree = $lq__event_presenter_obj?.event_presenter_id;
-                        }}
-                        class="btn btn-sm mx-1 font-bold ae_btn_warning_filled"
-                        title="View terms and conditions"
-                    >
-                        <span class="fas fa-times bg-red-500 text-white px-1 mx-1"></span>
-                        Not yet agreed
+                        <Settings size="1em" class="mr-1" />
+                        Options
                     </button>
                 {/if}
+
+                <!-- Help toggle -->
+                <button
+                    type="button"
+                    onclick={() => (show_help = !show_help)}
+                    class="btn btn-sm"
+                    class:ae_btn_info_filled={show_help}
+                    class:ae_btn_info={!show_help}
+                    title="Help and information about the presenter"
+                >
+                    <Info size="1em" class="mr-1" />
+                    {show_help ? 'Hide Help' : 'Help'}
+                </button>
             </span>
-        {/if}
+
+            <!-- Presenter agreement action (shown when require__presenter_agree is on) -->
+            {#if $events_loc.pres_mgmt?.require__presenter_agree}
+                <span class="ae_menu__action_options flex flex-row items-center justify-around">
+                    {#if $lq__event_presenter_obj?.agree}
+                        <button
+                            type="button"
+                            disabled={!$ae_loc.trusted_access && !$events_loc.auth__kv.presenter[$lq__event_presenter_obj?.event_presenter_id]}
+                            onclick={() => {
+                                $events_slct.event_presentation_id = $lq__event_presenter_obj?.event_presentation_id_random;
+                                $events_slct.event_presenter_id = $lq__event_presenter_obj?.event_presenter_id;
+                                $events_loc.pres_mgmt.show_modal__presenter_agree = $lq__event_presenter_obj?.event_presenter_id;
+                            }}
+                            class="btn btn-sm mx-1 font-bold ae_btn_success_filled"
+                            title="Agreed to terms and conditions"
+                        >
+                            <span class="fas fa-check text-green-500 px-1"></span>
+                            Agreed
+                        </button>
+                    {:else}
+                        <button
+                            type="button"
+                            disabled={!$ae_loc.trusted_access && !$events_loc.auth__kv.presenter[$lq__event_presenter_obj?.event_presenter_id]}
+                            onclick={() => {
+                                $events_slct.event_presentation_id = $lq__event_presenter_obj?.event_presentation_id_random;
+                                $events_slct.event_presenter_id = $lq__event_presenter_obj?.event_presenter_id;
+                                $events_loc.pres_mgmt.show_modal__presenter_agree = $lq__event_presenter_obj?.event_presenter_id;
+                            }}
+                            class="btn btn-sm mx-1 font-bold ae_btn_warning_filled"
+                            title="View terms and conditions"
+                        >
+                            <span class="fas fa-times bg-red-500 text-white px-1 mx-1"></span>
+                            Not yet agreed
+                        </button>
+                    {/if}
+                </span>
+            {/if}
+        </div>
     </div>
 
     <!-- Options Modal -->
diff --git a/src/routes/events/[event_id]/(pres_mgmt)/reports/event_reports_page_menu.svelte b/src/routes/events/[event_id]/(pres_mgmt)/reports/event_reports_page_menu.svelte
index 7f326d2d..918224fa 100644
--- a/src/routes/events/[event_id]/(pres_mgmt)/reports/event_reports_page_menu.svelte
+++ b/src/routes/events/[event_id]/(pres_mgmt)/reports/event_reports_page_menu.svelte
@@ -27,7 +27,7 @@
         <Comp__events_menu_nav
             hide={!$ae_loc.authenticated_access}
             event_id={$lq__event_obj?.event_id}
-            ae_core={$ae_loc.administrator_access}
+            ae_core={$ae_loc.edit_mode && $ae_loc.manager_access}
             events__locations={$ae_loc.trusted_access}
             events__session_search={$events_slct.event_id}
         />
diff --git a/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/+page.svelte b/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/+page.svelte
index c9fe500d..a4f9cbb1 100644
--- a/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/+page.svelte
+++ b/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/+page.svelte
@@ -99,7 +99,7 @@
     </title>
 </svelte:head>
 
-<section class="ae_events_pres_mgmt_event_session w-full py-1 px-2 pb-16 space-y-6">
+<div class="ae_events_pres_mgmt_event_session w-full max-w-7xl mx-auto space-y-6">
 
     <!-- Pass observable STORES to child components (they use $) -->
     <Session_page_menu {data} {lq__event_session_obj} {lq__auth__event_presenter_obj} />
@@ -136,7 +136,7 @@
             <span>Synchronizing with session data...</span>
         </div>
     {/if}
-</section>
+</div>
 
 <!-- Modals -->
 <Modal
diff --git a/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/session_page_menu.svelte b/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/session_page_menu.svelte
index 0c0fa040..eb590223 100644
--- a/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/session_page_menu.svelte
+++ b/src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/session_page_menu.svelte
@@ -77,7 +77,7 @@
 </script>
 
 <div class="pres_mgmt__session_menu ae_container_module_menu">
-    <div class="flex flex-row flex-wrap gap-1 items-center justify-around w-full">
+    <div class="flex flex-col gap-1 w-full">
 
         <!-- launcher_id is the event_location_id; launcher_session_id pre-loads this session in the launcher -->
         <Comp__events_menu_nav
@@ -97,44 +97,46 @@
             events__locations={$ae_loc.administrator_access}
         />
 
-        <span class="ae_menu__object_options flex flex-row flex-wrap gap-0.5 items-center justify-around">
-            <!-- Options modal trigger -->
-            {#if $ae_loc.trusted_access}
+        <div class="flex flex-row flex-wrap gap-1 items-center justify-between w-full">
+            <span class="ae_menu__object_options flex flex-row flex-wrap gap-0.5 items-center">
+                <!-- Options modal trigger -->
+                {#if $ae_loc.trusted_access}
+                    <button
+                        type="button"
+                        onclick={() => (show_modal = true)}
+                        class="btn btn-sm ae_btn_info"
+                        title="Session options"
+                    >
+                        <Settings size="1em" class="mr-1" />
+                        Options
+                    </button>
+                {/if}
+
+                <!-- Help toggle -->
                 <button
                     type="button"
-                    onclick={() => (show_modal = true)}
-                    class="btn btn-sm ae_btn_info"
-                    title="Session options"
+                    onclick={() => (show_help = !show_help)}
+                    class="btn btn-sm"
+                    class:ae_btn_info_filled={show_help}
+                    class:ae_btn_info={!show_help}
+                    title="Help and information about the session"
                 >
-                    <Settings size="1em" class="mr-1" />
-                    Options
+                    <Info size="1em" class="mr-1" />
+                    {show_help ? 'Hide Help' : 'Help'}
                 </button>
-            {/if}
+            </span>
 
-            <!-- Help toggle -->
-            <button
-                type="button"
-                onclick={() => (show_help = !show_help)}
-                class="btn btn-sm"
-                class:ae_btn_info_filled={show_help}
-                class:ae_btn_info={!show_help}
-                title="Help and information about the session"
-            >
-                <Info size="1em" class="mr-1" />
-                {show_help ? 'Hide Help' : 'Help'}
-            </button>
-        </span>
-
-        <span class="ae_menu__action_options" class:hidden={!$events_loc.auth__person?.id}>
-            {#if $lq__event_session_obj?.event_id}
-                <Sign_in_out
-                    {data}
-                    event_session_id={$lq__event_session_obj?.event_id}
-                    {lq__event_session_obj}
-                    {lq__auth__event_presenter_obj}
-                />
-            {/if}
-        </span>
+            <span class="ae_menu__action_options" class:hidden={!$events_loc.auth__person?.id}>
+                {#if $lq__event_session_obj?.event_id}
+                    <Sign_in_out
+                        {data}
+                        event_session_id={$lq__event_session_obj?.event_id}
+                        {lq__event_session_obj}
+                        {lq__auth__event_presenter_obj}
+                    />
+                {/if}
+            </span>
+        </div>
     </div>
 
     <!-- Options Modal -->
diff --git a/src/routes/events/ae_comp__events_menu_nav.svelte b/src/routes/events/ae_comp__events_menu_nav.svelte
index f507ba63..4d6faa1c 100644
--- a/src/routes/events/ae_comp__events_menu_nav.svelte
+++ b/src/routes/events/ae_comp__events_menu_nav.svelte
@@ -46,7 +46,7 @@
 
 <!-- This is for common navigation links. -->
 <div
-    class="ae_comp__events_menu_nav flex flex-row flex-wrap gap-1.5 items-center justify-around"
+    class="ae_comp__events_menu_nav w-full flex flex-row flex-wrap gap-1.5 items-center justify-between"
     class:hidden={hide}
 >
     <span
@@ -54,7 +54,7 @@
     >
         <a
             href="/core"
-            class="btn btn-sm mx-1 ae_btn_info"
+            class="btn btn-sm mx-1 ae_btn_warning"
             class:hidden={!ae_core}
         >
             <span class="fas fa-cogs m-1"></span>