Merge pull request #20024 from Arthurk12/bbb/2.7/small-screens-toolbar

[2.7] fix(presentation): toolbar width on small screens

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 &&
-        numCameras > 0 &&
-        !fullscreenContext
+        layoutType === LAYOUT_TYPE.VIDEO_FOCUS
+        && numCameras > 0
+        && !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 {