From 23c84c81be796a741da5d61d41760b1efdd13840 Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
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 <owen@grimoire.ca>
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 id="app"> 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%
   </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?.()}
-- 
cgit v1.2.3

