diff options
| author | Owen Jacobson <owen@grimoire.ca> | 2024-11-05 19:02:23 -0500 |
|---|---|---|
| committer | Owen Jacobson <owen@grimoire.ca> | 2024-11-05 19:02:23 -0500 |
| commit | 0f9a21934bfee61345894a38e89d7228cf1c07f1 (patch) | |
| tree | 408ae1e1d92ea76b2cda39239a0c46b98e22fa2a | |
| parent | 2f67205b83009c874f4254a4789b1945668b3056 (diff) | |
File off some rough spots in the DOM.
* We had an unused layer of divs in the main UI.
* The <div id="app"> div was superfluous with the body-level div in app.html.
* Some formatting changes in one component?? Weird.
| -rw-r--r-- | ui/app.html | 2 | ||||
| -rw-r--r-- | ui/lib/components/Message.svelte | 12 | ||||
| -rw-r--r-- | ui/routes/+layout.svelte | 42 |
3 files changed, 22 insertions, 34 deletions
diff --git a/ui/app.html b/ui/app.html index 51a6780..10525fe 100644 --- a/ui/app.html +++ b/ui/app.html @@ -7,6 +7,6 @@ %sveltekit.head% </head> <body data-sveltekit-preload-data="hover" data-theme="skeleton"> - <div style="display: contents">%sveltekit.body%</div> + <div class="m-0 p-0 h-vh w-full">%sveltekit.body%</div> </body> </html> diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte index ea6e304..68c5c91 100644 --- a/ui/lib/components/Message.svelte +++ b/ui/lib/components/Message.svelte @@ -26,12 +26,12 @@ display: flex; } .message-body { - overflow: auto; - max-width: 80vw; - @media (width > 640px) { - /* 21rem is width of the nav bar in full-screen mode. */ - max-width: calc(90vw - 21rem); - } + overflow: auto; + max-width: 80vw; + @media (width > 640px) { + /* 21rem is width of the nav bar in full-screen mode. */ + max-width: calc(90vw - 21rem); + } } .message-body:empty:after { content: '.'; diff --git a/ui/routes/+layout.svelte b/ui/routes/+layout.svelte index d786389..30634e9 100644 --- a/ui/routes/+layout.svelte +++ b/ui/routes/+layout.svelte @@ -20,30 +20,18 @@ let { children } = $props(); </script> -<div id="app" class="m-0 p-0 h-vh w-full"> - <div class="w-full"> - <AppBar class="app-bar"> - <svelte:fragment slot="lead"> - <button onclick={toggleMenu} class="cursor-pointer"> - <img class="w-8 h-8" alt="logo" src={logo} /> - </button> - </svelte:fragment> - <a href="/">understory</a> - <svelte:fragment slot="trail"> - {#if $currentUser} - <CurrentUser /> - {/if} - </svelte:fragment> - </AppBar> - </div> - - {@render children?.()} -</div> - -<style> - #app { - margin: 0; - height: 100vh; - width: 100%; - } -</style> +<AppBar class="app-bar"> + <svelte:fragment slot="lead"> + <button onclick={toggleMenu} class="cursor-pointer"> + <img class="w-8 h-8" alt="logo" src={logo} /> + </button> + </svelte:fragment> + <a href="/">understory</a> + <svelte:fragment slot="trail"> + {#if $currentUser} + <CurrentUser /> + {/if} + </svelte:fragment> +</AppBar> + +{@render children?.()} |