[Bug]: ui mode - chromium and firefox style broken

Version

1.45.0

Steps to reproduce

Start Tests in ui mode
ui mode opens
Tests run through (but with weird styling)

Expected behavior

The styling doesnt brake.

Actual behavior

In the timeline, the screenshots will show the browser with the correct styling, so therefore it must be only a problem with the browser window inside the ui mode.

Sadly, I cant share any screenshots. But it is also pretty simple. Usually my browser would show a sidebar on the left and next to it a page. In the ui mode browser window however this page is broken into its two components that are usually layered onto each other so that you now see the sidebar a box for the first component and a box for the second component.

That is pretty annoying, because sometimes there is so much content that you cant even see all of it anymore and then I have to review the screenshots instead.

Additional context

I made no configurations for the ui mode, since I couldnt find any. I just start it with "npx playwright test --ui".

Thats my playwright.config.ts file:

import { defineConfig, devices } from '@playwright/test'
import { testSystem } from './playwright/testConfig'

/**
 * Read environment variables from file.
 * https://github.com/motdotla/dotenv
 */
// require('dotenv').config();

/**
 * See https://playwright.dev/docs/test-configuration.
 */
export default defineConfig({
  timeout: 90000,
  expect: {
    timeout: 90000
  },
  testDir: './playwright/tests/modules',
  /* Run tests in files in parallel */
  fullyParallel: false,
  /* Fail the build on CI if you accidentally left test.only in the source code. */
  forbidOnly: !!process.env.CI,
  /* Retry on CI only */
  retries: 1,
  /* Opt out of parallel tests on CI. */
  // workers: process.env.CI ? 1 : undefined,
  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
  reporter: process.env.CI ? 'list' : 'html',
  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
  use: {
    /* Attribute to set a individual testid. HAS TO start with "data-"*/
    // testIdAttribute: 'data-testId',
    /* Base URL to use in actions like `await page.goto('/')`. */
    baseURL: "http://localhost:8080",
    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
    trace: 'retain-on-failure'
  },
  /* Configure projects for major browsers */
  projects: [
    {
      name: 'setup',
      testMatch: /global\.setup\.ts/,
    },
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
      dependencies: ['setup']
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
      dependencies: ['setup']
    }
  ],
  /* Run your local dev server before starting the tests */
  webServer: {
    command: `npm run test:${testSystem}`,
    port: 8080,
    timeout: process.env.CI ? 150_000 : 60_000,
    reuseExistingServer: false
  },
});

Environment

System: OS: macOS 14.6.1 Memory: 3.38 GB / 16.00 GB Binaries: Node: 18.18.2 - /usr/local/bin/node Yarn: 1.22.18 - ~/.yarn/bin/yarn npm: 10.9.0 - /usr/local/bin/npm Languages: Bash: 3.2.57 - /bin/bash

microsoft / playwright