fix(presentation): toolbar width on small screens

Forces the toolbar width to be the maximum available width, which is
the width of the media area, on mobile devices. Also allow the toolbar to
overflow with an horizontal scroll when the available width is not enough
to display all of its contents.

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

@@ -792,17 +792,21 @@ class Presentation extends PureComponent {
     const { presentationToolbarMinWidth } = DEFAULT_VALUES;
 
     const isLargePresentation =
-      (svgWidth > presentationToolbarMinWidth || isMobile) &&
+      (svgWidth > presentationToolbarMinWidth) &&
       !(
-        layoutType === LAYOUT_TYPE.VIDEO_FOCUS &&
+        layoutType === LAYOUT_TYPE.VIDEO_FOCUS
-        numCameras > 0 &&
+        && numCameras > 0
-        !fullscreenContext
+        && !fullscreenContext
       );
 
     const containerWidth = isLargePresentation
       ? svgWidth
       : presentationToolbarMinWidth;
 
+    const mobileAwareContainerWidth = isMobile
+      ? presentationBounds.width
+      : containerWidth;
+
     const slideContent = currentSlide?.content
       ? `${intl.formatMessage(intlMessages.slideContentStart)}
     ${currentSlide.content}
@@ -901,7 +905,7 @@ class Presentation extends PureComponent {
                     this.refPresentationToolbar = ref;
                   }}
                   style={{
-                    width: containerWidth,
+                    width: mobileAwareContainerWidth,
                   }}
                 >
                   {this.renderPresentationToolbar(svgWidth)}

bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx

@@ -319,6 +319,7 @@ class PresentationToolbar extends PureComponent {
     return (
       <Styled.PresentationToolbarWrapper
         id="presentationToolbarWrapper"
+        isMobile={isMobile}
       >
         {this.renderAriaDescs()}
         <Styled.QuickPollButtonWrapper>

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

@@ -25,12 +25,15 @@ const PresentationToolbarWrapper = styled.div`
   z-index: 1;
   background-color: ${colorOffWhite};
   border-top: 1px solid ${colorBlueLightest};
-  min-width: fit-content;
   width: 100%;
   bottom: 0px;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   padding: 2px;
+  ${({ isMobile }) => (isMobile
+    ? 'overflow: auto;'
+    : 'min-width: fit-content;'
+  )};
 
   select {
     &:-moz-focusring {