diff --git a/bigbluebutton-html5/imports/ui/components/presentation/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/component.jsx index 7727458607..2c003e1fc3 100755 --- a/bigbluebutton-html5/imports/ui/components/presentation/component.jsx +++ b/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)} diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx index 7585e16890..db256859cc 100755 --- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx @@ -319,6 +319,7 @@ class PresentationToolbar extends PureComponent { return ( {this.renderAriaDescs()} diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.js b/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.js index 21b52c0767..27882f37f2 100644 --- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.js +++ b/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 {