Merge pull request #1044 from revisit-studies/copilot/show-browser-window-size-warning

Show detected browser dimensions in small-screen resolution warning

Author: JackWilb

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<NodeJS.Timeout | null>(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`}
               <br />
+              {`Detected: Width: ${detectedSize.width}px Height: ${detectedSize.height}px`}
+              <br />
               Please resize your browser window to the minimum required size within
               {' '}
               {timeLeft}

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();
+});