From 23c84c81be796a741da5d61d41760b1efdd13840 Mon Sep 17 00:00:00 2001 From: Kit La Touche Date: Mon, 4 Nov 2024 14:08:01 -0500 Subject: Fix width and scrolling This is some jinbodger CSS. I really need to do a unified-CSS sweep. I start to see why per-component CSS is bad, too; there are so many long-distance interactions needed! --- ui/lib/components/Message.svelte | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'ui/lib/components/Message.svelte') diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte index f0e7045..ea6e304 100644 --- a/ui/lib/components/Message.svelte +++ b/ui/lib/components/Message.svelte @@ -25,6 +25,14 @@ .message:hover .timestamp { 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); + } + } .message-body:empty:after { content: '.'; visibility: hidden; -- cgit v1.2.3 From 0f9a21934bfee61345894a38e89d7228cf1c07f1 Mon Sep 17 00:00:00 2001 From: Owen Jacobson Date: Tue, 5 Nov 2024 19:02:23 -0500 Subject: File off some rough spots in the DOM. * We had an unused layer of divs in the main UI. * The
div was superfluous with the body-level div in app.html. * Some formatting changes in one component?? Weird. --- ui/app.html | 2 +- ui/lib/components/Message.svelte | 12 ++++++------ ui/routes/+layout.svelte | 42 ++++++++++++++-------------------------- 3 files changed, 22 insertions(+), 34 deletions(-) (limited to 'ui/lib/components/Message.svelte') 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% -
%sveltekit.body%
+
%sveltekit.body%
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(); -
-
- - - - - understory - - {#if $currentUser} - - {/if} - - -
- - {@render children?.()} -
- - + + + + + understory + + {#if $currentUser} + + {/if} + + + +{@render children?.()} -- cgit v1.2.3