diff --git a/src/components/interface/ResolutionWarning.tsx b/src/components/interface/ResolutionWarning.tsx index 76e6c4d08e..93f8770b3a 100644 --- a/src/components/interface/ResolutionWarning.tsx +++ b/src/components/interface/ResolutionWarning.tsx @@ -17,6 +17,7 @@ export function ResolutionWarning() { const [isRejected, setIsRejected] = useState(false); const [timeLeft, setTimeLeft] = useState(60); const [isTimedOut, setIsTimedOut] = useState(false); + const [detectedSize, setDetectedSize] = useState({ width: 0, height: 0 }); const countdownIntervalRef = useRef(null); const { storageEngine } = useStorageEngine(); @@ -25,6 +26,7 @@ export function ResolutionWarning() { useEffect(() => { const handleResize = () => { + setDetectedSize({ width: window.innerWidth, height: window.innerHeight }); if (minWidth === undefined || minHeight === undefined) { return; } @@ -110,6 +112,8 @@ export function ResolutionWarning() { {minWidth !== undefined && ` Width: ${minWidth}px`} {minHeight !== undefined && ` Height: ${minHeight}px`}
+ {`Detected: Width: ${detectedSize.width}px Height: ${detectedSize.height}px`} +
Please resize your browser window to the minimum required size within {' '} {timeLeft} diff --git a/tests/resolution-warning.spec.ts b/tests/resolution-warning.spec.ts new file mode 100644 index 0000000000..cd55746e4f --- /dev/null +++ b/tests/resolution-warning.spec.ts @@ -0,0 +1,19 @@ +import { expect, test } from '@playwright/test'; + +test('shows detected browser size in small-resolution warning', async ({ browser }) => { + const page = await browser.newPage(); + await page.setViewportSize({ + width: 350, + height: 700, + }); + + await page.goto('/'); + + await page.getByLabel('Demo Studies').locator('div').filter({ hasText: 'HTML as a Stimulus' }) + .nth(0) + .getByText('Go to Study') + .click(); + + await expect(page.getByRole('heading', { name: 'Screen Resolution Warning' })).toBeVisible(); + await expect(page.getByText('Detected: Width: 350px Height: 700px')).toBeVisible(); +});