diff --git a/react/features/base/responsive-ui/actions.ts b/react/features/base/responsive-ui/actions.ts
index f33cfaa466..1763fd49f2 100644
--- a/react/features/base/responsive-ui/actions.ts
+++ b/react/features/base/responsive-ui/actions.ts
@@ -59,9 +59,10 @@ export function clientResized(clientWidth: number, clientHeight: number) {
             dispatch({
                 type: CLIENT_RESIZED,
                 clientHeight,
-                clientWidth: availableWidth
+                clientWidth,
+                videoSpaceWidth: availableWidth
             });
-            dispatch(setAspectRatio(clientWidth, clientHeight));
+            dispatch(setAspectRatio(availableWidth, clientHeight));
         });
     };
 }
diff --git a/react/features/base/responsive-ui/middleware.web.ts b/react/features/base/responsive-ui/middleware.web.ts
index f4130b54af..32df76caed 100644
--- a/react/features/base/responsive-ui/middleware.web.ts
+++ b/react/features/base/responsive-ui/middleware.web.ts
@@ -29,9 +29,9 @@ MiddlewareRegistry.register(store => next => action => {
         break;
 
     case CONFERENCE_JOINED: {
-        const { clientHeight = 0, clientWidth = 0 } = store.getState()['features/base/responsive-ui'];
+        const { clientHeight = 0, clientWidth = 0, videoSpaceWidth = 0 } = store.getState()['features/base/responsive-ui'];
 
-        if (!clientHeight && !clientWidth) {
+        if (!clientHeight && !clientWidth && !videoSpaceWidth) {
             const {
                 innerHeight,
                 innerWidth
diff --git a/react/features/base/responsive-ui/reducer.ts b/react/features/base/responsive-ui/reducer.ts
index 483803c9a1..d1d13ec02f 100644
--- a/react/features/base/responsive-ui/reducer.ts
+++ b/react/features/base/responsive-ui/reducer.ts
@@ -25,7 +25,8 @@ const DEFAULT_STATE = {
     clientWidth: innerWidth,
     isNarrowLayout: false,
     reducedUI: false,
-    contextMenuOpened: false
+    contextMenuOpened: false,
+    videoSpaceWidth: innerWidth
 };
 
 export interface IResponsiveUIState {
@@ -41,6 +42,7 @@ export interface IResponsiveUIState {
         right: number;
         top: number;
     };
+    videoSpaceWidth: number;
 }
 
 ReducerRegistry.register<IResponsiveUIState>('features/base/responsive-ui',
@@ -50,7 +52,8 @@ ReducerRegistry.register<IResponsiveUIState>('features/base/responsive-ui',
         return {
             ...state,
             clientWidth: action.clientWidth,
-            clientHeight: action.clientHeight
+            clientHeight: action.clientHeight,
+            videoSpaceWidth: action.videoSpaceWidth
         };
     }
 
diff --git a/react/features/base/ui/components/web/DialogWithTabs.tsx b/react/features/base/ui/components/web/DialogWithTabs.tsx
index 3bde75d5c1..bdbf5e227b 100644
--- a/react/features/base/ui/components/web/DialogWithTabs.tsx
+++ b/react/features/base/ui/components/web/DialogWithTabs.tsx
@@ -173,16 +173,16 @@ const DialogWithTabs = ({
     const [ selectedTab, setSelectedTab ] = useState<string | undefined>(defaultTab ?? tabs[0].name);
     const [ userSelected, setUserSelected ] = useState(false);
     const [ tabStates, setTabStates ] = useState(tabs.map(tab => tab.props));
-    const clientWidth = useSelector((state: IReduxState) => state['features/base/responsive-ui'].clientWidth);
+    const videoSpaceWidth = useSelector((state: IReduxState) => state['features/base/responsive-ui'].videoSpaceWidth);
     const [ isMobile, setIsMobile ] = useState(false);
 
     useEffect(() => {
-        if (clientWidth <= MOBILE_BREAKPOINT) {
+        if (videoSpaceWidth <= MOBILE_BREAKPOINT) {
             !isMobile && setIsMobile(true);
         } else {
             isMobile && setIsMobile(false);
         }
-    }, [ clientWidth, isMobile ]);
+    }, [ videoSpaceWidth, isMobile ]);
 
     useEffect(() => {
         if (isMobile) {
diff --git a/react/features/filmstrip/actions.web.ts b/react/features/filmstrip/actions.web.ts
index 15f59311cb..a5136c71b4 100644
--- a/react/features/filmstrip/actions.web.ts
+++ b/react/features/filmstrip/actions.web.ts
@@ -83,7 +83,7 @@ export function resizeFilmStrip(width: number) {
 export function setTileViewDimensions() {
     return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
-        const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
+        const { clientHeight, videoSpaceWidth } = state['features/base/responsive-ui'];
         const {
             disableResponsiveTiles,
             disableTileEnlargement,
@@ -101,7 +101,7 @@ export function setTileViewDimensions() {
         } = disableResponsiveTiles
             ? calculateNonResponsiveTileViewDimensions(state)
             : calculateResponsiveTileViewDimensions({
-                clientWidth,
+                clientWidth: videoSpaceWidth,
                 clientHeight,
                 disableTileEnlargement,
                 maxColumns,
@@ -112,7 +112,7 @@ export function setTileViewDimensions() {
         const availableHeight = clientHeight - TILE_VIEW_GRID_VERTICAL_MARGIN;
         const hasScroll = availableHeight < thumbnailsTotalHeight;
         const filmstripWidth
-            = Math.min(clientWidth - TILE_VIEW_GRID_HORIZONTAL_MARGIN,
+            = Math.min(videoSpaceWidth - TILE_VIEW_GRID_HORIZONTAL_MARGIN,
                 (columns ?? 1) * (TILE_HORIZONTAL_MARGIN + (width ?? 0)))
                 + (hasScroll ? SCROLL_SIZE : 0);
         const filmstripHeight = Math.min(availableHeight, thumbnailsTotalHeight);
@@ -144,7 +144,7 @@ export function setTileViewDimensions() {
 export function setVerticalViewDimensions() {
     return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
-        const { clientHeight = 0, clientWidth = 0 } = state['features/base/responsive-ui'];
+        const { clientHeight = 0, videoSpaceWidth = 0 } = state['features/base/responsive-ui'];
         const { width: filmstripWidth } = state['features/filmstrip'];
         const disableSelfView = getHideSelfView(state);
         const resizableFilmstrip = isFilmstripResizable(state);
@@ -207,7 +207,7 @@ export function setVerticalViewDimensions() {
                 width: widthOfFilmstrip
             };
         } else {
-            thumbnails = calculateThumbnailSizeForVerticalView(clientWidth, filmstripWidth.current ?? 0,
+            thumbnails = calculateThumbnailSizeForVerticalView(videoSpaceWidth, filmstripWidth.current ?? 0,
                 resizableFilmstrip);
 
             remoteVideosContainerWidth
@@ -254,11 +254,11 @@ export function setVerticalViewDimensions() {
 export function setHorizontalViewDimensions() {
     return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
-        const { clientHeight = 0, clientWidth = 0 } = state['features/base/responsive-ui'];
+        const { clientHeight = 0, videoSpaceWidth = 0 } = state['features/base/responsive-ui'];
         const disableSelfView = getHideSelfView(state);
         const thumbnails = calculateThumbnailSizeForHorizontalView(clientHeight);
         const remoteVideosContainerWidth
-            = clientWidth - (disableSelfView ? 0 : thumbnails?.local?.width) - HORIZONTAL_FILMSTRIP_MARGIN;
+            = videoSpaceWidth - (disableSelfView ? 0 : thumbnails?.local?.width) - HORIZONTAL_FILMSTRIP_MARGIN;
         const remoteVideosContainerHeight
             = thumbnails?.local?.height + TILE_VERTICAL_MARGIN + STAGE_VIEW_THUMBNAIL_VERTICAL_BORDER + SCROLL_SIZE;
         const numberOfRemoteParticipants = getRemoteParticipantCountWithFake(state);
@@ -288,7 +288,7 @@ export function setHorizontalViewDimensions() {
 export function setStageFilmstripViewDimensions() {
     return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
-        const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
+        const { clientHeight, videoSpaceWidth } = state['features/base/responsive-ui'];
         const {
             tileView = {}
         } = state['features/base/config'];
@@ -296,7 +296,7 @@ export function setStageFilmstripViewDimensions() {
         const verticalWidth = visible ? getVerticalViewMaxWidth(state) : 0;
         const { numberOfVisibleTiles = MAX_ACTIVE_PARTICIPANTS } = tileView;
         const numberOfParticipants = state['features/filmstrip'].activeParticipants.length;
-        const availableWidth = clientWidth - verticalWidth;
+        const availableWidth = videoSpaceWidth - verticalWidth;
         const maxColumns = getMaxColumnCount(state, {
             width: availableWidth,
             disableResponsiveTiles: false,
@@ -322,7 +322,7 @@ export function setStageFilmstripViewDimensions() {
         const thumbnailsTotalHeight = (rows ?? 1) * (TILE_VERTICAL_MARGIN + (height ?? 0));
         const hasScroll = clientHeight < thumbnailsTotalHeight;
         const filmstripWidth
-            = Math.min(clientWidth - TILE_VIEW_GRID_HORIZONTAL_MARGIN,
+            = Math.min(videoSpaceWidth - TILE_VIEW_GRID_HORIZONTAL_MARGIN,
                 (columns ?? 1) * (TILE_HORIZONTAL_MARGIN + (width ?? 0)))
             + (hasScroll ? SCROLL_SIZE : 0);
         const filmstripHeight = Math.min(clientHeight - TILE_VIEW_GRID_VERTICAL_MARGIN, thumbnailsTotalHeight);
@@ -543,10 +543,10 @@ export function clearStageParticipants() {
 export function setScreensharingTileDimensions() {
     return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const state = getState();
-        const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
+        const { clientHeight, videoSpaceWidth } = state['features/base/responsive-ui'];
         const { visible, topPanelHeight, topPanelVisible } = state['features/filmstrip'];
         const verticalWidth = visible ? getVerticalViewMaxWidth(state) : 0;
-        const availableWidth = clientWidth - verticalWidth;
+        const availableWidth = videoSpaceWidth - verticalWidth;
         const topPanel = isStageFilmstripTopPanel(state) && topPanelVisible;
         const availableHeight = clientHeight - (topPanel ? topPanelHeight?.current || TOP_FILMSTRIP_HEIGHT : 0);
 
diff --git a/react/features/filmstrip/components/web/Filmstrip.tsx b/react/features/filmstrip/components/web/Filmstrip.tsx
index 6ee9724b23..a47183efd0 100644
--- a/react/features/filmstrip/components/web/Filmstrip.tsx
+++ b/react/features/filmstrip/components/web/Filmstrip.tsx
@@ -891,12 +891,12 @@ function _mapStateToProps(state: IReduxState, ownProps: any) {
     const remoteVideosVisible = shouldRemoteVideosBeVisible(state);
     const { isOpen: shiftRight } = state['features/chat'];
     const disableSelfView = getHideSelfView(state);
-    const { clientWidth, clientHeight } = state['features/base/responsive-ui'];
+    const { videoSpaceWidth, clientHeight } = state['features/base/responsive-ui'];
     const filmstripDisabled = isFilmstripDisabled(state);
 
     const collapseTileView = reduceHeight
         && isMobileBrowser()
-        && clientWidth <= ASPECT_RATIO_BREAKPOINT;
+        && videoSpaceWidth <= ASPECT_RATIO_BREAKPOINT;
 
     const shouldReduceHeight = reduceHeight && isMobileBrowser();
     const _topPanelVisible = isStageFilmstripTopPanel(state) && topPanelVisible;
@@ -929,7 +929,7 @@ function _mapStateToProps(state: IReduxState, ownProps: any) {
         _isVerticalFilmstrip,
         _localScreenShareId: localScreenShare?.id,
         _mainFilmstripVisible: notDisabled,
-        _maxFilmstripWidth: clientWidth - MIN_STAGE_VIEW_WIDTH,
+        _maxFilmstripWidth: videoSpaceWidth - MIN_STAGE_VIEW_WIDTH,
         _maxTopPanelHeight: clientHeight - MIN_STAGE_VIEW_HEIGHT,
         _remoteParticipantsLength: _remoteParticipants?.length ?? 0,
         _topPanelHeight: topPanelHeight.current,
diff --git a/react/features/filmstrip/components/web/MainFilmstrip.tsx b/react/features/filmstrip/components/web/MainFilmstrip.tsx
index ee0eaeda5c..c468cbbb48 100644
--- a/react/features/filmstrip/components/web/MainFilmstrip.tsx
+++ b/react/features/filmstrip/components/web/MainFilmstrip.tsx
@@ -123,7 +123,7 @@ function _mapStateToProps(state: IReduxState, _ownProps: any) {
     let gridDimensions = dimensions;
     let _hasScroll = false;
 
-    const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
+    const { clientHeight, videoSpaceWidth } = state['features/base/responsive-ui'];
     const availableSpace = clientHeight - Number(filmstripHeight);
     let filmstripPadding = 0;
 
@@ -139,7 +139,7 @@ function _mapStateToProps(state: IReduxState, _ownProps: any) {
 
     const collapseTileView = reduceHeight
         && isMobileBrowser()
-        && clientWidth <= ASPECT_RATIO_BREAKPOINT;
+        && videoSpaceWidth <= ASPECT_RATIO_BREAKPOINT;
 
     const shouldReduceHeight = reduceHeight && (
         isMobileBrowser() || (_currentLayout !== LAYOUTS.VERTICAL_FILMSTRIP_VIEW
diff --git a/react/features/filmstrip/components/web/StageFilmstrip.tsx b/react/features/filmstrip/components/web/StageFilmstrip.tsx
index 0e9d95efcf..29f7d19727 100644
--- a/react/features/filmstrip/components/web/StageFilmstrip.tsx
+++ b/react/features/filmstrip/components/web/StageFilmstrip.tsx
@@ -119,7 +119,7 @@ function _mapStateToProps(state: IReduxState, _ownProps: any) {
     } = state['features/filmstrip'].stageFilmstripDimensions;
     const gridDimensions = dimensions;
 
-    const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
+    const { clientHeight, videoSpaceWidth } = state['features/base/responsive-ui'];
     const availableSpace = clientHeight - Number(filmstripHeight);
     let filmstripPadding = 0;
 
@@ -135,7 +135,7 @@ function _mapStateToProps(state: IReduxState, _ownProps: any) {
 
     const collapseTileView = reduceHeight
         && isMobileBrowser()
-        && clientWidth <= ASPECT_RATIO_BREAKPOINT;
+        && videoSpaceWidth <= ASPECT_RATIO_BREAKPOINT;
 
     const remoteFilmstripHeight = Number(filmstripHeight) - (
         collapseTileView && filmstripPadding > 0 ? filmstripPadding : 0);
diff --git a/react/features/filmstrip/functions.web.ts b/react/features/filmstrip/functions.web.ts
index 12a5e11114..2de306cf23 100644
--- a/react/features/filmstrip/functions.web.ts
+++ b/react/features/filmstrip/functions.web.ts
@@ -158,7 +158,7 @@ export function calculateThumbnailSizeForHorizontalView(clientHeight = 0) {
 /**
  * Calculates the size for thumbnails when in vertical view layout.
  *
- * @param {number} clientWidth - The height of the app window.
+ * @param {number} clientWidth - The available video space width.
  * @param {number} filmstripWidth - The width of the filmstrip.
  * @param {boolean} isResizable - Whether the filmstrip is resizable or not.
  * @returns {{local: {height, width}, remote: {height, width}}}
@@ -186,7 +186,7 @@ export function calculateThumbnailSizeForVerticalView(clientWidth = 0, filmstrip
 /**
  * Returns the minimum height of a thumbnail.
  *
- * @param {number} clientWidth - The width of the window.
+ * @param {number} clientWidth - The available width for rendering thumbnails.
  * @returns {number} The minimum height of a thumbnail.
  */
 export function getThumbnailMinHeight(clientWidth: number) {
@@ -198,7 +198,7 @@ export function getThumbnailMinHeight(clientWidth: number) {
  *
  * @param {boolean} disableResponsiveTiles - Indicates whether the responsive tiles functionality is disabled.
  * @param {boolean} disableTileEnlargement - Indicates whether the tiles enlargement functionality is disabled.
- * @param {number} clientWidth - The width of the window.
+ * @param {number} clientWidth - The available video space width.
  * @returns {number} The default aspect ratio for a tile.
  */
 export function getTileDefaultAspectRatio(disableResponsiveTiles: boolean,
@@ -236,13 +236,13 @@ export function getNumberOfPartipantsForTileView(state: IReduxState) {
  * @returns {Object} - The dimensions.
  */
 export function calculateNonResponsiveTileViewDimensions(state: IReduxState) {
-    const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
+    const { clientHeight, videoSpaceWidth } = state['features/base/responsive-ui'];
     const { disableTileEnlargement } = state['features/base/config'];
     const { columns: c, minVisibleRows, rows: r } = getNotResponsiveTileViewGridDimensions(state);
     const size = calculateThumbnailSizeForTileView({
         columns: c,
         minVisibleRows,
-        clientWidth,
+        clientWidth: videoSpaceWidth,
         clientHeight,
         disableTileEnlargement,
         disableResponsiveTiles: true
@@ -250,10 +250,10 @@ export function calculateNonResponsiveTileViewDimensions(state: IReduxState) {
 
     if (typeof size === 'undefined') { // The columns don't fit into the screen. We will have horizontal scroll.
         const aspectRatio = disableTileEnlargement
-            ? getTileDefaultAspectRatio(true, disableTileEnlargement, clientWidth)
+            ? getTileDefaultAspectRatio(true, disableTileEnlargement, videoSpaceWidth)
             : TILE_PORTRAIT_ASPECT_RATIO;
 
-        const height = getThumbnailMinHeight(clientWidth);
+        const height = getThumbnailMinHeight(videoSpaceWidth);
 
         return {
             height,
diff --git a/react/features/filmstrip/middleware.web.ts b/react/features/filmstrip/middleware.web.ts
index fc77dc8bb3..f0632215e1 100644
--- a/react/features/filmstrip/middleware.web.ts
+++ b/react/features/filmstrip/middleware.web.ts
@@ -85,13 +85,13 @@ MiddlewareRegistry.register(store => next => action => {
 
         if (isFilmstripResizable(state)) {
             const { width: filmstripWidth, topPanelHeight } = state['features/filmstrip'];
-            const { clientWidth, clientHeight } = action;
+            const { clientHeight, videoSpaceWidth } = action;
             let height, width;
 
-            if ((filmstripWidth.current ?? 0) > clientWidth - MIN_STAGE_VIEW_WIDTH) {
-                width = Math.max(clientWidth - MIN_STAGE_VIEW_WIDTH, DEFAULT_FILMSTRIP_WIDTH);
+            if ((filmstripWidth.current ?? 0) > videoSpaceWidth - MIN_STAGE_VIEW_WIDTH) {
+                width = Math.max(videoSpaceWidth - MIN_STAGE_VIEW_WIDTH, DEFAULT_FILMSTRIP_WIDTH);
             } else {
-                width = Math.min(clientWidth - MIN_STAGE_VIEW_WIDTH, filmstripWidth.userSet ?? 0);
+                width = Math.min(videoSpaceWidth - MIN_STAGE_VIEW_WIDTH, filmstripWidth.userSet ?? 0);
             }
             if (width !== filmstripWidth.current) {
                 store.dispatch(setFilmstripWidth(width));
diff --git a/react/features/filmstrip/subscriber.web.ts b/react/features/filmstrip/subscriber.web.ts
index de45dcb442..3d7e55f96f 100644
--- a/react/features/filmstrip/subscriber.web.ts
+++ b/react/features/filmstrip/subscriber.web.ts
@@ -60,12 +60,12 @@ StateListenerRegistry.register(
  */
 StateListenerRegistry.register(
     /* selector */ state => {
-        const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
+        const { clientHeight, videoSpaceWidth } = state['features/base/responsive-ui'];
 
         return {
             layout: getCurrentLayout(state),
             height: clientHeight,
-            width: clientWidth
+            width: videoSpaceWidth
         };
     },
     /* listener */ ({ layout }, store) => {
@@ -131,7 +131,7 @@ StateListenerRegistry.register(
  * Listens for changes in the client width to determine whether the overflow menu(s) should be displayed as drawers.
  */
 StateListenerRegistry.register(
-    /* selector */ state => state['features/base/responsive-ui'].clientWidth < DISPLAY_DRAWER_THRESHOLD,
+    /* selector */ state => state['features/base/responsive-ui'].videoSpaceWidth < DISPLAY_DRAWER_THRESHOLD,
     /* listener */ (widthBelowThreshold, store) => {
         store.dispatch(setOverflowDrawer(widthBelowThreshold));
         store.dispatch(setNarrowLayout(widthBelowThreshold));
@@ -141,7 +141,7 @@ StateListenerRegistry.register(
  * Gracefully hide/show the filmstrip when going past threshold.
  */
 StateListenerRegistry.register(
-    /* selector */ state => state['features/base/responsive-ui'].clientWidth < ASPECT_RATIO_BREAKPOINT,
+    /* selector */ state => state['features/base/responsive-ui'].videoSpaceWidth < ASPECT_RATIO_BREAKPOINT,
     /* listener */ (widthBelowThreshold, store) => {
         const state = store.getState();
         const { disableFilmstripAutohiding } = state['features/base/config'];
@@ -179,7 +179,7 @@ StateListenerRegistry.register(
             length: state['features/filmstrip'].activeParticipants.length,
             width: state['features/filmstrip'].width?.current,
             visible: state['features/filmstrip'].visible,
-            clientWidth: state['features/base/responsive-ui'].clientWidth,
+            clientWidth: state['features/base/responsive-ui'].videoSpaceWidth,
             clientHeight: state['features/base/responsive-ui'].clientHeight,
             tileView: state['features/video-layout'].tileViewEnabled,
             height: state['features/filmstrip'].topPanelHeight?.current
@@ -212,7 +212,7 @@ StateListenerRegistry.register(
     /* selector */ state => {
         return {
             length: state['features/video-layout'].remoteScreenShares.length,
-            clientWidth: state['features/base/responsive-ui'].clientWidth,
+            clientWidth: state['features/base/responsive-ui'].videoSpaceWidth,
             clientHeight: state['features/base/responsive-ui'].clientHeight,
             height: state['features/filmstrip'].topPanelHeight?.current,
             width: state['features/filmstrip'].width?.current,
diff --git a/react/features/gifs/components/web/GifsMenu.tsx b/react/features/gifs/components/web/GifsMenu.tsx
index f392ddbd16..8f77526f66 100644
--- a/react/features/gifs/components/web/GifsMenu.tsx
+++ b/react/features/gifs/components/web/GifsMenu.tsx
@@ -101,7 +101,7 @@ function GifsMenu({ columns = 2, parent }: IProps) {
     const { t } = useTranslation();
     const isInOverflowMenu
         = parent === IReactionsMenuParent.OverflowDrawer || parent === IReactionsMenuParent.OverflowMenu;
-    const { clientWidth } = useSelector((state: IReduxState) => state['features/base/responsive-ui']);
+    const { videoSpaceWidth } = useSelector((state: IReduxState) => state['features/base/responsive-ui']);
     const rating = useSelector(getGifRating);
 
     const fetchGifs = useCallback(async (offset = 0) => {
@@ -225,7 +225,7 @@ function GifsMenu({ columns = 2, parent }: IProps) {
                     onGifClick = { handleGifClick }
                     onGifKeyPress = { handleGifKeyPress }
                     width = { parent === IReactionsMenuParent.OverflowDrawer
-                        ? clientWidth - (2 * OVERFLOW_DRAWER_PADDING) - SCROLL_SIZE
+                        ? videoSpaceWidth - (2 * OVERFLOW_DRAWER_PADDING) - SCROLL_SIZE
                         : parent === IReactionsMenuParent.OverflowMenu ? 201 : 320
                     } />
             </div>
diff --git a/react/features/settings/components/web/audio/AudioSettingsPopup.tsx b/react/features/settings/components/web/audio/AudioSettingsPopup.tsx
index bf1fba3c8f..ed483056f4 100644
--- a/react/features/settings/components/web/audio/AudioSettingsPopup.tsx
+++ b/react/features/settings/components/web/audio/AudioSettingsPopup.tsx
@@ -142,10 +142,10 @@ function AudioSettingsPopup({
  * @returns {Object}
  */
 function mapStateToProps(state: IReduxState) {
-    const { clientWidth } = state['features/base/responsive-ui'];
+    const { videoSpaceWidth } = state['features/base/responsive-ui'];
 
     return {
-        popupPlacement: clientWidth <= Number(SMALL_MOBILE_WIDTH) ? 'auto' : 'top-end',
+        popupPlacement: videoSpaceWidth <= Number(SMALL_MOBILE_WIDTH) ? 'auto' : 'top-end',
         currentMicDeviceId: getCurrentMicDeviceId(state),
         currentOutputDeviceId: getCurrentOutputDeviceId(state),
         isOpen: Boolean(getAudioSettingsVisibility(state)),
diff --git a/react/features/settings/components/web/video/VideoSettingsPopup.tsx b/react/features/settings/components/web/video/VideoSettingsPopup.tsx
index e96a894749..1d82cc08fc 100644
--- a/react/features/settings/components/web/video/VideoSettingsPopup.tsx
+++ b/react/features/settings/components/web/video/VideoSettingsPopup.tsx
@@ -109,12 +109,12 @@ function VideoSettingsPopup({
  * @returns {Object}
  */
 function mapStateToProps(state: IReduxState) {
-    const { clientWidth } = state['features/base/responsive-ui'];
+    const { videoSpaceWidth } = state['features/base/responsive-ui'];
 
     return {
         currentCameraDeviceId: getCurrentCameraDeviceId(state),
         isOpen: Boolean(getVideoSettingsVisibility(state)),
-        popupPlacement: clientWidth <= Number(SMALL_MOBILE_WIDTH) ? 'auto' : 'top-end',
+        popupPlacement: videoSpaceWidth <= Number(SMALL_MOBILE_WIDTH) ? 'auto' : 'top-end',
         videoDeviceIds: getVideoDeviceIds(state) ?? []
     };
 }
diff --git a/react/features/shared-video/components/web/SharedVideo.tsx b/react/features/shared-video/components/web/SharedVideo.tsx
index f36bd33be3..897535b0e0 100644
--- a/react/features/shared-video/components/web/SharedVideo.tsx
+++ b/react/features/shared-video/components/web/SharedVideo.tsx
@@ -163,14 +163,14 @@ class SharedVideo extends Component<IProps> {
  */
 function _mapStateToProps(state: IReduxState) {
     const { videoUrl } = state['features/shared-video'];
-    const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
+    const { clientHeight, videoSpaceWidth } = state['features/base/responsive-ui'];
     const { visible, isResizing } = state['features/filmstrip'];
     const onStage = getLargeVideoParticipant(state)?.fakeParticipant === FakeParticipant.SharedVideo;
     const isVideoShared = isVideoPlaying(state);
 
     return {
         clientHeight,
-        clientWidth,
+        clientWidth: videoSpaceWidth,
         filmstripVisible: visible,
         filmstripWidth: getVerticalViewMaxWidth(state),
         isEnabled: isSharedVideoEnabled(state),
diff --git a/react/features/speaker-stats/components/web/SpeakerStats.tsx b/react/features/speaker-stats/components/web/SpeakerStats.tsx
index d443902f0b..0cafe3d275 100644
--- a/react/features/speaker-stats/components/web/SpeakerStats.tsx
+++ b/react/features/speaker-stats/components/web/SpeakerStats.tsx
@@ -199,9 +199,9 @@ const EMOTIONS_LEGEND = [
 const SpeakerStats = () => {
     const { faceLandmarks } = useSelector((state: IReduxState) => state['features/base/config']);
     const { showFaceExpressions } = useSelector((state: IReduxState) => state['features/speaker-stats']);
-    const { clientWidth } = useSelector((state: IReduxState) => state['features/base/responsive-ui']);
-    const displaySwitch = faceLandmarks?.enableDisplayFaceExpressions && clientWidth > DISPLAY_SWITCH_BREAKPOINT;
-    const displayLabels = clientWidth > MOBILE_BREAKPOINT;
+    const { videoSpaceWidth } = useSelector((state: IReduxState) => state['features/base/responsive-ui']);
+    const displaySwitch = faceLandmarks?.enableDisplayFaceExpressions && videoSpaceWidth > DISPLAY_SWITCH_BREAKPOINT;
+    const displayLabels = videoSpaceWidth > MOBILE_BREAKPOINT;
     const dispatch = useDispatch();
     const { classes } = useStyles();
     const { t } = useTranslation();
@@ -217,7 +217,7 @@ const SpeakerStats = () => {
 
     useEffect(() => {
         showFaceExpressions && !displaySwitch && dispatch(toggleFaceExpressions());
-    }, [ clientWidth ]);
+    }, [ videoSpaceWidth ]);
 
     useEffect(() => () => {
         dispatch(resetSearchCriteria());
diff --git a/react/features/toolbox/components/web/DialogPortal.ts b/react/features/toolbox/components/web/DialogPortal.ts
index 9a828947e6..1c9f57633e 100644
--- a/react/features/toolbox/components/web/DialogPortal.ts
+++ b/react/features/toolbox/components/web/DialogPortal.ts
@@ -52,7 +52,7 @@ interface IProps {
  * @returns {ReactElement}
  */
 function DialogPortal({ children, className, style, getRef, setSize, targetSelector, onVisible }: IProps) {
-    const clientWidth = useSelector((state: IReduxState) => state['features/base/responsive-ui'].clientWidth);
+    const videoSpaceWidth = useSelector((state: IReduxState) => state['features/base/responsive-ui'].videoSpaceWidth);
     const [ portalTarget ] = useState(() => {
         const portalDiv = document.createElement('div');
 
@@ -115,7 +115,7 @@ function DialogPortal({ children, className, style, getRef, setSize, targetSelec
                 document.body.removeChild(portalTarget);
             }
         };
-    }, [ clientWidth ]);
+    }, [ videoSpaceWidth ]);
 
     return ReactDOM.createPortal(
         children,
diff --git a/react/features/toolbox/components/web/Toolbox.tsx b/react/features/toolbox/components/web/Toolbox.tsx
index 1da46aa464..503b3fadec 100644
--- a/react/features/toolbox/components/web/Toolbox.tsx
+++ b/react/features/toolbox/components/web/Toolbox.tsx
@@ -74,7 +74,7 @@ export default function Toolbox({
 
     const conference = useSelector((state: IReduxState) => state['features/base/conference'].conference);
     const isNarrowLayout = useSelector((state: IReduxState) => state['features/base/responsive-ui'].isNarrowLayout);
-    const clientWidth = useSelector((state: IReduxState) => state['features/base/responsive-ui'].clientWidth);
+    const videoSpaceWidth = useSelector((state: IReduxState) => state['features/base/responsive-ui'].videoSpaceWidth);
     const isModerator = useSelector(isLocalParticipantModerator);
     const customToolbarButtons = useSelector(
         (state: IReduxState) => state['features/base/config'].customToolbarButtons);
@@ -229,7 +229,7 @@ export default function Toolbox({
         allButtons,
         buttonsWithNotifyClick,
         toolbarButtons: toolbarButtonsToUse,
-        clientWidth,
+        clientWidth: videoSpaceWidth,
         jwtDisabledButtons,
         mainToolbarButtonsThresholds
     });
diff --git a/react/features/toolbox/subscriber.web.ts b/react/features/toolbox/subscriber.web.ts
index a6f68c9e42..fe6834eddd 100644
--- a/react/features/toolbox/subscriber.web.ts
+++ b/react/features/toolbox/subscriber.web.ts
@@ -82,12 +82,12 @@ const throttledCheckOverlap = throttle(checkToolboxOverlap, 100, {
  */
 StateListenerRegistry.register(
     /* selector */ state => {
-        const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
+        const { clientHeight, videoSpaceWidth } = state['features/base/responsive-ui'];
 
         return {
             participantCount: getParticipantCount(state),
             clientHeight,
-            clientWidth,
+            clientWidth: videoSpaceWidth,
             isTileView: isLayoutTileView(state)
         };
     },
diff --git a/react/features/video-layout/functions.web.ts b/react/features/video-layout/functions.web.ts
index ddbefe1f03..fd2e8c3358 100644
--- a/react/features/video-layout/functions.web.ts
+++ b/react/features/video-layout/functions.web.ts
@@ -38,8 +38,8 @@ export function getMaxColumnCount(state: IReduxState, options: {
         disableResponsiveTiles = configDisableResponsiveTiles,
         disableTileEnlargement = configDisableTileEnlargement
     } = options;
-    const { clientWidth } = state['features/base/responsive-ui'];
-    const widthToUse = width || clientWidth;
+    const { videoSpaceWidth } = state['features/base/responsive-ui'];
+    const widthToUse = width || videoSpaceWidth;
     const configuredMax = interfaceConfig.TILE_VIEW_MAX_COLUMNS;
 
     if (disableResponsiveTiles) {
diff --git a/react/features/whiteboard/components/web/Whiteboard.tsx b/react/features/whiteboard/components/web/Whiteboard.tsx
index d8b9a3f48e..9d2eee8bff 100644
--- a/react/features/whiteboard/components/web/Whiteboard.tsx
+++ b/react/features/whiteboard/components/web/Whiteboard.tsx
@@ -49,7 +49,7 @@ const Whiteboard = (props: WithTranslation): JSX.Element => {
     const isOpen = useSelector(isWhiteboardOpen);
     const isVisible = useSelector(isWhiteboardVisible);
     const isInTileView = useSelector(shouldDisplayTileView);
-    const { clientHeight, clientWidth } = useSelector((state: IReduxState) => state['features/base/responsive-ui']);
+    const { clientHeight, videoSpaceWidth } = useSelector((state: IReduxState) => state['features/base/responsive-ui']);
     const { visible: filmstripVisible, isResizing } = useSelector((state: IReduxState) => state['features/filmstrip']);
     const filmstripWidth: number = useSelector(getVerticalViewMaxWidth);
     const collabDetails = useSelector(getCollabDetails);
@@ -76,9 +76,9 @@ const Whiteboard = (props: WithTranslation): JSX.Element => {
 
         if (interfaceConfig.VERTICAL_FILMSTRIP) {
             if (filmstripVisible) {
-                width = clientWidth - filmstripWidth;
+                width = videoSpaceWidth - filmstripWidth;
             } else {
-                width = clientWidth;
+                width = videoSpaceWidth;
             }
             height = clientHeight - getToolboxHeight();
         } else {
@@ -87,7 +87,7 @@ const Whiteboard = (props: WithTranslation): JSX.Element => {
             } else {
                 height = clientHeight;
             }
-            width = clientWidth;
+            width = videoSpaceWidth;
         }
 
         return {