* 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>
* feat(chat): require authentication to participate in chat
* fix: it's pretty much impossible to bypass the auth requirement, addressing review feedback anyway
* feat(chat): render chat text input as disabled if chat auth is required
* Commit updated API documentation
---------
Co-authored-by: Owncast <owncast@owncast.online>
Adds a 'readonly' prop to ChatContainer that conditionally applies a
'readonly-chat' CSS class to the chat container element. This allows
streamers using OBS to target the readonly chat embed with custom CSS.
The readonly embed at /embed/chat/readonly now passes readonly={true}
to ChatContainer, which adds the class to the container div.
Fixes#4266
Co-authored-by: Gabe Kangas <gabek@real-ity.com>
* WIP
* feat(web): add new offline embed view. First step of #2917
* feat(web): support remote fediverse follow flow from embed
* feat(chore): add back offline video embed browser test
* Fix embedded status bar being cut off
This should resolve https://github.com/owncast/owncast/issues/3210.
As recommended in the discussion, flexbox was the way to solve this issue.
The main thing that needed to be addressed though was not applying too many constraints on the OwncastPlayer component just because it was embedded.
By removing the embedded constraints, styling appears to be working as expected.
I'll attach screenshots to the pull request.
* Fix eslint error
