matt/flotilla
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Fix sizing for big chat inputs

Browse source
This commit is contained in:
Jon Staab 2025-03-04 12:53:38 -08:00
parent 863d11352f
commit d8a9cc5a7e
3 changed files with 13 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app.css
View file

@ -345,7 +345,7 @@ progress[value]::-webkit-progress-value {
} }
.chat__messages { .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 { .chat__compose {

12
src/app/components/Chat.svelte
View file

@ -70,7 +70,7 @@
let loading = $state(true) let loading = $state(true)
let compose: ChatCompose | undefined = $state() let compose: ChatCompose | undefined = $state()
let parent: TrustedEvent | undefined = $state() let parent: TrustedEvent | undefined = $state()
let parentPreview: HTMLElement | undefined = $state() let chatCompose: HTMLElement | undefined = $state()
let dynamicPadding: HTMLElement | undefined = $state() let dynamicPadding: HTMLElement | undefined = $state()
const elements = $derived.by(() => { const elements = $derived.by(() => {
@ -108,13 +108,13 @@
load({filters: [{kinds: [INBOX_RELAYS], authors: others}]}) load({filters: [{kinds: [INBOX_RELAYS], authors: others}]})
const observer = new ResizeObserver(() => { const observer = new ResizeObserver(() => {
dynamicPadding!.style.minHeight = `${parentPreview!.offsetHeight}px` dynamicPadding!.style.minHeight = `${chatCompose!.offsetHeight}px`
}) })
observer.observe(parentPreview!) observer.observe(chatCompose!)
return () => { return () => {
observer.unobserve(parentPreview!) observer.unobserve(chatCompose!)
} }
}) })
@ -225,8 +225,8 @@
</p> </p>
</div> </div>
<div class="chat__compose bg-base-200"> <div class="chat__compose bg-base-200" bind:this={chatCompose}>
<div bind:this={parentPreview}> <div>
{#if parent} {#if parent}
<ChatComposeParent event={parent} clear={clearParent} verb="Replying to" /> <ChatComposeParent event={parent} clear={clearParent} verb="Replying to" />
{/if} {/if}

12
src/routes/spaces/[relay]/[room]/+page.svelte
View file

@ -134,7 +134,7 @@
let parent: TrustedEvent | undefined = $state() let parent: TrustedEvent | undefined = $state()
let element: HTMLElement | undefined = $state() let element: HTMLElement | undefined = $state()
let newMessages: HTMLElement | undefined = $state() let newMessages: HTMLElement | undefined = $state()
let parentPreview: HTMLElement | undefined = $state() let chatCompose: HTMLElement | undefined = $state()
let dynamicPadding: HTMLElement | undefined = $state() let dynamicPadding: HTMLElement | undefined = $state()
let newMessagesSeen = false let newMessagesSeen = false
let showFixedNewMessages = $state(false) let showFixedNewMessages = $state(false)
@ -212,13 +212,13 @@
})) }))
const observer = new ResizeObserver(() => { const observer = new ResizeObserver(() => {
dynamicPadding!.style.minHeight = `${parentPreview!.offsetHeight}px` dynamicPadding!.style.minHeight = `${chatCompose!.offsetHeight}px`
}) })
observer.observe(parentPreview!) observer.observe(chatCompose!)
return () => { return () => {
observer.unobserve(parentPreview!) observer.unobserve(chatCompose!)
} }
}) })
@ -301,8 +301,8 @@
</p> </p>
</div> </div>
<div class="chat__compose bg-base-200"> <div class="chat__compose bg-base-200" bind:this={chatCompose}>
<div bind:this={parentPreview}> <div>
{#if parent} {#if parent}
<ChannelComposeParent event={parent} clear={clearParent} verb="Replying to" /> <ChannelComposeParent event={parent} clear={clearParent} verb="Replying to" />
{/if} {/if}