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 {