Overflow and Height Issues
So I am trying to make a chat UI for a website
And issue I ran into is overflow, I made the chat section a specific height and made it scrollable so the chat doesn't take up the entire page and I added Inputs below it
The input does not take up the remainder of the parents height despite me making the height "h-full" (I am using Tailwind CSS). And after experimenting, I found it's because of the chat container. I calculated the height like this "max-h-calc[calc(100vh-26rem)]"
And when the user uploads an attachment, and the attachment is displayed it creates overflow.
My goal is for the chat section to resize automatically and for there to be no overflow on this page
This is the replit
https://replit.com/@demetrikameka18/Environment-Code?v=1
You can run it and see the issue I am taking about, when ran redirect yourself to "/tickets/1"
demetrikameka18
replit
Environment Code
Run SvelteKit (server) code live in your browser. Write and run code in 50+ languages online with Replit, a powerful IDE, compiler, & interpreter.
6 Replies
the code for the page is in
src/routes/tickets/[id]/+page.svelteI can't see how to run it but
I have skill issues xD
I believe you would have to fork it to run it on replit
Also, for some odd reason that happens to the +page and +layout files
(Probably because the "+" is in the file name loll)
I renamed them to just "page.svelte", so you should be able to view the file now
so before you run it, rename it back to +page
Ah that requires others to have an account though. Have you tried out https://sveltelab.dev ? Let's you share and any one can run it
SvelteLab
SvelteLab
A REPL for SvelteKit projects: quickly spin up a SvelteKit project and share it with the world.
Powered by stackblitz it's nice