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/reporter/cypress/e2e/unit/formatted_message.cy.ts b/packages/reporter/cypress/e2e/unit/formatted_message.cy.ts
new file mode 100644
index 000000000000..63fb13e1c1ab
--- /dev/null
+++ b/packages/reporter/cypress/e2e/unit/formatted_message.cy.ts
@@ -0,0 +1,30 @@
+import { formattedMessage } from '../../../src/commands/command'
+
+describe('formattedMessage', () => {
+  it('returns empty string when message is falsy', () => {
+    const result = formattedMessage('')
+
+    expect(result).to.equal('')
+  })
+
+  it('maintains special characters when using "to match"', () => {
+    const specialMessage = 'expected **__*abcdef*__** to match /__.*abcdef.*__/'
+    const result = formattedMessage(specialMessage)
+
+    expect(result).to.equal('expected <strong><strong><em>abcdef</em></strong></strong> to match <strong>/__.*abcdef.*__/</strong>')
+  })
+
+  it('maintains special characters when using "to contain"', () => {
+    const specialMessage = 'expected ***abcdef*** to equal ***abcdef***'
+    const result = formattedMessage(specialMessage)
+
+    expect(result).to.equal('expected <em><strong>abcdef</strong></em> to equal <strong>***abcdef***</strong>')
+  })
+
+  it('does NOT maintain special characters when "to equal" or "to match" are not in assertion', () => {
+    const specialMessage = 'expected ***abcdef*** to contain ***abcdef***'
+    const result = formattedMessage(specialMessage)
+
+    expect(result).to.equal('expected <em><strong>abcdef</strong></em> to contain <em><strong>abcdef</strong></em>')
+  })
+})
diff --git a/packages/reporter/src/commands/command.tsx b/packages/reporter/src/commands/command.tsx
index 84a4f1c07c3d..4e2f19395ee7 100644
--- a/packages/reporter/src/commands/command.tsx
+++ b/packages/reporter/src/commands/command.tsx
@@ -25,7 +25,21 @@ const md = new Markdown()
 
 const displayName = (model: CommandModel) => model.displayName || model.name
 const nameClassName = (name: string) => name.replace(/(\s+)/g, '-')
-const formattedMessage = (message: string) => message ? md.renderInline(message) : ''
+
+export const formattedMessage = (message: string) => {
+  if (!message) return ''
+
+  const searchText = ['to match', 'to equal']
+  const regex = new RegExp(searchText.join('|'))
+  const split = message.split(regex)
+  const matchingText = searchText.find((text) => message.includes(text))
+  const textToConvert = [split[0].trim(), ...(matchingText ? [matchingText] : [])].join(' ')
+  const converted = md.renderInline(textToConvert)
+  const assertion = (split[1] && [`<strong>${split[1].trim()}</strong>`]) || []
+
+  return [converted, ...assertion].join(' ')
+}
+
 const invisibleMessage = (model: CommandModel) => {
   return model.numElements > 1 ?
     'One or more matched elements are not visible.' :
diff --git a/packages/reporter/src/errors/test-error.tsx b/packages/reporter/src/errors/test-error.tsx
index a4b0d1a80908..58adae81a397 100644
--- a/packages/reporter/src/errors/test-error.tsx
+++ b/packages/reporter/src/errors/test-error.tsx
@@ -12,6 +12,7 @@ import FlashOnClick from '../lib/flash-on-click'
 import { onEnterOrSpace } from '../lib/util'
 import Attempt from '../attempts/attempt-model'
 import Command from '../commands/command-model'
+import { formattedMessage } from '../commands/command'
 
 import WarningIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/warning_x8.svg'
 import TerminalIcon from '-!react-svg-loader!@packages/frontend-shared/src/assets/icons/technology-terminal_x16.svg'
@@ -54,10 +55,6 @@ const TestError = observer((props: TestErrorProps) => {
     onPrint()
   }
 
-  const formattedMessage = (message?: string) => {
-    return message ? md.renderInline(message) : ''
-  }
-
   const { err } = props.model
   const { codeFrame } = err
 
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)
     })