Add id to div that contains all chat messages and move size definition to that container
Opened this issue · 2 comments
The 650px/700px width of the chat messages is defined in each individual chat message but it'd be better defined in one place, the container.
Currently
<!-- Chat messages container -->
<div class="flex size-full flex-col overflow-auto border-b">
<!-- Individual chat message -->
<div class="relative flex w-full flex-col p-6 **sm:w-[550px] sm:px-0 md:w-[650px] lg:w-[650px] xl:w-[700px]**">
Desired
<!-- Chat messages container -->
<div class="flex size-full flex-col overflow-auto border-b **sm:w-[550px] sm:px-0 md:w-[650px] lg:w-[650px] xl:w-[700px]**">
<!-- Individual chat message -->
<div class="relative flex w-full flex-col p-6">
Super desired
<!-- Chat messages container -->
<div **id="chat-messages-container"** class="flex size-full flex-col overflow-auto border-b">
<!-- Individual chat message -->
<div class="relative flex w-full flex-col p-6">
Where #chat-messages-container has the size definitions. I know we hardly create ids/classes in Tailwind but I see a .prose class so hoping we can similarly create this.
Here's a video of Desired
https://jam.dev/c/8d70be10-1bad-40a3-a6fc-bf84e93d84e3
And here's a video of why I want Super Desired. So I can easily override the width of the chat messages - more real estate is a better experience for me and helps a ton with viewing code. If enough people like this view I can create an issue to make the width settable in UI.
I could make this change but it likely won't be top of mind since I wrote that hacky selector for Stylebot, so I have my super desired view haha
Also no one look at my chat title on second video 💀