Files
owncast/web/pages/embed
20b1ac72a4 fix: prevent chat container from overflowing viewport in embedded view (#4713)
* 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>
2026-02-23 15:40:27 -08:00
..
2024-03-06 21:55:49 -08:00