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

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>

web/components/ui/Content/ActionButtons.tsx

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

web/components/ui/Content/Content.module.scss

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