LogalDeveloper/owncast
0
Fork 0
Code Activity

fix: prevent chat container from overflowing viewport in embedded view (#4713)

Browse Source 
* fix: prevent chat container from overflowing viewport in embedded view

Add max-height: 100vh to .chatContainer to prevent the chat from getting
cut off vertically when used in the /embed/chat/readwrite view.

Fixes #4492

* fix: use flexbox layout for readwrite embed to prevent overflow in short viewports

Changes the readwrite embed to use a flexbox container with height: 100dvh
instead of a fixed 92vh height on the chat. This ensures the header takes
its natural height and the chat fills the remaining space without overflow.

- Add .embed-container with flex column layout and 100dvh height
- Set #chat-container to flex: 1 with min-height: 0 to fill remaining space
- Change ChatContainer height prop from "92vh" to "100%"

This addresses maintainer feedback that the chat was still getting cut off
in shorter viewports.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor: remove max-height from global ChatContainer styles

Address Copilot review feedback: the max-height: 100vh on the global
.chatContainer class is no longer needed since the embed-container
flexbox layout properly constrains the height for the embedded chat.
Removing this avoids potential unintended side effects on other
ChatContainer instances (desktop sidebar, chat modal).

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
John Costa
2026-02-23 15:40:27 -08:00
committed by GitHub
co-authored by Claude Opus 4.5
parent 49ec2a5c2e
commit 20b1ac72a4
1 changed files with 47 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/pages/embed/chat/readwrite/index.tsx
+47 -23
View File
@@ -62,6 +62,28 @@ export default function ReadWriteChatEmbed() {
.body-background {
background: var(--theme-color-components-chat-background);
}
.embed-container {
display: flex;
flex-direction: column;
height: 100vh;
height: 100dvh;
overflow: hidden;
}
.embed-container > #chat-container {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
}
.embed-container #chat-container #chat-container {
flex: 1 1 0;
min-height: 0;
}
.embed-container #chat-container #virtuoso {
flex: 1;
min-height: 0;
height: auto !important;
}
`}
</style>
<ErrorBoundary
@@ -70,29 +92,31 @@ export default function ReadWriteChatEmbed() {
<ComponentError componentName="ReadWriteChatEmbed" message={error.message} />
)}
>
<ClientConfigStore />
<Theme />
<Header
name={headerText}
chatAvailable
chatDisabled={chatDisabled}
online={videoAvailable}
/>
{currentUser && (
<div id="chat-container">
<ChatContainer
messages={messages}
usernameToHighlight={currentUser.displayName}
chatUserId={currentUser.id}
isModerator={currentUser.isModerator}
showInput
height="92vh"
chatAvailable={isChatAvailable}
inputEnabled={chatInputEnabled}
inputDisabledPlaceholder={chatInputDisabledMessage}
/>
</div>
)}
<div className="embed-container">
<ClientConfigStore />
<Theme />
<Header
name={headerText}
chatAvailable
chatDisabled={chatDisabled}
online={videoAvailable}
/>
{currentUser && (
<div id="chat-container">
<ChatContainer
messages={messages}
usernameToHighlight={currentUser.displayName}
chatUserId={currentUser.id}
isModerator={currentUser.isModerator}
showInput
height="100%"
chatAvailable={isChatAvailable}
inputEnabled={chatInputEnabled}
inputDisabledPlaceholder={chatInputDisabledMessage}
/>
</div>
)}
</div>
</ErrorBoundary>
</div>
);