Making things look good.

src/routes/events/+layout.svelte

@@ -144,7 +144,7 @@ if (browser) {
     class:iframe={$ae_loc?.iframe}
     class="
         ae_events
-        h-full max-h-full max-w-6xl overflow-auto
+        h-full max-h-full max-w-6xl
         flex flex-col gap-1
         m-auto
         bg-gray-50 dark:bg-gray-900

src/routes/events/[event_id]/(launcher)/launcher/+layout.svelte

@@ -1,5 +1,12 @@
 <script lang="ts">
 let log_lvl: number = $state(1);
+interface Props {
+    /** @type {import('./$types').LayoutData} */
+    data: any;
+    children?: import('svelte').Snippet;
+}
+
+let { data, children }: Props = $props();
 
 // *** Import Svelte specific
 // import { onMount, tick } from 'svelte';
@@ -11,16 +18,15 @@ import { liveQuery } from "dexie";
 import { Drawer, Footer, Modal } from 'flowbite-svelte';
 import { listen, idle, onIdle } from 'svelte-idle'
 
+import {
+        // Brain,
+        // House, Library,
+        // RefreshCw,
+        Satellite
+    } from '@lucide/svelte';
+// import { AppBar } from '@skeletonlabs/skeleton-svelte';
+
 // *** Import Aether specific variables and functions
-interface Props {
-    /** @type {import('./$types').LayoutData} */
-    data: any;
-    children?: import('svelte').Snippet;
-}
-
-let { data, children }: Props = $props();
-
-
 import type { key_val } from '$lib/ae_stores';
 import { ae_util } from '$lib/ae_utils/ae_utils';
 import { api } from '$lib/api';
@@ -701,39 +707,64 @@ $effect(() => {
 <div
     class="
         static
-
         m-auto
         border-x border-gray-200 dark:border-gray-600
         mt-12 mb-14 sm:mb-12
-        h-full w-full max-w-7xl
+        h-full w-full max-w-8xl
         "
         >
 
 
-
 <header
     id="Main-Header"
     class="
         absolute top-0 start-0 z-20 w-full p-1
-        flex flex-row items-center justify-evenly bg-slate-200
+        flex flex-row items-center justify-around sm:justify-between
+        bg-slate-200
         text-sm hover:text-base
         m-auto
+        px-12
         opacity-50 hover:opacity-100
         transition-all duration-1000
         "
     >
-    <h3 class="hidden sm:inline-block h4 text-center italic text-surface-600-400">
+    <h3 class="h4 text-center italic text-surface-600-400">
-        Æ Presentation Launcher
+
+        <button
+            class=""
+            onclick={() => {
+                $events_loc.launcher.hide__launcher_menu = !$events_loc.launcher.hide__launcher_menu;
+            }}
+            title="Toggle Launcher menu"
+            >
+            <!-- Be sure to explain what &AElig; (Aether) means in the title text or similar! -->
+            <Satellite
+                class="text-base mx-1 inline-block text-gray-500"
+                />
+            <abbr title="Aether - Events Module Launcher">
+                Æ
+                Launcher
+            </abbr>
+        </button>
     </h3>
 
     {#if $lq__event_obj}
-        <h2 class="h3 text-center text-surface-600-400">{$lq__event_obj.cfg_json?.short_name}</h2>
+        <h2 class="hidden md:inline-block h3 text-center text-surface-600-400">{$lq__event_obj.cfg_json?.short_name}</h2>
         <h3
             class="h4 text-center italic text-surface-600-400"
             title="Location ID: {$lq__event_location_obj?.event_location_id} Name: {$lq__event_location_obj?.name}"
             >
+            <button
+                class="text-base"
+                onclick={() => {
+                    $ae_loc.edit_mode = !$ae_loc.edit_mode;
+                }}
+                title="Toggle Edit Mode to show location options and more"
+                >
+                <span class="fas fa-map-marker-alt"></span>
+                <span class="sr-only">Location:</span>
+            </button>
             {$lq__event_location_obj?.name}
-            <!-- {$events_slct.event_location_id} -->
         </h3>
     {:else}
         <div class="flex flex-row gap-1 items-center justify-center">
@@ -767,12 +798,13 @@ $effect(() => {
         max-w-xs
         pt-0.5 pr-0.5
         flex flex-col gap-1 items-center justify-start
-        overflow-y-auto
+
         border-r border-gray-200 dark:border-gray-700
         hover:bg-surface-100-900
         "
     class:hidden={$events_loc.launcher.hide__launcher_menu}
     >
+    <!-- overflow-y-auto -->
 
     <!-- {#await $events_slct.id_li__event_location}
         Loading location list... a

src/routes/events/[event_id]/(launcher)/launcher_file_cont.svelte

@@ -298,6 +298,7 @@ async function handle_open_file() {
         <span class="fas fa-paper-plane" class:hidden="{hide_launch_icon}"></span> {ae_util.shorten_filename({filename: event_file_obj.filename, max_length: max_filename_length})}
     </a> -->
     <button
+        type="button"
         onclick={() => {
             $events_sess.launcher.modal__open = event_file_obj.event_file_id_random;
             if (!modal_title) {
@@ -399,6 +400,7 @@ async function handle_open_file() {
 <!-- Last [WORKING!] - Handle opening a file. This applies to all Launcher app modes (default, onsite, native) -->
 {:else}
     <button
+        type="button"
         onclick={() => {
             let new_filename = event_file_obj.filename;
 
@@ -483,6 +485,7 @@ async function handle_open_file() {
     >
 
     <button
+        type="button"
         onclick={() => {
             // let new_filename = event_file_obj.filename;
 
@@ -542,6 +545,7 @@ async function handle_open_file() {
         >
         <!-- {(event_file_obj?.open_in_os ? 'Hidden' : 'Not Hidden')} -->
         <button
+            type="button"
             onclick={() => {
                 // Go from null to win, win to mac, mac to null, null to win, etc.
                 if (!event_file_obj?.open_in_os) {

src/routes/events/[event_id]/(launcher)/launcher_menu.svelte

@@ -100,13 +100,14 @@ let ae_promises: key_val = $state({
         event_launcher_menu
         shrink h-full w-full max-w-full
         flex flex-col flex-wrap gap-1 items-center justify-start
-        overflow-x-clip
+
         "
         >
+        <!-- overflow-x-clip -->
 
 
 {#if $lq__event_event_file_obj_li}
-<div class="w-full">
+<div class="w-full flex flex-col gap-0.5">
     <!-- <div class="text-xs text-neutral-800/80">
         <strong>
         Event Files:
@@ -179,7 +180,7 @@ let ae_promises: key_val = $state({
 
 
 {#if $lq__location_event_file_obj_li}
-<div class="w-full">
+<div class="w-full flex flex-col gap-0.5">
     {#each $lq__location_event_file_obj_li as event_file_obj, index}
         <button
             disabled={!$ae_loc.trusted_access}
@@ -203,8 +204,26 @@ let ae_promises: key_val = $state({
                 "
             title={`Download this file:\n${event_file_obj.filename}\n[API] SHA256: ${event_file_obj.hash_sha256.slice(0, 10)}... Hosted ID: ${event_file_obj.hosted_file_id_random} Event File ID: ${event_file_obj.event_file_id_random}`}
             >
-            <span class="fas fa-file-archive m-1 text-neutral-800/80"></span>
+            {#await ae_promises[event_file_obj.event_file_id_random]}
-            {event_file_obj?.filename}
+                <span class="fas fa-spinner fa-spin mx-1"></span>
+                <span class="">
+                    Downloading
+                    {#if $ae_sess.api_download_kv[event_file_obj.hosted_file_id_random]}
+                        {$ae_sess.api_download_kv[event_file_obj.hosted_file_id_random].percent_completed}%
+                    {/if}
+                    :
+                </span>
+            {:then}
+                <!-- <span class="fas fa-download mx-1"></span> -->
+                <span class="fas fa-{ae_util.file_extension_icon(event_file_obj.extension)}"></span>
+                <!-- <span class="text-sm">
+                Download:
+                </span> -->
+            {/await}
+
+            <span class="grow">
+            {ae_util.shorten_filename({filename: event_file_obj.filename, max_length: 30})}
+            </span>
         </button>
     {/each}
 </div>

src/routes/events/[event_id]/(launcher)/menu_session_list.svelte

@@ -49,7 +49,7 @@ let hover_timer: any = $state(null);
 <div
     class="
         w-full max-w-80
-        flex flex-col md:flex-row flex-wrap gap-1 items-center justify-start md:justify-center
+        flex flex-col flex-wrap gap-1 items-center justify-start md:justify-center
         "
         >
 {#if $lq__event_session_obj_li && $lq__event_session_obj_li.length > 0}
@@ -70,10 +70,23 @@ let hover_timer: any = $state(null);
 </div>
 
 <ul
-    class="space-y-1 max-w-full p-0 m-0"
+    class="
+        space-y-1
+        w-full max-w-full
+        p-0 m-0
+        flex flex-col gap-0.5 items-start justify-start
+        "
     >
     {#each $lq__event_session_obj_li as event_session_obj}
-        <li class="p-0 m-0">
+        <li
+            class="
+                p-0 m-0
+                w-full max-w-full
+                z-0 hover:z-20
+                hover:scale-120
+                transition-all
+                "
+                >
         <button
             type="button"
             onmouseenter={() => {
@@ -164,9 +177,11 @@ let hover_timer: any = $state(null);
             }}
             class="
                 btn btn-sm hover:preset-filled-primary-500
-                overflow-hidden
+
                 text-sm
-                w-full
+                w-full max-w-full
+                hover:min-w-fit
+                hover:max-w-2xl
                 text-left
                 m-0
                 p-0
@@ -184,6 +199,8 @@ let hover_timer: any = $state(null);
             class:dim={event_session_obj?.hide}
             title={`Session: ${event_session_obj?.name}\nID: ${event_session_obj?.id} | ${ae_util.iso_datetime_formatter(event_session_obj?.start_datetime, $events_loc.launcher.time_format)}`}
             >
+            <!-- hover:scale-115 -->
+            <!-- hover:z-index-10     -->
 
             <span
                 class="border-r border-surface-400-600 pr-1 min-w-28"
@@ -206,7 +223,14 @@ let hover_timer: any = $state(null);
                 </span>
             </span>
 
-            <span class="text-xs max-w-44">
+            <span
+                class="
+                    grow text-xs
+                    min-w-32 hover:min-w-fit
+                    overflow-hidden hover:overflow-visible
+                    trasnition-all
+                    "
+                    >
                 {event_session_obj?.name}
             </span>