From a415c79bff04d8014dc3ce28c8e66e94c6ff763b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= Date: Sat, 28 Sep 2024 00:13:55 +0200 Subject: [PATCH] [Website] Default to the Playground preview on mobile --- .../playground/website/src/lib/state/redux/slice-ui.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/playground/website/src/lib/state/redux/slice-ui.ts b/packages/playground/website/src/lib/state/redux/slice-ui.ts index f6d32d1f0d..b10cb1d62d 100644 --- a/packages/playground/website/src/lib/state/redux/slice-ui.ts +++ b/packages/playground/website/src/lib/state/redux/slice-ui.ts @@ -20,6 +20,8 @@ export interface UIState { const query = new URL(document.location.href).searchParams; const isEmbeddedInAnIframe = window.self !== window.top; +// @TODO: Centralize these breakpoint sizes. +const isMobile = window.innerWidth < 875; const initialState: UIState = { activeModal: @@ -29,8 +31,11 @@ const initialState: UIState = { offline: !navigator.onLine, // Open site manager for direct playground.wordpress.net visitors, // unless they specifically request seamless mode. + // Don't default to the site manager on mobile, as that would mean + // seeing something that's not Playground filling your entire screen – + // quite a confusing experience. siteManagerIsOpen: - query.get('mode') !== 'seamless' && !isEmbeddedInAnIframe, + query.get('mode') !== 'seamless' && !isEmbeddedInAnIframe && !isMobile, }; const uiSlice = createSlice({