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>