LogalDeveloper/owncast
0
Fork 0
Code Activity

fix: prevent floating mobile action menu button (#3383)

Browse Source 
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>
This commit is contained in:
Pranav Joglekar
2023-10-25 10:28:36 +05:30
committed by GitHub
parent e455d9332c
commit b8ffe5be16
2 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/components/ui/Content/ActionButtons.tsx
View File

@@ -49,7 +49,7 @@ const ActionButtons: FC<ActionButtonProps> = ({
)); ));
return ( return (
<> <div className={styles.actionButtonsContainer}>
<div className={styles.desktopActionButtons}> <div className={styles.desktopActionButtons}>
<ActionButtonRow> <ActionButtonRow>
{externalActionButtons} {externalActionButtons}
@@ -82,7 +82,7 @@ const ActionButtons: FC<ActionButtonProps> = ({
/> />
)} )}
</div> </div>
</> </div>
); );
}; };

7
web/components/ui/Content/Content.module.scss
View File

@@ -58,6 +58,13 @@
color: var(--theme-color-palette-4); color: var(--theme-color-palette-4);
} }
.actionButtonsContainer {
display: flex;
height: 100%;
width: 100%;
position: relative;
}
.mobileActionButtons { .mobileActionButtons {
display: none; display: none;