misc: Display viewport info in badge, remove dropdown explanation of viewport dimensions (#31119)

* misc: Begin code for moving viewport dimensions and removing dropdown * Update styles for viewport size + scale and handle component testing views * add changelog * fix changelog link * fix issue link again! * Fix e2e tests * Fix incorrect selector
2026-01-10 00:30:37 -06:00 · 2025-02-21 15:42:47 -05:00
parent 01e32fb29c
commit 7012f1153a
12 changed files with 116 additions and 180 deletions
--- a/cli/CHANGELOG.md
+++ b/cli/CHANGELOG.md
@@ -5,6 +5,7 @@ _Released 2/25/2025 (PENDING)_

 **Misc:**

+- Viewport width, height, and scale now display in a badge above the application under test. The dropdown describing how to set viewport height and width has been removed from the UI. Additionally, component tests now show a notice about URL navigation being disabled in component tests. Addresses [#30999](https://github.com/cypress-io/cypress/issues/30999). Addressed in [#31119](https://github.com/cypress-io/cypress/pull/31119).
 - Updated types around `.readFile()` and `.scrollTo()` arguments and `Cypress.dom` methods. Addressed in [#31055](https://github.com/cypress-io/cypress/pull/31055).

 **Dependency Updates:**
--- a/packages/app/cypress/e2e/cypress-in-cypress-component.cy.ts
+++ b/packages/app/cypress/e2e/cypress-in-cypress-component.cy.ts
@@ -19,20 +19,13 @@ describe('Cypress In Cypress CT', { viewportWidth: 1500, defaultCommandTimeout:
      cy.waitForSpecToFinish()
      cy.get('[data-model-state="passed"]').should('contain', 'renders the test component')

-      cy.findByTestId('aut-url').should('not.exist')
+      cy.findByTestId('aut-url-input').should('be.disabled')
      cy.findByTestId('select-browser').click()

      cy.contains('Canary').should('be.visible')
-      cy.findByTestId('viewport').click()
-
      // TODO: restore when Percy CSS is fixed. See https://github.com/cypress-io/cypress/issues/23435
      // snapshotAUTPanel('browsers open')
-      cy.contains('Canary').should('be.hidden')
-      cy.contains('The viewport determines the width and height of your application under test. By default the viewport will be 500px by 500px for component testing.')
-      .should('be.visible')
-
-      // TODO: restore when Percy CSS is fixed. See https://github.com/cypress-io/cypress/issues/23435
-      // snapshotAUTPanel('viewport info open')
+      cy.findByTestId('viewport-size').should('be.visible')

      cy.get('body').click()

--- a/packages/app/cypress/e2e/cypress-in-cypress-e2e.cy.ts
+++ b/packages/app/cypress/e2e/cypress-in-cypress-e2e.cy.ts
@@ -23,7 +23,7 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:

    cy.contains('Canary').should('be.visible')
    cy.findByTestId('select-browser').click()
-    cy.get('[data-cy="viewport"]').click()
+    cy.get('[data-cy="viewport-size"]').should('be.visible')

    cy.contains('Chrome 1')
    .focus()
@@ -33,14 +33,6 @@ describe('Cypress In Cypress E2E', { viewportWidth: 1500, defaultCommandTimeout:
    // snapshotAUTPanel('browsers open')

    cy.contains('Canary').should('be.hidden')
-
-    cy.get('[data-cy="viewport"]').click()
-    cy.contains('The viewport determines the width and height of your application under test. By default the viewport will be 1000px by 660px for end-to-end testing.')
-    .should('be.visible')
-
-    // TODO: restore when Percy CSS is fixed. See https://github.com/cypress-io/cypress/issues/23435
-    // snapshotAUTPanel('viewport info open')
-
    cy.get('body').click()

    cy.findByTestId('playground-activator').click()
--- a/packages/app/cypress/e2e/cypress-in-cypress-run-mode.cy.ts
+++ b/packages/app/cypress/e2e/cypress-in-cypress-run-mode.cy.ts
@@ -25,8 +25,7 @@ describe('Cypress In Cypress - run mode', { viewportWidth: 1200 }, () => {
    cy.contains('http://localhost:4455/cypress/e2e/dom-content.html').should('be.visible')

    // confirm no interactions are implemented
-    cy.findByTestId('viewport').click()
-    cy.contains('The viewport determines').should('not.exist')
+    cy.findByTestId('viewport-size').should('be.visible')
    cy.contains('Chrome 1').click()
    cy.contains('Firefox').should('not.exist')

@@ -41,7 +40,7 @@ describe('Cypress In Cypress - run mode', { viewportWidth: 1200 }, () => {
    cy.visitApp(`/specs/runner?file=src/TestComponent.spec.jsx&${CY_IN_CY_SIMULATE_RUN_MODE}`)

    cy.waitForSpecToFinish()
-    cy.findByTestId('aut-url').should('not.exist')
+    cy.findByTestId('aut-url').contains('URL navigation disabled in component testing').should('be.visible')
    cy.findByTestId('playground-activator').should('not.exist')

    cy.findByLabelText('Stats').within(() => {
@@ -53,8 +52,7 @@ describe('Cypress In Cypress - run mode', { viewportWidth: 1200 }, () => {
    cy.contains('Chrome 1').should('be.visible')

    // confirm no interactions are implemented
-    cy.findByTestId('viewport').click()
-    cy.contains('The viewport determines').should('not.exist')
+    cy.findByTestId('viewport-size').should('be.visible')
    cy.contains('Chrome 1').click()
    cy.contains('Firefox').should('not.exist')

--- a/packages/app/cypress/e2e/cypress-in-cypress.cy.ts
+++ b/packages/app/cypress/e2e/cypress-in-cypress.cy.ts
@@ -104,8 +104,7 @@ describe('Cypress in Cypress', { viewportWidth: 1500, defaultCommandTimeout: 100
      })
    })

-    // TODO: fix flaky test https://github.com/cypress-io/cypress/issues/23307
-    it(`scales the AUT correctly in ${testingType}`, { retries: 15 }, () => {
+    it(`scales the AUT correctly in ${testingType}`, () => {
      const assertNoScaleShown = () => {
        // check that no message about scale % is shown,
        // meaning the AUT is at 100% scale
@@ -216,7 +215,7 @@ describe('Cypress in Cypress', { viewportWidth: 1500, defaultCommandTimeout: 100
      cy.get('@selectBrowser')
      .should('be.visible') // now that we have reduced the specs list, we should be able to see this

-      cy.contains(testingTypeExpectedScales[`${ testingType }NarrowViewport`]).should('be.visible')
+      cy.contains(testingTypeExpectedScales[`${ testingType }NarrowViewport`])
    })

    it(`resets selector playground validity when selecting element with playground selector in ${testingType}`, () => {
--- a/packages/app/cypress/e2e/subscriptions/configChange-subscription.cy.ts
+++ b/packages/app/cypress/e2e/subscriptions/configChange-subscription.cy.ts
@@ -55,7 +55,7 @@ describe('configChange subscription', () => {

      // wait until it has passed
      cy.get('[data-model-state="passed"]').should('contain', 'renders the test content')
-      cy.get('button').contains('1000x660')
+      cy.get('[data-cy="viewport-size"]').contains('1000x660')

      // update the config - the spec should re-execute with the new viewportHeight
      updateViewportHeightInCypressConfig(777)
@@ -67,7 +67,7 @@ describe('configChange subscription', () => {

      cy.waitForSpecToFinish()
      cy.get('[data-model-state="passed"]').should('contain', 'renders the test content')
-      cy.get('button').contains('1000x777')
+      cy.get('[data-cy="viewport-size"]').contains('1000x777')
    })
  })
 })
--- a/packages/app/package.json
+++ b/packages/app/package.json
@@ -27,6 +27,7 @@
    "@cypress-design/vue-icon": "^1.6.0",
    "@cypress-design/vue-statusicon": "^1.0.0",
    "@cypress-design/vue-tabs": "^1.2.2",
+    "@cypress-design/vue-tag": "^1.0.1",
    "@cypress/mount-utils": "0.0.0-development",
    "@faker-js/faker": "8.4.1",
    "@graphql-typed-document-node/core": "^3.1.0",
--- a/packages/app/src/runner/SpecRunnerHeaderOpenMode.cy.tsx
+++ b/packages/app/src/runner/SpecRunnerHeaderOpenMode.cy.tsx
@@ -32,7 +32,7 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {

    cy.findByTestId('aut-url-input').should('be.visible').should('have.value', autUrl)
    cy.findByTestId('select-browser').should('be.visible').contains('Electron 73')
-    cy.findByTestId('viewport').should('be.visible').contains('500x500')
+    cy.findByTestId('viewport-size').should('be.visible').contains('500x500')
  })

  it('disabled selector playground button when isRunning is true', () => {
@@ -47,9 +47,6 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
    })

    cy.get('[data-cy="playground-activator"]').should('be.disabled')
-    cy.findByTestId('aut-url-input').should('be.visible')
-    cy.findByTestId('select-browser').should('be.visible').contains('Electron 73')
-    cy.findByTestId('viewport').should('be.visible').contains('500x500')
  })

  it('disabled selector playground button when isLoading is true', () => {
@@ -64,9 +61,6 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
    })

    cy.get('[data-cy="playground-activator"]').should('be.disabled')
-    cy.findByTestId('aut-url-input').should('be.visible')
-    cy.findByTestId('select-browser').should('be.visible').contains('Electron 73')
-    cy.findByTestId('viewport').should('be.visible').contains('500x500')
  })

  it('enables selector playground button by default', () => {
@@ -77,9 +71,6 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
    })

    cy.get('[data-cy="playground-activator"]').should('not.be.disabled')
-    cy.findByTestId('aut-url-input').should('be.visible')
-    cy.findByTestId('select-browser').should('be.visible').contains('Electron 73')
-    cy.findByTestId('viewport').should('be.visible').contains('500x500')
  })

  it('shows url section if currentTestingType is e2e', () => {
@@ -99,8 +90,7 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {

    cy.get('[data-cy="aut-url"]').should('exist')
    cy.findByTestId('aut-url-input').should('be.visible').should('have.value', autUrl)
-    cy.findByTestId('select-browser').should('be.visible').contains('Electron 73')
-    cy.findByTestId('viewport').should('be.visible').contains('500x500')
+    cy.findByTestId('viewport-size').should('be.visible').contains('500x500')
  })

  it('url section handles long url/small viewport', {
@@ -123,7 +113,7 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
    cy.get('[data-cy="aut-url"]').should('exist')
    cy.findByTestId('aut-url-input').should('be.visible').should('have.value', autUrl)
    cy.findByTestId('select-browser').should('be.visible').contains('Electron 73')
-    cy.findByTestId('viewport').should('be.visible').contains('500x500')
+    cy.findByTestId('viewport-size').should('be.visible').contains('500x500')
    cy.percySnapshot()
  })

@@ -143,8 +133,6 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
    })

    cy.findByTestId('aut-url-input').invoke('val').should('contain', autUrl)
-    cy.findByTestId('select-browser').should('be.visible').contains('Electron 73')
-    cy.findByTestId('viewport').should('be.visible').contains('500x500')
  })

  it('opens aut url externally', () => {
@@ -176,7 +164,7 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
    cy.wrap(openExternalStub).should('have.been.calledWith', 'http://localhost:3000/todo')
  })

-  it('does not show url section if currentTestingType is component', () => {
+  it('disables url section if currentTestingType is component', () => {
    const autStore = useAutStore()

    autStore.updateUrl('http://localhost:3000')
@@ -191,9 +179,9 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
    })

    cy.findByTestId('playground-activator').should('be.visible')
-    cy.findByTestId('aut-url').should('not.exist')
-    cy.findByTestId('select-browser').should('be.visible').contains('Electron 73')
-    cy.findByTestId('viewport').should('be.visible').contains('500x500')
+    cy.findByTestId('aut-url-input').should('be.disabled')
+    cy.findByTestId('aut-url-input').should('have.prop', 'placeholder', 'URL navigation disabled in component testing')
+    cy.findByTestId('viewport-size').should('be.visible').contains('500x500')
  })

  it('shows current browser and possible browsers', () => {
@@ -228,7 +216,6 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
    cy.findByTestId('select-browser').contains('Fake Browser')

    cy.get('[data-cy="select-browser"] > button svg').eq(0).children().verifyBrowserIconSvg(cyGeneralGlobeX16.data)
-    cy.findByTestId('viewport').contains('500x500')
  })

  it('shows current viewport info', () => {
@@ -241,39 +228,25 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {
      },
    })

-    cy.get('[data-cy="viewport"]').click()
-    cy.contains('The viewport determines').should('be.visible')
-    cy.contains('Additionally, you can override this value in your cypress.config.js or via the cy.viewport() command.')
-    .should('be.visible')
-
-    cy.get('[data-cy="viewport"]').click()
-    cy.contains('The viewport determines').should('be.hidden')
-    cy.get('[data-cy="viewport"] button').focus().type(' ')
-    cy.contains('The viewport determines').should('be.visible')
-    cy.get('[data-cy="viewport"] button').focus().type('{enter}')
-    cy.contains('The viewport determines').should('be.hidden')
+    cy.get('[data-cy="viewport-size"]').contains('500x500')
  })

-  it('links to the viewport docs', () => {
+  it('shows scale % in viewport info', () => {
+    const autStore = useAutStore()
+
+    autStore.setScale(0.4)
+    autStore.updateUrl('http://localhost:3000/todo')
    cy.mountFragment(SpecRunnerHeaderFragmentDoc, {
      render: (gqlVal) => {
        return renderWithGql({
          ...gqlVal,
-          currentTestingType: 'e2e',
+          configFile: 'cypress.config.js',
        })
      },
    })

-    cy.findByTestId('viewport').click()
-    cy.findByTestId('viewport-docs')
-    .should('be.visible')
-    .should('have.attr', 'href', 'https://on.cypress.io/viewport')
-
-    cy.contains('The viewport determines the width and height of your application under test. By default the viewport will be 500px by 500px for end-to-end testing.')
-    cy.contains('Additionally, you can override this value in your cypress.config.ts or via the cy.viewport() command.')
-    .should('be.visible')
-
-    cy.findByTestId('viewport-docs').should('have.attr', 'href', 'https://on.cypress.io/viewport')
+    cy.get('[data-cy="viewport-scale"]').contains('40%')
+    cy.percySnapshot()
  })

  it('disables browser dropdown button when isRunning is true', () => {
@@ -292,8 +265,6 @@ describe('SpecRunnerHeaderOpenMode', { viewportHeight: 500 }, () => {

    cy.findByTestId('select-browser').should('be.visible').contains('Chrome 78')
    cy.get('[data-cy="select-browser"] > button').should('be.disabled')
-    cy.findByTestId('aut-url').should('be.visible')
-    cy.findByTestId('viewport').should('be.visible').contains('500x500')
  })

  it('opens and closes selector playground', () => {
--- a/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue
+++ b/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue
@@ -6,7 +6,6 @@
  >
    <div class="flex flex-wrap grow p-[16px] gap-[12px] justify-end">
      <div
-        v-if="props.gql.currentTestingType === 'e2e'"
        data-cy="aut-url"
        class="border rounded flex grow border-gray-100 h-[32px] overflow-hidden align-middle"
        :class="{
@@ -21,42 +20,52 @@
          :aria-label="t('runner.selectorPlayground.toggle')"
          @click="togglePlayground"
        >
-          <i-cy-crosshairs_x16 :class="[selectorPlaygroundStore.show ? 'icon-dark-indigo-500' : 'icon-dark-gray-500']" />
+          <i-cy-crosshairs_x16
+            :class="[selectorPlaygroundStore.show ? 'icon-dark-indigo-500' : 'icon-dark-gray-500']"
+          />
        </Button>
        <input
          ref="autUrlInputRef"
-          :value="studioStore.needsUrl ? urlInProgress : autUrl"
          data-cy="aut-url-input"
+          :disabled="urlDisabled"
+          :value="inputValue"
+          :placeholder="inputPlaceholder"
          aria-label="url of the application under test"
-          class="flex grow mr-[12px] leading-normal max-w-full text-indigo-500 z-51 self-center hocus-link-default truncate"
+          class="aut-url-input flex grow mr-[12px] leading-normal max-w-full text-indigo-500 z-51 self-center hocus-link-default truncate"
          @input="setStudioUrl"
          @click="openExternally"
          @keyup.enter="visitUrl"
        >
        <StudioUrlPrompt
-          v-if="studioStore.needsUrl"
+          v-if="studioStore.needsUrl && !urlDisabled"
          :aut-url-input-ref="autUrlInputRef"
          :url-in-progress="urlInProgress"
          @submit="visitUrl"
          @cancel="() => eventManager.emit('studio:cancel', undefined)"
        />
+        <Tag
+          data-cy="viewport-size"
+          size="20"
+          color="white"
+          class="self-center rounded-[10px] mr-[5px] pr-[6px] pl-[6px]"
+        >
+          <span class="whitespace-nowrap text-[12px]">{{ autStore.viewportWidth }}x{{
+            autStore.viewportHeight
+          }}</span>
+        </Tag>
+        <Tag
+          v-if="displayScale"
+          data-cy="viewport-scale"
+          size="20"
+          color="white"
+          class="self-center rounded-[10px] mr-[5px] pr-[6px] pl-[6px]"
+        >
+          <span class="text-[12px]">
+            {{ displayScale }}
+          </span>
+        </Tag>
      </div>

-      <div
-        v-else
-        class="grow"
-      >
-        <Button
-          data-cy="playground-activator"
-          :disabled="isDisabled"
-          class="border-gray-100 mr-[12px]"
-          variant="outline"
-          :aria-label="t('runner.selectorPlayground.toggle')"
-          @click="togglePlayground"
-        >
-          <i-cy-crosshairs_x16 :class="[selectorPlaygroundStore.show ? 'icon-dark-indigo-500' : 'icon-dark-gray-500']" />
-        </Button>
-      </div>
      <SpecRunnerDropdown
        v-if="selectedBrowser?.displayName"
        data-cy="select-browser"
@@ -80,63 +89,6 @@
          </div>
        </template>
      </SpecRunnerDropdown>
-      <SpecRunnerDropdown
-        variant="panel"
-        data-cy="viewport"
-      >
-        <template #heading>
-          <i-cy-ruler_x16 class="icon-dark-gray-500 icon-light-gray-400" />
-          <span class="whitespace-nowrap">{{ autStore.viewportWidth }}x{{ autStore.viewportHeight }}</span>
-          <span
-            v-if="displayScale"
-            class="ml-[-6px] text-gray-500"
-          >
-            ({{ displayScale }})
-          </span>
-        </template>
-        <template #default>
-          <div class="max-h-50vw p-[24px] pt-5 text-gray-700 leading-5 w-[346px] overflow-auto">
-            <i18n-t
-              tag="p"
-              keypath="runner.viewportTooltip.infoText"
-              class="mb-[24px]"
-            >
-              <strong class="font-bold">{{ autStore.defaultViewportWidth }}px</strong>
-              <strong class="font-bold">{{ autStore.defaultViewportHeight }}px</strong>
-              {{ props.gql.currentTestingType === "e2e" ? 'end-to-end' : 'component' }}
-            </i18n-t>
-
-            <i18n-t
-              tag="p"
-              keypath="runner.viewportTooltip.configText"
-              class="mb-[24px]"
-            >
-              <template #configFile>
-                <!-- disable rule to prevent trailing space from being added to <InlineCodeFragment/> content -->
-                <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
-                <InlineCodeFragment class="font-medium text-xs leading-5">{{ props.gql.configFile }}</InlineCodeFragment>
-              </template>
-              <template #viewportCommand>
-                <!-- disable rule to prevent trailing space from being added to <InlineCodeFragment/> content -->
-                <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
-                <InlineCodeFragment class="font-medium text-xs leading-5">cy.viewport()</InlineCodeFragment>
-              </template>
-            </i18n-t>
-            <div class="flex justify-center">
-              <Button
-                class="font-medium"
-                data-cy="viewport-docs"
-                :prefix-icon="BookIcon"
-                prefix-icon-class="icon-dark-indigo-500"
-                variant="outline"
-                :href="t('runner.viewportTooltip.buttonHref')"
-              >
-                {{ t('runner.viewportTooltip.buttonText') }}
-              </Button>
-            </div>
-          </div>
-        </template>
-      </SpecRunnerDropdown>
    </div>

    <SelectorPlayground
@@ -174,6 +126,7 @@ import type { SpecRunnerHeaderFragment } from '../generated/graphql'
 import type { EventManager } from './event-manager'
 import type { AutIframe } from './aut-iframe'
 import { togglePlayground as _togglePlayground } from './utils'
+import Tag from '@cypress-design/vue-tag'
 import SelectorPlayground from './selector-playground/SelectorPlayground.vue'
 import ExternalLink from '@packages/frontend-shared/src/gql-components/ExternalLink.vue'
 import Alert from '@packages/frontend-shared/src/components/Alert.vue'
@@ -181,10 +134,8 @@ import Button from '@packages/frontend-shared/src/components/Button.vue'
 import StudioControls from './studio/StudioControls.vue'
 import StudioUrlPrompt from './studio/StudioUrlPrompt.vue'
 import VerticalBrowserListItems from '@packages/frontend-shared/src/gql-components/topnav/VerticalBrowserListItems.vue'
-import InlineCodeFragment from '@packages/frontend-shared/src/components/InlineCodeFragment.vue'
 import SpecRunnerDropdown from './SpecRunnerDropdown.vue'
 import { allBrowsersIcons } from '@packages/frontend-shared/src/assets/browserLogos'
-import BookIcon from '~icons/cy/book_x16'
 import { useStudioStore } from '../store/studio-store'
 import { useExternalLink } from '@cy/gql-components/useExternalLink'

@@ -256,6 +207,18 @@ const activeSpecPath = specStore.activeSpec?.absolute

 const isDisabled = computed(() => autStore.isRunning || autStore.isLoading)

+const urlDisabled = computed(() => props.gql.currentTestingType === 'component')
+
+const inputPlaceholder = computed(() => props.gql.currentTestingType === 'e2e' ? '' : 'URL navigation disabled in component testing')
+
+const inputValue = computed(() => {
+  if (props.gql.currentTestingType === 'component') {
+    return ''
+  }
+
+  return studioStore.needsUrl ? urlInProgress.value : autUrl.value
+})
+
 const openExternal = useExternalLink()

 function setStudioUrl (event: Event) {
@@ -276,3 +239,13 @@ function openExternally () {
  openExternal(autStore.url)
 }
 </script>
+
+<style scoped>
+.aut-url-input:disabled {
+  background-color: transparent;
+}
+
+.aut-url-input:disabled:hover {
+  text-decoration: none;
+}
+</style>
--- a/packages/app/src/runner/SpecRunnerHeaderRunMode.cy.tsx
+++ b/packages/app/src/runner/SpecRunnerHeaderRunMode.cy.tsx
@@ -15,6 +15,7 @@ describe('SpecRunnerHeaderRunMode', { viewportHeight: 500 }, () => {
      const autStore = useAutStore()

      autStore.updateUrl('http://localhost:4000')
+      autStore.setScale(0.4)

      cy.mount(<SpecRunnerHeaderRunMode/>)

@@ -22,12 +23,11 @@ describe('SpecRunnerHeaderRunMode', { viewportHeight: 500 }, () => {
      cy.get('[data-cy="playground-activator"]').should('not.exist')
      // confirm expected content is rendered
      cy.contains('1000x660').should('be.visible')
+      cy.contains('40%').should('be.visible')
      cy.contains('Chrome 1').should('be.visible')
      cy.contains('http://localhost:4000').should('be.visible')

      // confirm no interactions are implemented
-      cy.get('[data-cy="viewport"]').click()
-      cy.contains('The viewport determines').should('not.exist')
      cy.contains('Chrome 1').click()
      cy.contains('Firefox').should('not.exist')

@@ -42,18 +42,18 @@ describe('SpecRunnerHeaderRunMode', { viewportHeight: 500 }, () => {
      const autStore = useAutStore()

      autStore.updateUrl('http://localhost:4000')
+      autStore.setScale(0.4)

      cy.mount(<SpecRunnerHeaderRunMode />)

-      cy.get('[data-cy="aut-url"]').should('not.exist')
+      cy.contains('URL navigation disabled in component testing').should('be.visible')
      cy.get('[data-cy="playground-activator"]').should('not.exist')
      // confirm expected content is rendered
      cy.contains('500x500').should('be.visible')
+      cy.contains('40%').should('be.visible')
      cy.contains('Chrome 1').should('be.visible')

      // confirm no interactions are implemented
-      cy.get('[data-cy="viewport"]').click()
-      cy.contains('The viewport determines').should('not.exist')
      cy.contains('Chrome 1').click()
      cy.contains('Firefox').should('not.exist')
    })
--- a/packages/app/src/runner/SpecRunnerHeaderRunMode.vue
+++ b/packages/app/src/runner/SpecRunnerHeaderRunMode.vue
@@ -7,22 +7,36 @@
    <!-- this is similar to the Open Mode header but it's not interactive, so can be a lot smaller-->
    <div class="flex grow flex-wrap py-[16px] gap-[12px] justify-end">
      <div
-        v-if="testingType === 'e2e'"
        data-cy="aut-url"
        class="border rounded flex grow border-[1px] border-gray-100 h-[32px] align-middle overflow-hidden"
        :class="{
          'bg-gray-50': autStore.isLoadingUrl
        }"
      >
-        <div class="mx-[12px] max-w-full grid text-gray-600 items-center truncate">
-          {{ autStore.url }}
+        <div class="mx-[12px] flex grow text-gray-600 items-center truncate">
+          {{ testingType === 'e2e' ? autStore.url : 'URL navigation disabled in component testing' }}
        </div>
-      </div>
-      <div
-        v-else
-        class="grow"
-      >
-        <!-- spacer -->
+        <Tag
+          data-cy="viewport-size"
+          size="20"
+          color="white"
+          class="self-center rounded-[10px] mr-[5px] pr-[6px] pl-[6px]"
+        >
+          <span class="whitespace-nowrap text-[12px]">{{ autStore.viewportWidth }}x{{
+            autStore.viewportHeight
+          }}</span>
+        </Tag>
+        <Tag
+          v-if="displayScale"
+          data-cy="viewport-scale"
+          size="20"
+          color="white"
+          class="self-center rounded-[10px] mr-[5px] pr-[6px] pl-[6px]"
+        >
+          <span class="text-[12px]">
+            {{ displayScale }}
+          </span>
+        </Tag>
      </div>
      <SpecRunnerDropdown
        data-cy="select-browser"
@@ -34,20 +48,8 @@
            v-if="selectedBrowser.displayName"
            class="min-w-[16px] w-[16px]"
            alt=""
-          /> {{ selectedBrowser.displayName }} {{ selectedBrowser.majorVersion }}
-        </template>
-      </SpecRunnerDropdown>
-      <SpecRunnerDropdown
-        variant="panel"
-        data-cy="viewport"
-      >
-        <template #heading>
-          <i-cy-ruler_x16 class="icon-dark-gray-500 icon-light-gray-400" />
-          <span class="whitespace-nowrap">{{ autStore.viewportWidth }}x{{ autStore.viewportHeight }}</span>
-          <span
-            v-if="displayScale"
-            class="mr-[-6px] text-gray-500"
-          >({{ displayScale }})</span>
+          /> {{ selectedBrowser.displayName }}
+          {{ selectedBrowser.majorVersion }}
        </template>
      </SpecRunnerDropdown>
    </div>
@@ -57,6 +59,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useAutStore } from '../store'
+import Tag from '@cypress-design/vue-tag'
 import SpecRunnerDropdown from './SpecRunnerDropdown.vue'
 import { allBrowsersIcons } from '@packages/frontend-shared/src/assets/browserLogos'
 import { useAutHeader } from './useAutHeader'
--- a/yarn.lock
+++ b/yarn.lock
@@ -2714,6 +2714,11 @@
  dependencies:
    "@cypress-design/constants-tabs" "^1.2.1"

+"@cypress-design/vue-tag@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@cypress-design/vue-tag/-/vue-tag-1.0.1.tgz#dd4c820c635d614ab64097bfe2bb77742037508a"
+  integrity sha512-+Ampbv/NBnwLOBRx/jiyyfMKYeKcWYs+0IMk85HgSyjhPVlMiwZRiLIQLfJGKMf7elNNiqna37RZEsgJJfJX8Q==
+
 "@cypress/commit-info@2.2.0":
  version "2.2.0"
  resolved "https://registry.yarnpkg.com/@cypress/commit-info/-/commit-info-2.2.0.tgz#6086d478975edb7ac7c9ffdd5cfd5be2b9fe44f2"