Skip to content

Keep chat messages inside the chat container #565

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lukepolo merged 1 commit into from
Aug 21, 2026
Merged

Keep chat messages inside the chat container #565

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions components/chat/ChatLobby.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ import Empty from "~/components/ui/empty/Empty.vue";
:group-key="isMerged ? viewFilter : ''"
variant="global"
:is-minimized="isMinimized"
class="flex-1 overflow-y-auto max-h-96"
class="min-h-0 flex-1 overflow-y-auto"
:last-read-count="lastReadMessageCount"
@bottom-state-change="handleBottomStateChange"
/>
Expand Down Expand Up @@ -294,19 +294,24 @@ import Empty from "~/components/ui/empty/Empty.vue";
<!-- First message in an empty room dissolves the empty copy under the
arriving list instead of trading them on a frame. Both branches
fill the same column slot, so a plain crossfade is right. -->
<FadeSwap class="flex-1 min-h-0">
<!-- A flex column, and the list below is a flex item rather than
h-full: the card sizes itself from min-height/max-height, so its
height is never definite and a percentage height would fall back to
the content's own -- which is how the messages used to run out the
bottom of the card. -->
<FadeSwap class="flex min-h-0 flex-1 flex-col">
<ChatMessages
v-if="messages.length"
key="messages"
ref="chatMessagesRef"
:messages="messages"
:group-key="isMerged ? viewFilter : ''"
variant="embedded"
class="h-full overflow-y-auto"
class="min-h-0 flex-1 overflow-y-auto"
:last-read-count="tracksReadPosition ? lastReadMessageCount : 0"
@bottom-state-change="handleBottomStateChange"
/>
<Empty v-else key="empty" class="h-full text-muted-foreground">
<Empty v-else key="empty" class="min-h-0 flex-1 text-muted-foreground">
<div class="space-y-1">
<p class="text-sm font-medium">
{{ $t("chat.no_messages_yet", "No messages yet") }}
Expand Down
4 changes: 2 additions & 2 deletions components/chat/ChatMessages.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
ref="chatMessages"
:class="
variant === 'global'
? 'flex-1 overflow-y-auto p-3'
: 'flex-1 overflow-y-auto max-h-screen'
? 'min-h-0 flex-1 overflow-y-auto p-3'
: 'min-h-0 flex-1 overflow-y-auto'
"
>
<!-- Changing the filter rewrites nearly every row, and animating those in
Expand Down