diff --git a/cli/types/cypress.d.ts b/cli/types/cypress.d.ts
index 334db2f7cb69..6a36bc3f89a8 100644
--- a/cli/types/cypress.d.ts
+++ b/cli/types/cypress.d.ts
@@ -2941,7 +2941,7 @@ declare namespace Cypress {
     /**
      * Hosts mappings to IP addresses.
      */
-    hosts: null | string[]
+    hosts: null | {[key: string]: string}
     /**
      * Whether Cypress was launched via 'cypress open' (interactive mode)
      */
diff --git a/packages/app/src/specs/SpecsListHeader.vue b/packages/app/src/specs/SpecsListHeader.vue
index bd791c939eb4..5567cf841da1 100644
--- a/packages/app/src/specs/SpecsListHeader.vue
+++ b/packages/app/src/specs/SpecsListHeader.vue
@@ -48,7 +48,7 @@
         data-cy="new-spec-button"
         :prefix-icon="IconAdd"
         prefix-icon-class="justify-center text-lg text-center icon-light-transparent icon-dark-white"
-        class="min-w-127px"
+        class="min-w-134px"
         size="lg"
         @click="emit('showCreateSpecModal')"
       >
diff --git a/packages/app/src/specs/SpecsListRowItem.vue b/packages/app/src/specs/SpecsListRowItem.vue
index c1a090d2f523..e85b7769b74b 100644
--- a/packages/app/src/specs/SpecsListRowItem.vue
+++ b/packages/app/src/specs/SpecsListRowItem.vue
@@ -27,7 +27,7 @@
         <div>
           <slot name="latest-runs" />
         </div>
-        <div class="invisible md:col-span-2 md:visible">
+        <div class="hidden md:col-span-2 md:block">
           <slot name="average-duration" />
         </div>
       </template>
diff --git a/packages/frontend-shared/src/gql-components/HeaderBarContent.cy.tsx b/packages/frontend-shared/src/gql-components/HeaderBarContent.cy.tsx
index 5583c3e53627..60ac66dad2cf 100644
--- a/packages/frontend-shared/src/gql-components/HeaderBarContent.cy.tsx
+++ b/packages/frontend-shared/src/gql-components/HeaderBarContent.cy.tsx
@@ -162,6 +162,44 @@ describe('<HeaderBarContent />', { viewportWidth: 1000, viewportHeight: 750 }, (
     })
   })
 
+  context('responsive design', () => {
+    beforeEach(() => {
+      cy.mountFragment(HeaderBar_HeaderBarContentFragmentDoc, {
+        onResult: (result) => {
+          result.currentProject = null
+        },
+        render: (gqlVal) => (
+          <div class="border-current border-1 h-700px resize overflow-auto">
+            <HeaderBarContent gql={gqlVal} />
+          </div>
+        ),
+      })
+    })
+
+    // https://github.com/cypress-io/cypress/issues/21842
+    it('shows docs menu correctly on small viewports', () => {
+      // Simulate the small viewport.
+      cy.viewport(767, 800)
+
+      // show docs menu
+      cy.contains('button', text.docsMenu.docsHeading).click()
+
+      // docs menu flex direction is column when viewport width is small
+      cy.findByTestId('docs-menu-container').should('have.css', 'flex-direction', 'column')
+    })
+
+    it('shows docs menu correctly on wider viewports', () => {
+      // Change the viewport size to wide.
+      cy.viewport(768, 800)
+
+      // show docs menu
+      cy.contains('button', text.docsMenu.docsHeading).click()
+
+      // docs menu flex direction is row when viewport width is big enough.
+      cy.findByTestId('docs-menu-container').should('have.css', 'flex-direction', 'row')
+    })
+  })
+
   it('does not show hint when on latest version of Cypress', () => {
     mountFragmentWithData({
       versions: {
diff --git a/packages/frontend-shared/src/gql-components/topnav/TopNav.vue b/packages/frontend-shared/src/gql-components/topnav/TopNav.vue
index fcd4eb48bef5..f1e59710428d 100644
--- a/packages/frontend-shared/src/gql-components/topnav/TopNav.vue
+++ b/packages/frontend-shared/src/gql-components/topnav/TopNav.vue
@@ -143,7 +143,8 @@
     </template>
     <div
       v-if="docsMenuVariant === 'main'"
-      class="flex p-16px gap-24px"
+      data-cy="docs-menu-container"
+      class="flex p-16px gap-24px flex-col md:flex-row"
     >
       <DocsMenuContent
         :current-project-exists="!!props.gql?.currentProject"
diff --git a/packages/launchpad/cypress/e2e/config-files-error-handling.cy.ts b/packages/launchpad/cypress/e2e/config-files-error-handling.cy.ts
index dcac33a363b9..d81e202ea48f 100644
--- a/packages/launchpad/cypress/e2e/config-files-error-handling.cy.ts
+++ b/packages/launchpad/cypress/e2e/config-files-error-handling.cy.ts
@@ -158,6 +158,7 @@ describe('Launchpad: Error System Tests', () => {
   })
 
   it(`clears the error correctly after first 'try again' attempt`, () => {
+    cy.intercept('mutation-Main_ResetErrorsAndLoadConfig').as('resetErrorsAndLoadConfig')
     cy.scaffoldProject('config-with-ts-syntax-error')
     cy.openProject('config-with-ts-syntax-error')
     cy.visitLaunchpad()
@@ -166,6 +167,8 @@ describe('Launchpad: Error System Tests', () => {
     // Try again while the config is still invalid
     cy.findByRole('button', { name: 'Try again' }).click()
 
+    cy.wait('@resetErrorsAndLoadConfig')
+
     // Wait until config error is on screen again
     cy.contains('h1', cy.i18n.launchpadErrors.generic.configErrorTitle)
 
diff --git a/packages/server/lib/server-base.ts b/packages/server/lib/server-base.ts
index 2957f79e9858..d2aba73ed2ab 100644
--- a/packages/server/lib/server-base.ts
+++ b/packages/server/lib/server-base.ts
@@ -357,7 +357,7 @@ export abstract class ServerBase<TSocket extends SocketE2E | SocketCt> {
     return io
   }
 
-  createHosts (hosts: string[] | null = []) {
+  createHosts (hosts: {[key: string]: string} | null = {}) {
     return _.each(hosts, (ip, host) => {
       return evilDns.add(host, ip)
     })