From d8a9cc5a7edd5d2387ebd195252adc6050f3a74d Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Tue, 4 Mar 2025 12:53:38 -0800
Subject: [PATCH] Fix sizing for big chat inputs

---
 src/app.css                                   |  2 +-
 src/app/components/Chat.svelte                | 12 ++++++------
 src/routes/spaces/[relay]/[room]/+page.svelte | 12 ++++++------
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/app.css b/src/app.css
index 43a36fa..db41ba7 100644
--- a/src/app.css
+++ b/src/app.css
@@ -345,7 +345,7 @@ progress[value]::-webkit-progress-value {
 }
 
 .chat__messages {
-  @apply saib cw fixed top-12 flex h-[calc(100%-10rem)] flex-col-reverse overflow-y-auto overflow-x-hidden md:h-[calc(100%-6rem)];
+  @apply saib cw fixed top-12 flex h-[calc(100%-6rem)] flex-col-reverse overflow-y-auto overflow-x-hidden md:h-[calc(100%-2rem)];
 }
 
 .chat__compose {
diff --git a/src/app/components/Chat.svelte b/src/app/components/Chat.svelte
index 09accf0..56cf933 100644
--- a/src/app/components/Chat.svelte
+++ b/src/app/components/Chat.svelte
@@ -70,7 +70,7 @@
   let loading = $state(true)
   let compose: ChatCompose | undefined = $state()
   let parent: TrustedEvent | undefined = $state()
-  let parentPreview: HTMLElement | undefined = $state()
+  let chatCompose: HTMLElement | undefined = $state()
   let dynamicPadding: HTMLElement | undefined = $state()
 
   const elements = $derived.by(() => {
@@ -108,13 +108,13 @@
     load({filters: [{kinds: [INBOX_RELAYS], authors: others}]})
 
     const observer = new ResizeObserver(() => {
-      dynamicPadding!.style.minHeight = `${parentPreview!.offsetHeight}px`
+      dynamicPadding!.style.minHeight = `${chatCompose!.offsetHeight}px`
     })
 
-    observer.observe(parentPreview!)
+    observer.observe(chatCompose!)
 
     return () => {
-      observer.unobserve(parentPreview!)
+      observer.unobserve(chatCompose!)
     }
   })
 
@@ -225,8 +225,8 @@
   </p>
 </div>
 
-<div class="chat__compose bg-base-200">
-  <div bind:this={parentPreview}>
+<div class="chat__compose bg-base-200" bind:this={chatCompose}>
+  <div>
     {#if parent}
       <ChatComposeParent event={parent} clear={clearParent} verb="Replying to" />
     {/if}
diff --git a/src/routes/spaces/[relay]/[room]/+page.svelte b/src/routes/spaces/[relay]/[room]/+page.svelte
index 06ea5cf..85d4024 100644
--- a/src/routes/spaces/[relay]/[room]/+page.svelte
+++ b/src/routes/spaces/[relay]/[room]/+page.svelte
@@ -134,7 +134,7 @@
   let parent: TrustedEvent | undefined = $state()
   let element: HTMLElement | undefined = $state()
   let newMessages: HTMLElement | undefined = $state()
-  let parentPreview: HTMLElement | undefined = $state()
+  let chatCompose: HTMLElement | undefined = $state()
   let dynamicPadding: HTMLElement | undefined = $state()
   let newMessagesSeen = false
   let showFixedNewMessages = $state(false)
@@ -212,13 +212,13 @@
     }))
 
     const observer = new ResizeObserver(() => {
-      dynamicPadding!.style.minHeight = `${parentPreview!.offsetHeight}px`
+      dynamicPadding!.style.minHeight = `${chatCompose!.offsetHeight}px`
     })
 
-    observer.observe(parentPreview!)
+    observer.observe(chatCompose!)
 
     return () => {
-      observer.unobserve(parentPreview!)
+      observer.unobserve(chatCompose!)
     }
   })
 
@@ -301,8 +301,8 @@
   </p>
 </div>
 
-<div class="chat__compose bg-base-200">
-  <div bind:this={parentPreview}>
+<div class="chat__compose bg-base-200" bind:this={chatCompose}>
+  <div>
     {#if parent}
       <ChannelComposeParent event={parent} clear={clearParent} verb="Replying to" />
     {/if}