rodrigo/iachat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix(compose-conversation): allow modal to shrink on narrow viewports (#280)

Browse Source 
Wrappers around the conversation/group forms had a hardcoded w-[42rem] without min-w-0, so on viewports below 672px the modal overflowed both sides. The forms themselves also forced w-[42rem] on a flex-col cross axis, which kept overflowing the wrapper after it shrank. Add min-w-0 to the wrappers and let the forms follow the wrapper width via w-full.
This commit is contained in:
Gabriel Jablonski 2026-05-04 22:20:31 -03:00 committed by GitHub
parent 72c9821270
commit 6ef7f29348
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue
View File

@ -383,7 +383,7 @@ useKeyboardEvents(keyboardEvents);
<div <div
v-if="!isGroupMode" v-if="!isGroupMode"
:class="[{ 'mt-2': !viewInModal }, composePopoverClass]" :class="[{ 'mt-2': !viewInModal }, composePopoverClass]"
class="w-[42rem] flex flex-col" class="w-[42rem] flex flex-col min-w-0"
> >
<div <div
v-if="hasGroupInboxes" v-if="hasGroupInboxes"
@ -442,7 +442,7 @@ useKeyboardEvents(keyboardEvents);
<div <div
v-else v-else
:class="[{ 'mt-2': !viewInModal }, composePopoverClass]" :class="[{ 'mt-2': !viewInModal }, composePopoverClass]"
class="w-[42rem] flex flex-col" class="w-[42rem] flex flex-col min-w-0"
> >
<div <div
class="flex gap-1 px-4 pt-3 pb-0 bg-n-alpha-3 border border-b-0 border-n-strong backdrop-blur-[100px] rounded-t-xl" class="flex gap-1 px-4 pt-3 pb-0 bg-n-alpha-3 border border-b-0 border-n-strong backdrop-blur-[100px] rounded-t-xl"

2
app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
View File

@ -335,7 +335,7 @@ useKeyboardEvents({
<template> <template>
<div <div
class="w-[42rem] divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl min-w-0 max-h-[calc(100vh-8rem)]" class="w-full divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl min-w-0 max-h-[calc(100vh-8rem)]"
> >
<div class="flex-1 overflow-y-auto divide-y divide-n-strong"> <div class="flex-1 overflow-y-auto divide-y divide-n-strong">
<ContactSelector <ContactSelector

2
app/javascript/dashboard/components-next/NewConversation/components/ComposeNewGroupForm.vue
View File

@ -162,7 +162,7 @@ defineExpose({ resetForm });
<template> <template>
<div <div
class="w-[42rem] divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl min-w-0 max-h-[calc(100vh-8rem)]" class="w-full divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl min-w-0 max-h-[calc(100vh-8rem)]"
> >
<div class="flex-1 divide-y divide-n-strong overflow-visible"> <div class="flex-1 divide-y divide-n-strong overflow-visible">
<div <div