HTML5 - fixed fixed closed-caption display

bigbluebutton-html5/imports/ui/components/app/component.jsx

@@ -75,8 +75,20 @@ class App extends Component {
     if (!sidebar) return null;
 
     return (
-      <div className={styles.sidebar}>
+      <aside className={styles.sidebar}>
         {sidebar}
+      </aside>
+    );
+  }
+
+  renderClosedCaption() {
+    const { closedCaption } = this.props;
+
+    if (!closedCaption) return null;
+
+    return (
+      <div className={styles.closedCaptionBox}>
+        {closedCaption}
       </div>
     );
   }
@@ -128,7 +140,7 @@ class App extends Component {
         role="region"
         aria-label={intl.formatMessage(intlMessages.mediaLabel)}>
           {media}
-          {this.renderSidebar()}
+          {this.renderClosedCaption()}
       </section>
     );
   }
@@ -163,6 +175,7 @@ class App extends Component {
             {this.renderMedia()}
             {this.renderActionsBar()}
           </div>
+          {this.renderSidebar()}
         </section>
         <ModalContainer />
         <AudioContainer />

bigbluebutton-html5/imports/ui/components/app/container.jsx

@@ -73,7 +73,8 @@ export default withRouter(injectIntl(withModalMounter(createContainer((
     });
 
     return {
-      sidebar: getCaptionsStatus() ? <ClosedCaptionsContainer /> : null,
+      closedCaption: getCaptionsStatus() ? <ClosedCaptionsContainer /> : null,
+      sidebar: null,
       fontSize: getFontSize(),
     };
   }, AppContainer))));

bigbluebutton-html5/imports/ui/components/app/styles.scss

@@ -137,6 +137,16 @@ $bars-padding: $lg-padding-x - .45rem; // -.45 so user-list and chat title is al
   }
 }
 
+.sidebar {
+  @extend %full-page;
+  z-index: 4;
+
+  @include mq($medium-up) {
+    flex: 0 15vw;
+    order: 2;
+  }
+}
+
 .media {
   @extend %full-page;
   flex: 1 100%;
@@ -152,15 +162,27 @@ $bars-padding: $lg-padding-x - .45rem; // -.45 so user-list and chat title is al
 
   @include mq($portrait) {
     flex-direction: column;
+
+    @include mq($small-up) {
+      min-height: 60%;
+    }
   }
 }
 
-.sidebar {
+.closedCaptionBox {
   position: relative;
+  flex-basis: 12%;
 
-  @include mq($medium-up) {
-    max-height: 100%;
-    flex: 0 15vw;
+  @include mq($portrait) {
+    min-height: 35%;
+
+    @include mq($small-up) {
+      flex-basis: 10%;
+    }
+
+    @include mq($medium-only) {
+      margin-top: 3%;
+    }
   }
 }
 

bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.scss

@@ -20,6 +20,13 @@ $controls-background: #F0F2F6 !default;
   margin-top: 2%;
   margin-bottom: 2%;
 
+  @include mq($portrait) {
+    @include mq($small-only) {
+      margin-top: 5%;
+      margin-bottom: 5%;
+    }
+  }
+
   button,
   select,
   > div {