arithefirst/svchat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Horizontal overflow issue

Browse Source
This commit is contained in:
April Hall 2025-02-07 16:22:01 -05:00
parent 6602fbdd28
commit 2b6be9e1ae
Signed by: arithefirst
GPG Key ID: 4508A15C4DB91C5B
3 changed files with 34 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

9
src/lib/components/mainLayout.svelte
View File

@ -20,11 +20,13 @@
children: Snippet; children: Snippet;
} }
let sidebarWidth = $state(0);
const { data, channels, children }: Props = $props(); const { data, channels, children }: Props = $props();
</script> </script>
<div class="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]"> <div class="w-screen">
<div class="hidden border-r bg-muted/40 md:block"> <div class="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
<div class="hidden border-r bg-muted/40 md:block" bind:clientWidth={sidebarWidth}>
<div class="flex h-full max-h-screen flex-col gap-2"> <div class="flex h-full max-h-screen flex-col gap-2">
<div class="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6"> <div class="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
<a href="/" class="flex items-center gap-2 font-semibold"> <a href="/" class="flex items-center gap-2 font-semibold">
@ -45,7 +47,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="max-h-screen p-2"> <div class="max-h-screen p-2" style={`max-width: calc(100vw - ${sidebarWidth}px)`}>
{@render children()} {@render children()}
</div> </div>
</div>
</div> </div>

12
src/lib/components/message.svelte
View File

@ -9,8 +9,14 @@
<img src={imageSrc} alt="Profile image for {user}" /> <img src={imageSrc} alt="Profile image for {user}" />
</div> </div>
</div> </div>
<div class="flex-col"> <div class="w-full">
<p class="font-bold">{user}</p> <p class="inline-size-full break-words font-bold">{user}</p>
<p class="flex-wrap">{message}</p> <p class="inline-size-full break-words">{message}</p>
</div> </div>
</div> </div>
<style>
.inline-size-full {
inline-size: calc(100% - 64px);
}
</style>