ref(responsive-ui): rename clientWidth to videoSpaceWidth.

Currently the clientWidth is not representing the window width but it is representing the available video space width since we are subtracting the width of the participants pane and chat area.
2025-12-30 11:22:31 +00:00 · 2025-05-05 17:48:40 -05:00
parent 598d3764dd
commit 1556f1b81a
21 changed files with 73 additions and 69 deletions
--- 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));
        });
    };
 }
--- 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
--- 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
        };
    }

--- 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) {
--- 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);

--- 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,
--- 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
--- 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);
--- 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,
--- 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));
--- 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,
--- 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>
--- 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)),
--- 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) ?? []
    };
 }
--- 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),
--- 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());
--- 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,
--- 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
    });
--- 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)
        };
    },
--- 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) {
--- 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 {