fix: top nav browsers list scroll (#22094)

Author: ZachJW34

packages/app/src/runner/SpecRunnerHeaderOpenMode.vue

@@ -98,9 +98,9 @@
  >
  <!-- disable rule to prevent trailing space from being added to <InlineCodeFragment/> -->
  <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
- <InlineCodeFragment class="text-xs font-medium leading-5">{{ props.gql.configFile }}</InlineCodeFragment>
+ <InlineCodeFragment class="font-medium text-xs leading-5">{{ props.gql.configFile }}</InlineCodeFragment>
  <!-- eslint-disable-next-line vue/singleline-html-element-content-newline -->
- <InlineCodeFragment class="text-xs font-medium leading-5">cy.viewport()</InlineCodeFragment>
+ <InlineCodeFragment class="font-medium text-xs leading-5">cy.viewport()</InlineCodeFragment>
  </i18n-t>
  <div class="flex justify-center">
  <Button

packages/frontend-shared/src/gql-components/HeaderBarContent.cy.tsx

@@ -16,6 +16,8 @@ describe('<HeaderBarContent />', { viewportWidth: 1000, viewportHeight: 750 }, (
  .should('be.visible')
  .click()
 
+ cy.percySnapshot('after browsers open')
+
  cy.contains('Edge Canary')
  .should('be.visible')
  .closest('[data-cy="top-nav-browser-list-item"]')
@@ -24,15 +26,22 @@ describe('<HeaderBarContent />', { viewportWidth: 1000, viewportHeight: 750 }, (
  .should('not.exist')
  })
 
+ cy.get('[data-cy="top-nav-browser-list-item"]').parent()
+ .should('have.class', 'overflow-auto')
+
  cy.contains('Version unsupported')
+ .scrollIntoView()
  .should('be.visible')
  .closest('[data-cy="top-nav-browser-list-item"]')
  .within(() => {
  cy.get('[data-cy="unsupported-browser-tooltip-trigger"]')
  .should('exist')
+ .trigger('mouseenter')
  })
 
- cy.percySnapshot('after browsers open')
+ cy.contains('Unsupported browser').should('be.visible')
+
+ cy.percySnapshot('unsupported browser tooltip')
  }),
 
  it('renders without browser menu by default and other items work', () => {

packages/frontend-shared/src/gql-components/topnav/TopNavList.vue

@@ -30,7 +30,7 @@
  >
  <ul
  v-if="variant !== 'panel'"
- class="flex flex-col"
+ class="flex flex-col max-h-50vh overflow-auto"
  >
  <slot />
  </ul>