Merge pull request #8323 from KDSBrowne/issue-8290

Fix restore presentation button overlap (Mobile - Presenter)

bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx

@@ -10,7 +10,6 @@ import CaptionsButtonContainer from '/imports/ui/components/actions-bar/captions
 import PresentationOptionsContainer from './presentation-options/component';
 
 class ActionsBar extends PureComponent {
-
   render() {
     const {
       amIPresenter,
@@ -43,6 +42,7 @@ class ActionsBar extends PureComponent {
 
     actionBarClasses[styles.centerWithActions] = amIPresenter;
     actionBarClasses[styles.center] = true;
+    actionBarClasses[styles.mobileLayoutSwapped] = isLayoutSwapped && amIPresenter;
 
     return (
       <div className={styles.actionsbar}>
@@ -78,11 +78,7 @@ class ActionsBar extends PureComponent {
             : null
           }
         </div>
-        <div
-          className={
-            amIPresenter ? cx(styles.centerWithActions, actionBarClasses) : styles.center
-          }
-        >
+        <div className={cx(actionBarClasses)}>
           <AudioControlsContainer />
           {enableVideo
             ? (

bigbluebutton-html5/imports/ui/components/actions-bar/styles.scss

 @import "/imports/ui/stylesheets/variables/_all";
 
+:root {
+  --mobile-swap-offset: 3.5rem;
+}
+
 .actionsbar,
 .center,
 .right {
@@ -58,6 +62,17 @@
   }
 }
 
+.mobileLayoutSwapped {
+  @include mq($xsmall-only) {
+    padding-right: var(--mobile-swap-offset);
+
+    [dir="rtl"] & {
+      padding-right: 0;
+      padding-left: var(--mobile-swap-offset);
+    }
+  }
+}
+
 .button {
   span:first-child {
     box-shadow: 0 2px 5px 0 rgb(0, 0, 0);