the absolute positioned mobile action button was attached
to the body causing it to float during scrolling. Now, we wrap
the action buttons inside a relative div so that they are attached
to this div which prevents them from scrolling with page
Fixes#3271
Co-authored-by: Gabe Kangas <gabek@real-ity.com>
* change chat from a sidebar to a column
Using a 2-column layout prevents the chat scrollbar from overlapping the page
scrollbar. Also, it no longer needs to calculate extra padding for elements.
* remove unused Sidebar.tsx
* fix css for chat column
* re-center "Go to last message" button
* main content column always uses maximum height
* lint
* re-hide scrollbars in mainContent on chromium
* fix chat column width when input is over-full
* chat is only fixed-width in desktop
---------
Co-authored-by: janWilejan <>
* add pop out chat button
* add button to close chat popup
* chat is hidden on main interface when a popup chat is open
* NameChangeEvent renames clients with the given id
if you have two or more owncast windows (or pop-out chats) open, changing your
name in 1 client is reflected in all clients.
* replace isChatVisible booleans with chatState enum
* update stories to use ChatState
* fix build tests
---------
Co-authored-by: janWilejan <>
* don't display chat button or modal if isModal is true. dont display the show/hide chat option in the userdropedown for tablet sizes either. tweak chat button styles and make chat button bg the same as the chat component bg color.
* only show chat button if online
* fix(chat): chat should be available through 5min buffer period. Fixes#3044
* fix(test): update mobile test
---------
Co-authored-by: Gabe Kangas <gabek@real-ity.com>
* feat(mobile): refactor mobile chat into modal
- Make page always scrollable
- Move mobile chat into a standalone modal
* fix(test): split out mobile browser test specs
* fix(mobile): force chat button to render on top of footer
* fix: some small updates from review
* fix: hide/show hide chat menu option based on width
* fix: chat button icon getting cut off
* chore(tests): add browser tests for mobile chat modal
* chore(tests): add story for ChatModal component
* fix(test): quiet shellcheck
* fix: remove unused import
* fix(tests): silence storybook linting warning
* fix(ui): reposition chat modal button icon with transform
* quick fix for mobile menu button overlap
* - use new dynamic vh css prop to handle ios safari double scrolling
- only force tabs height when online
* cleanup
* add comment
* - set vars for player container height and status bar height
- use them to calculate mobile top spacing to adjust for tab content positioning
* give main content section a min height, place footer absolutely at bottom; rm all the fixed footer styling
* cleanup; restructure tabbed display logic and css a bit
* Prettified Code!
* cleanup
* fix(story): footer story needs to be wrapped in RecoilRoot if it is to use Recoil
* revert adding footer to mobile about section
* prevent double scrolling
---------
Co-authored-by: gingervitis <gingervitis@users.noreply.github.com>
Co-authored-by: Gabe Kangas <gabek@real-ity.com>
Pranav Joglekar
Gabe Kangas
janWilejan
gingervitis
Nathan