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 {
@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 {

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

@ -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}

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

@ -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}