More significant updates to the general layout and styling per module.

src/routes/hosted_files/+layout.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+/** @type {import('./$types').LayoutData} */
+let log_lvl: number = 1;
+
+// *** Import Svelte specific
+// import { browser } from '$app/environment';
+
+// *** Import other supporting libraries
+// import * as icons from '@lucide/svelte';
+import {
+        Brain,
+        House, Library,
+        RefreshCw,
+        Satellite
+    } from '@lucide/svelte';
+
+// *** Import Aether specific variables and functions
+// import type { key_val } from '$lib/ae_stores';
+// import { ae_util } from '$lib/ae_utils/ae_utils';
+import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
+// import { core_func } from '$lib/ae_core/ae_core_functions';
+import Element_data_store from '$lib/element_data_store_v2.svelte';
+
+interface Props {
+    /** @type {import('./$types').LayoutData} */
+    data: any;
+    children?: import('svelte').Snippet;
+}
+
+let { data, children }: Props = $props();
+
+</script>
+
+<svelte:head>
+	<title>Hosted Files - {$ae_loc?.title ?? 'Æ loading...'}</title>
+</svelte:head>
+
+
+<div
+    id="ae_hosted_files"
+    class:iframe={$ae_loc?.iframe}
+    class="
+        ae_hosted_files
+        h-full max-h-full max-w-6xl overflow-auto
+        flex flex-col gap-1
+        m-auto
+        "
+    >
+
+
+<nav
+    class="
+        submenu
+        flex flex-row flex-wrap
+        items-center justify-between
+        gap-1
+        border-b-2
+        p-1
+        px-2
+        pb-2
+        "
+    >
+    <span class="justify-self-start">
+
+        <!-- Be sure to explain what &AElig; (Aether) means in the title text or similar! -->
+        <Satellite
+            size="1.5em"
+            class="mx-1 inline-block text-gray-500"
+            />
+        <abbr title="Aether - Hosted Files Module">
+            Æ
+            Hosted Files
+        </abbr>
+    </span>
+    <!-- <Element_data_store
+        ds_code="hub__site__appshell_header"
+        ds_type="html"
+        /> -->
+    <a
+        href="/"
+        class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-success-500"
+        >
+        <House />
+        <span class="hidden md:inline">
+            Home
+        </span>
+    </a>
+</nav>
+
+<section
+    class:iframe={$ae_loc?.iframe}
+    class="main_content grow px-1 md:px-2 pb-28"
+    >
+    {@render children?.()}
+</section>
+
+</div>

src/routes/hosted_files/+page.svelte

@@ -91,7 +91,7 @@ onMount(() => {
 </script>
 
 
-<section
+<!-- <section
     class="
         ae__hosted_files__av_util
         space-y-4
@@ -105,9 +105,9 @@ onMount(() => {
         max-w-6xl
         overflow-auto
         "
-    >
+    > -->
 
-<div class="border border-gray-200 p-2 rounded-lg">
+<!-- <div class="border border-gray-200 p-2 rounded-lg"> -->
     <h1 class="h1">Æ Hosted Files</h1>
 
     <h2 class="h2">Video Utilities</h2>
@@ -118,6 +118,7 @@ onMount(() => {
         Video Utilities
     </a>
 
+    <hr />
 
     <h2 class="h2">Manage Files</h2>
 
@@ -126,10 +127,10 @@ onMount(() => {
         link_to_id={$ae_loc?.account_id}
         allow_basic={true}
         allow_moderator={true}
-        class_li={''}
+        class_li={'max-h-full'}
     />
 
-</div>
+<!-- </div> -->
 
 
 {#if 1===2}
@@ -195,9 +196,4 @@ onMount(() => {
 
 
 
-</section>
-
-
-<style>
-
-</style>
+<!-- </section> -->

src/routes/hosted_files/video_util/+page.svelte

@@ -117,7 +117,7 @@ onMount(() => {
 </script>
 
 
-<section
+<!-- <section
     class="
         ae__hosted_files__av_util
         space-y-4
@@ -131,9 +131,10 @@ onMount(() => {
         max-w-6xl
         overflow-auto
         "
-    >
+    > -->
+
+<!-- <div class="border border-gray-200 p-2 rounded-lg"> -->
 
-<div class="border border-gray-200 p-2 rounded-lg">
     <h1 class="h1">Clip and Scale Video Files</h1>
     <p>This AV utility will take an mp4 video file and create a clipped mp4 video file. By default, videos will be scaled down to 1920x1080. This process takes at least 30 seconds, but it can easily take a handful of minutes. The scaling option requires that the video be re-encoded. Please be patient while it is processing.</p>
 
@@ -259,7 +260,7 @@ onMount(() => {
         <p>Clip a video file first.</p>
     {/if}
 
-</div>
+<!-- </div> -->
 
 
 {#if 1===2}
@@ -325,9 +326,4 @@ onMount(() => {
 
 
 
-</section>
-
-
-<style>
-
-</style>
+<!-- </section> -->