From b089dca55d81a22f9ccc46593830c59b72e2b744 Mon Sep 17 00:00:00 2001
From: Eamonn Mansour <47121388+eamansour@users.noreply.github.com>
Date: Wed, 6 May 2026 13:58:05 +0100
Subject: [PATCH 1/3] fix: Add side nav for menu navigation on small screens

Signed-off-by: Eamonn Mansour <47121388+eamansour@users.noreply.github.com>
---
 .../components/headers/LanguageSelector.tsx   |  64 +-
 .../src/components/headers/PageHeader.tsx     |  43 +-
 .../src/components/headers/PageHeaderMenu.tsx |   5 +-
 .../src/components/headers/ThemeSelector.tsx  |  44 +-
 .../src/styles/headers/PageHeader.module.css  |  18 +
 .../src/styles/headers/Selector.module.css    |  51 --
 .../tests/__snapshots__/layout.test.tsx.snap  | 550 +++++++++++-------
 .../components/headers/PageHeader.test.tsx    |  11 +-
 .../components/headers/ThemeSelector.test.tsx |   8 +-
 galasa-ui/src/tests/index.test.tsx            |   7 -
 10 files changed, 437 insertions(+), 364 deletions(-)
 create mode 100644 galasa-ui/src/styles/headers/PageHeader.module.css

diff --git a/galasa-ui/src/components/headers/LanguageSelector.tsx b/galasa-ui/src/components/headers/LanguageSelector.tsx
index b27a2851..06a980ce 100644
--- a/galasa-ui/src/components/headers/LanguageSelector.tsx
+++ b/galasa-ui/src/components/headers/LanguageSelector.tsx
@@ -6,7 +6,7 @@
 
 'use client';
 
-import React, { useState, useTransition } from 'react';
+import { useState, useTransition } from 'react';
 import { OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import { setUserLocale } from '@/utils/locale';
 import { useLocale, useTranslations } from 'next-intl';
@@ -26,7 +26,7 @@ export default function LanguageSelector() {
     languages.find((lang) => lang.value === locale) || languages[0]
   );
 
-  const [isPending, startTransition] = useTransition();
+  const [, startTransition] = useTransition();
   const router = useRouter();
   const translations = useTranslations('LanguageSelector');
 
@@ -46,36 +46,34 @@ export default function LanguageSelector() {
   };
 
   return (
-    <div data-floating-menu-container>
-      <OverflowMenu
-        data-floating-menu-container
-        className={styles.overflowMenu}
-        focusTrap={true}
-        align="bottom"
-        flipped
-        renderIcon={() => <Wikis className={styles.renderIcon} />}
-        size="lg"
-        iconDescription={`${translations('tooltip')}: ${selectedLanguage.text}`}
-        aria-label="Filter menu"
-        tooltipAlignment="center"
-        tooltipPosition="bottom"
-      >
-        {languages.map((language) => (
-          <OverflowMenuItem
-            key={language.id}
-            className={styles.overflowMenuItem}
-            itemText={
-              <div className={styles.overflowMenuItemText}>
-                <span className={styles.languageText}>{language.text}</span>
-                {selectedLanguage.id === language.id && (
-                  <Checkmark size={16} className={styles.checkmark} />
-                )}
-              </div>
-            }
-            onClick={() => handleLanguageChange({ selectedItem: language })}
-          />
-        ))}
-      </OverflowMenu>
-    </div>
+    <OverflowMenu
+      data-floating-menu-container
+      className={styles.overflowMenu}
+      focusTrap={true}
+      align="bottom"
+      flipped
+      renderIcon={() => <Wikis className={styles.renderIcon} />}
+      size="lg"
+      iconDescription={`${translations('tooltip')}: ${selectedLanguage.text}`}
+      aria-label="Filter menu"
+      tooltipAlignment="center"
+      tooltipPosition="bottom"
+    >
+      {languages.map((language) => (
+        <OverflowMenuItem
+          key={language.id}
+          className={styles.overflowMenuItem}
+          itemText={
+            <div className={styles.overflowMenuItemText}>
+              <span className={styles.languageText}>{language.text}</span>
+              {selectedLanguage.id === language.id && (
+                <Checkmark size={16} className={styles.checkmark} />
+              )}
+            </div>
+          }
+          onClick={() => handleLanguageChange({ selectedItem: language })}
+        />
+      ))}
+    </OverflowMenu>
   );
 }
diff --git a/galasa-ui/src/components/headers/PageHeader.tsx b/galasa-ui/src/components/headers/PageHeader.tsx
index d43e62a2..3a93175b 100644
--- a/galasa-ui/src/components/headers/PageHeader.tsx
+++ b/galasa-ui/src/components/headers/PageHeader.tsx
@@ -16,25 +16,40 @@ import {
 import PageHeaderMenu from './PageHeaderMenu';
 import Image from 'next/image';
 import galasaLogo from '@/assets/images/galasaLogo.png';
-import Link from 'next/link';
 import { useFeatureFlags } from '@/contexts/FeatureFlagContext';
 import { FEATURE_FLAGS } from '@/utils/featureFlags';
 import { useTranslations } from 'next-intl';
+import { SideNav } from '@carbon/react';
+import { SideNavItems } from '@carbon/react';
+import { HeaderSideNavItems } from '@carbon/react';
+import { HeaderMenuButton } from '@carbon/react';
+import { useState } from 'react';
+import styles from '@/styles/headers/PageHeader.module.css';
 
 export default function PageHeader({ galasaServiceName }: { galasaServiceName: string }) {
   const { isFeatureEnabled } = useFeatureFlags();
   const translations = useTranslations('PageHeader');
+  const [isSideNavExpanded, setIsSideNavExpanded] = useState(false);
+
+  const onClickSideNavExpand = () => {
+    setIsSideNavExpanded(!isSideNavExpanded);
+  };
+
   return (
     <Theme theme="g90">
       <Header aria-label="Galasa Ecosystem">
         <SkipToContent />
-
-        <Link href={'/'} style={{ paddingLeft: '0.5rem' }}>
-          <Image src={galasaLogo} width={28} height={28} alt="Galasa logo" />
-        </Link>
+        <HeaderMenuButton
+          aria-label={isSideNavExpanded ? 'Close menu' : 'Open menu'}
+          onClick={onClickSideNavExpand}
+          isActive={isSideNavExpanded}
+          aria-expanded={isSideNavExpanded}
+        />
 
         <HeaderName href="/" prefix="">
-          Galasa
+          <span className={styles.headerName} aria-label="Header name">
+            <Image src={galasaLogo} width={28} height={28} alt="Galasa logo" /> Galasa
+          </span>
         </HeaderName>
 
         <HeaderNavigation aria-label="Galasa menu bar navigation">
@@ -44,6 +59,22 @@ export default function PageHeader({ galasaServiceName }: { galasaServiceName: s
           )}
         </HeaderNavigation>
 
+        <SideNav
+          aria-label="Side navigation"
+          expanded={isSideNavExpanded}
+          isPersistent={false}
+          onSideNavBlur={onClickSideNavExpand}
+        >
+          <SideNavItems>
+            <HeaderSideNavItems>
+              <HeaderMenuItem href="/users">{translations('users')}</HeaderMenuItem>
+              {isFeatureEnabled(FEATURE_FLAGS.TEST_RUNS) && (
+                <HeaderMenuItem href="/test-runs">{translations('testRuns')}</HeaderMenuItem>
+              )}
+            </HeaderSideNavItems>
+          </SideNavItems>
+        </SideNav>
+
         <PageHeaderMenu galasaServiceName={galasaServiceName} />
       </Header>
     </Theme>
diff --git a/galasa-ui/src/components/headers/PageHeaderMenu.tsx b/galasa-ui/src/components/headers/PageHeaderMenu.tsx
index e633d03d..fb8d6b6b 100644
--- a/galasa-ui/src/components/headers/PageHeaderMenu.tsx
+++ b/galasa-ui/src/components/headers/PageHeaderMenu.tsx
@@ -12,6 +12,7 @@ import { handleDeleteCookieApiOperation } from '@/utils/logout';
 import LanguageSelector from './LanguageSelector';
 import { useTranslations } from 'next-intl';
 import ThemeSelector from './ThemeSelector';
+import styles from '@/styles/headers/PageHeader.module.css';
 
 function PageHeaderMenu({ galasaServiceName }: { galasaServiceName: string }) {
   const translations = useTranslations('PageHeaderMenu');
@@ -30,7 +31,9 @@ function PageHeaderMenu({ galasaServiceName }: { galasaServiceName: string }) {
     <HeaderGlobalBar data-testid="header-menu">
       <LanguageSelector />
       <ThemeSelector />
-      <HeaderName prefix="">{galasaServiceName}</HeaderName>
+      <HeaderName id={styles.serviceName} prefix="">
+        {galasaServiceName}
+      </HeaderName>
       <OverflowMenu
         data-floating-menu-container
         selectorPrimaryFocus={'.optionOne'}
diff --git a/galasa-ui/src/components/headers/ThemeSelector.tsx b/galasa-ui/src/components/headers/ThemeSelector.tsx
index 7c796652..1e0689f6 100644
--- a/galasa-ui/src/components/headers/ThemeSelector.tsx
+++ b/galasa-ui/src/components/headers/ThemeSelector.tsx
@@ -6,12 +6,10 @@
 
 'use client';
 
-import React, { useTransition } from 'react';
-import styles from '@/styles/headers/Selector.module.css';
+import { useTransition } from 'react';
 import { ThemeType, useTheme } from '@/contexts/ThemeContext';
 import { Sun, Moon, Laptop } from '@carbon/icons-react';
-import { Tooltip } from '@carbon/react';
-import { Theme } from '@carbon/react';
+import { HeaderGlobalAction } from '@carbon/react';
 
 const themeOptions: { id: ThemeType; label: string; icon: React.ReactNode; tooltip: string }[] = [
   { id: 'light', label: 'Light', icon: <Sun size={20} />, tooltip: 'Switch to light mode' },
@@ -26,42 +24,26 @@ const themeOptions: { id: ThemeType; label: string; icon: React.ReactNode; toolt
 
 export default function ThemeSelector() {
   const { theme, setTheme } = useTheme();
-  const [isPending, startTransition] = useTransition();
+  const [, startTransition] = useTransition();
   const idx = themeOptions.findIndex((o) => o.id === theme);
   const currentTheme = themeOptions[idx] || themeOptions[0];
   const next = themeOptions[(idx + 1) % themeOptions.length];
 
   const cycleTheme = () => {
     startTransition(() => {
-      setTheme(next.id as ThemeType);
+      setTheme(next.id);
     });
   };
-  let current: 'g10' | 'g90';
-
-  if (theme === 'light') {
-    current = 'g10';
-  } else if (theme === 'dark') {
-    current = 'g90';
-  } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-    current = 'g90';
-  } else {
-    current = 'g10';
-  }
 
   return (
-    <div className={styles.themeSwitcher}>
-      <Theme theme={current} className={styles.themeContainer}>
-        <Tooltip label={next.tooltip} align="bottom">
-          <button
-            onClick={cycleTheme}
-            className={styles.iconButton + (currentTheme.id === theme ? ` ${styles.active}` : '')}
-            disabled={isPending}
-            aria-label={currentTheme.label}
-          >
-            {currentTheme.icon}
-          </button>
-        </Tooltip>
-      </Theme>
-    </div>
+    <HeaderGlobalAction
+      data-floating-menu-container
+      aria-label={next.tooltip}
+      tooltipAlignment="center"
+      tooltipPosition="bottom"
+      onClick={cycleTheme}
+    >
+      {currentTheme.icon}
+    </HeaderGlobalAction>
   );
 }
diff --git a/galasa-ui/src/styles/headers/PageHeader.module.css b/galasa-ui/src/styles/headers/PageHeader.module.css
new file mode 100644
index 00000000..0de66696
--- /dev/null
+++ b/galasa-ui/src/styles/headers/PageHeader.module.css
@@ -0,0 +1,18 @@
+/*
+ * Copyright contributors to the Galasa project
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+@media (max-width: 768px) {
+  #serviceName {
+      display: none;
+      padding: 0;
+  }
+}
+
+.headerName {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
diff --git a/galasa-ui/src/styles/headers/Selector.module.css b/galasa-ui/src/styles/headers/Selector.module.css
index 0fecb14d..873e02e9 100644
--- a/galasa-ui/src/styles/headers/Selector.module.css
+++ b/galasa-ui/src/styles/headers/Selector.module.css
@@ -3,57 +3,6 @@
  *
  * SPDX-License-Identifier: EPL-2.0
  */
-.container {
-  margin-right: 1rem;
-  display: flex; /* Removed the extra comma */
-  align-items: center;
-}
-
-.language {
-  margin-right: 0.5rem;
-  fill: white;
-}
-
-.dropdown {
-  background-color: transparent; /* Corrected to background-color */
-  color: white;
-  width: 120px;
-}
-
-.themeSwitcher {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.25rem 0.5rem;
-  width: fit-content;
-  background-color: #262626;
-}
-
-.iconButton {
-  background: #262626;
-  border: none;
-  padding: 0.85rem;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition:
-    background-color 0.2s ease,
-    color 0.2s ease;
-}
-
-.iconButton:hover {
-  background-color: #474747;
-}
-
-.iconButton:disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.active {
-  color: var(--cds-icon-on-color);
-}
 
 .overflowMenu {
   outline: none !important;
diff --git a/galasa-ui/src/tests/__snapshots__/layout.test.tsx.snap b/galasa-ui/src/tests/__snapshots__/layout.test.tsx.snap
index abe98588..a7eb21b7 100644
--- a/galasa-ui/src/tests/__snapshots__/layout.test.tsx.snap
+++ b/galasa-ui/src/tests/__snapshots__/layout.test.tsx.snap
@@ -19,28 +19,59 @@ exports[`Layout renders the web UI layout 1`] = `
           >
             Skip to main content
           </a>
-          <a
-            href="/"
-            style="padding-left: 0.5rem;"
+          <button
+            aria-expanded="false"
+            aria-label="Open menu"
+            class="cds--header__action cds--header__menu-trigger cds--header__menu-toggle cds--header__menu-toggle__hidden"
+            title="Open menu"
+            type="button"
           >
-            <img
-              alt="Galasa logo"
-              data-nimg="1"
-              decoding="async"
-              height="28"
-              loading="lazy"
-              src="/_next/image?url=%2Fimg.jpg&w=64&q=75"
-              srcset="/_next/image?url=%2Fimg.jpg&w=32&q=75 1x, /_next/image?url=%2Fimg.jpg&w=64&q=75 2x"
-              style="color: transparent;"
-              width="28"
-            />
-          </a>
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              focusable="false"
+              height="20"
+              preserveAspectRatio="xMidYMid meet"
+              viewBox="0 0 20 20"
+              width="20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M2 14.8H18V16H2z"
+              />
+              <path
+                d="M2 11.2H18V12.399999999999999H2z"
+              />
+              <path
+                d="M2 7.6H18V8.799999999999999H2z"
+              />
+              <path
+                d="M2 4H18V5.2H2z"
+              />
+            </svg>
+          </button>
           <a
             class="cds--header__name"
             href="/"
           >
             <span>
-              Galasa
+              <span
+                aria-label="Header name"
+                class="headerName"
+              >
+                <img
+                  alt="Galasa logo"
+                  data-nimg="1"
+                  decoding="async"
+                  height="28"
+                  loading="lazy"
+                  src="/_next/image?url=%2Fimg.jpg&w=64&q=75"
+                  srcset="/_next/image?url=%2Fimg.jpg&w=32&q=75 1x, /_next/image?url=%2Fimg.jpg&w=64&q=75 2x"
+                  style="color: transparent;"
+                  width="28"
+                />
+                 Galasa
+              </span>
             </span>
           </a>
           <nav
@@ -65,124 +96,146 @@ exports[`Layout renders the web UI layout 1`] = `
               </li>
             </ul>
           </nav>
+          <div
+            class="cds--side-nav__overlay"
+          />
+          <nav
+            aria-label="Side navigation"
+            class="cds--side-nav__navigation cds--side-nav cds--side-nav--ux cds--side-nav--hidden"
+            inert=""
+            tabindex="-1"
+          >
+            <ul
+              class="cds--side-nav__items"
+            >
+              <ul
+                class="cds--side-nav__header-navigation"
+              >
+                <li>
+                  <a
+                    class="cds--header__menu-item"
+                    href="/users"
+                    tabindex="0"
+                  >
+                    <span
+                      class="cds--text-truncate--end"
+                    >
+                      Users
+                    </span>
+                  </a>
+                </li>
+              </ul>
+            </ul>
+          </nav>
           <div
             class="cds--header__global"
             data-testid="header-menu"
           >
-            <div
-              data-floating-menu-container="true"
+            <span
+              class="cds--overflow-menu__wrapper"
             >
               <span
-                class="cds--overflow-menu__wrapper"
+                class="cds--popover-container cds--popover--caret cds--popover--high-contrast cds--popover--bottom cds--tooltip cds--icon-tooltip"
               >
-                <span
-                  class="cds--popover-container cds--popover--caret cds--popover--high-contrast cds--popover--bottom cds--tooltip cds--icon-tooltip"
+                <div
+                  class="cds--tooltip-trigger__wrapper"
                 >
-                  <div
-                    class="cds--tooltip-trigger__wrapper"
+                  <button
+                    aria-expanded="false"
+                    aria-haspopup="true"
+                    aria-labelledby="tooltip-_r_1_"
+                    class="overflowMenu cds--overflow-menu cds--overflow-menu--lg cds--btn cds--btn--lg cds--layout--size-lg cds--btn--ghost cds--btn--icon-only"
+                    data-floating-menu-container="true"
+                    tooltipalignment="center"
+                    tooltipposition="bottom"
+                    type="button"
                   >
-                    <button
-                      aria-expanded="false"
-                      aria-haspopup="true"
-                      aria-labelledby="tooltip-_r_1_"
-                      class="overflowMenu cds--overflow-menu cds--overflow-menu--lg cds--btn cds--btn--lg cds--layout--size-lg cds--btn--ghost cds--btn--icon-only"
-                      data-floating-menu-container="true"
-                      tooltipalignment="center"
-                      tooltipposition="bottom"
-                      type="button"
+                    <svg
+                      aria-hidden="true"
+                      class="renderIcon"
+                      fill="currentColor"
+                      focusable="false"
+                      height="16"
+                      preserveAspectRatio="xMidYMid meet"
+                      viewBox="0 0 32 32"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
                     >
-                      <svg
-                        aria-hidden="true"
-                        class="renderIcon"
-                        fill="currentColor"
-                        focusable="false"
-                        height="16"
-                        preserveAspectRatio="xMidYMid meet"
-                        viewBox="0 0 32 32"
-                        width="16"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2ZM28,15H22A24.26,24.26,0,0,0,19.21,4.45,12,12,0,0,1,28,15ZM16,28a5,5,0,0,1-.67,0A21.85,21.85,0,0,1,12,17H20a21.85,21.85,0,0,1-3.3,11A5,5,0,0,1,16,28ZM12,15a21.85,21.85,0,0,1,3.3-11,6,6,0,0,1,1.34,0A21.85,21.85,0,0,1,20,15Zm.76-10.55A24.26,24.26,0,0,0,10,15h-6A12,12,0,0,1,12.79,4.45ZM4.05,17h6a24.26,24.26,0,0,0,2.75,10.55A12,12,0,0,1,4.05,17ZM19.21,27.55A24.26,24.26,0,0,0,22,17h6A12,12,0,0,1,19.21,27.55Z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
+                      <path
+                        d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2ZM28,15H22A24.26,24.26,0,0,0,19.21,4.45,12,12,0,0,1,28,15ZM16,28a5,5,0,0,1-.67,0A21.85,21.85,0,0,1,12,17H20a21.85,21.85,0,0,1-3.3,11A5,5,0,0,1,16,28ZM12,15a21.85,21.85,0,0,1,3.3-11,6,6,0,0,1,1.34,0A21.85,21.85,0,0,1,20,15Zm.76-10.55A24.26,24.26,0,0,0,10,15h-6A12,12,0,0,1,12.79,4.45ZM4.05,17h6a24.26,24.26,0,0,0,2.75,10.55A12,12,0,0,1,4.05,17ZM19.21,27.55A24.26,24.26,0,0,0,22,17h6A12,12,0,0,1,19.21,27.55Z"
+                      />
+                    </svg>
+                  </button>
+                </div>
+                <span
+                  aria-hidden="true"
+                  class="cds--popover"
+                  id="tooltip-_r_1_"
+                  role="tooltip"
+                >
                   <span
-                    aria-hidden="true"
-                    class="cds--popover"
-                    id="tooltip-_r_1_"
-                    role="tooltip"
+                    class="cds--popover-content cds--tooltip-content"
                   >
-                    <span
-                      class="cds--popover-content cds--tooltip-content"
-                    >
-                      Translated tooltip: English
-                    </span>
-                    <span
-                      class="cds--popover-caret"
-                    />
+                    Translated tooltip: English
                   </span>
+                  <span
+                    class="cds--popover-caret"
+                  />
                 </span>
               </span>
-            </div>
-            <div
-              class="themeSwitcher"
+            </span>
+            <span
+              class="cds--popover-container cds--popover--caret cds--popover--high-contrast cds--popover--bottom cds--tooltip cds--icon-tooltip"
             >
               <div
-                class="themeContainer cds--g90 cds--layer-one"
+                class="cds--tooltip-trigger__wrapper"
               >
-                <span
-                  class="cds--popover-container cds--popover--caret cds--popover--high-contrast cds--popover--bottom cds--tooltip"
+                <button
+                  aria-label="Switch to light mode"
+                  aria-labelledby="tooltip-_r_5_"
+                  class="cds--header__action cds--btn cds--btn--lg cds--layout--size-lg cds--btn--ghost cds--btn--icon-only"
+                  data-floating-menu-container="true"
+                  type="button"
                 >
-                  <div
-                    class="cds--tooltip-trigger__wrapper"
-                  >
-                    <button
-                      aria-label="System"
-                      aria-labelledby="tooltip-_r_4_"
-                      class="iconButton active"
-                    >
-                      <svg
-                        aria-hidden="true"
-                        fill="currentColor"
-                        focusable="false"
-                        height="20"
-                        preserveAspectRatio="xMidYMid meet"
-                        viewBox="0 0 32 32"
-                        width="20"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M26,24H6a2.0023,2.0023,0,0,1-2-2V8A2.002,2.002,0,0,1,6,6H26a2.0023,2.0023,0,0,1,2,2V22A2.0027,2.0027,0,0,1,26,24ZM6,8V22H26V8Z"
-                          transform="translate(0 .005)"
-                        />
-                        <path
-                          d="M2 26.005H30V28.005H2z"
-                        />
-                      </svg>
-                    </button>
-                  </div>
-                  <span
+                  <svg
                     aria-hidden="true"
-                    class="cds--popover"
-                    id="tooltip-_r_4_"
-                    role="tooltip"
+                    fill="currentColor"
+                    focusable="false"
+                    height="20"
+                    preserveAspectRatio="xMidYMid meet"
+                    viewBox="0 0 32 32"
+                    width="20"
+                    xmlns="http://www.w3.org/2000/svg"
                   >
-                    <span
-                      class="cds--popover-content cds--tooltip-content"
-                    >
-                      Switch to light mode
-                    </span>
-                    <span
-                      class="cds--popover-caret"
+                    <path
+                      d="M26,24H6a2.0023,2.0023,0,0,1-2-2V8A2.002,2.002,0,0,1,6,6H26a2.0023,2.0023,0,0,1,2,2V22A2.0027,2.0027,0,0,1,26,24ZM6,8V22H26V8Z"
+                      transform="translate(0 .005)"
                     />
-                  </span>
-                </span>
+                    <path
+                      d="M2 26.005H30V28.005H2z"
+                    />
+                  </svg>
+                </button>
               </div>
-            </div>
+              <span
+                aria-hidden="true"
+                class="cds--popover"
+                id="tooltip-_r_5_"
+                role="tooltip"
+              >
+                <span
+                  class="cds--popover-content cds--tooltip-content"
+                >
+                  Switch to light mode
+                </span>
+                <span
+                  class="cds--popover-caret"
+                />
+              </span>
+            </span>
             <a
               class="cds--header__name"
+              id="serviceName"
             >
               <span>
                 Galasa Service
@@ -200,7 +253,7 @@ exports[`Layout renders the web UI layout 1`] = `
                   <button
                     aria-expanded="false"
                     aria-haspopup="true"
-                    aria-labelledby="tooltip-_r_7_"
+                    aria-labelledby="tooltip-_r_9_"
                     class="cds--overflow-menu cds--overflow-menu--lg cds--btn cds--btn--lg cds--layout--size-lg cds--btn--ghost cds--btn--icon-only"
                     data-floating-menu-container="true"
                     data-testid="menu-btn"
@@ -230,7 +283,7 @@ exports[`Layout renders the web UI layout 1`] = `
                 <span
                   aria-hidden="true"
                   class="cds--popover"
-                  id="tooltip-_r_7_"
+                  id="tooltip-_r_9_"
                   role="tooltip"
                 >
                   <span
@@ -285,28 +338,59 @@ exports[`Layout renders the web UI layout 1`] = `
         >
           Skip to main content
         </a>
-        <a
-          href="/"
-          style="padding-left: 0.5rem;"
+        <button
+          aria-expanded="false"
+          aria-label="Open menu"
+          class="cds--header__action cds--header__menu-trigger cds--header__menu-toggle cds--header__menu-toggle__hidden"
+          title="Open menu"
+          type="button"
         >
-          <img
-            alt="Galasa logo"
-            data-nimg="1"
-            decoding="async"
-            height="28"
-            loading="lazy"
-            src="/_next/image?url=%2Fimg.jpg&w=64&q=75"
-            srcset="/_next/image?url=%2Fimg.jpg&w=32&q=75 1x, /_next/image?url=%2Fimg.jpg&w=64&q=75 2x"
-            style="color: transparent;"
-            width="28"
-          />
-        </a>
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            focusable="false"
+            height="20"
+            preserveAspectRatio="xMidYMid meet"
+            viewBox="0 0 20 20"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M2 14.8H18V16H2z"
+            />
+            <path
+              d="M2 11.2H18V12.399999999999999H2z"
+            />
+            <path
+              d="M2 7.6H18V8.799999999999999H2z"
+            />
+            <path
+              d="M2 4H18V5.2H2z"
+            />
+          </svg>
+        </button>
         <a
           class="cds--header__name"
           href="/"
         >
           <span>
-            Galasa
+            <span
+              aria-label="Header name"
+              class="headerName"
+            >
+              <img
+                alt="Galasa logo"
+                data-nimg="1"
+                decoding="async"
+                height="28"
+                loading="lazy"
+                src="/_next/image?url=%2Fimg.jpg&w=64&q=75"
+                srcset="/_next/image?url=%2Fimg.jpg&w=32&q=75 1x, /_next/image?url=%2Fimg.jpg&w=64&q=75 2x"
+                style="color: transparent;"
+                width="28"
+              />
+               Galasa
+            </span>
           </span>
         </a>
         <nav
@@ -331,124 +415,146 @@ exports[`Layout renders the web UI layout 1`] = `
             </li>
           </ul>
         </nav>
+        <div
+          class="cds--side-nav__overlay"
+        />
+        <nav
+          aria-label="Side navigation"
+          class="cds--side-nav__navigation cds--side-nav cds--side-nav--ux cds--side-nav--hidden"
+          inert=""
+          tabindex="-1"
+        >
+          <ul
+            class="cds--side-nav__items"
+          >
+            <ul
+              class="cds--side-nav__header-navigation"
+            >
+              <li>
+                <a
+                  class="cds--header__menu-item"
+                  href="/users"
+                  tabindex="0"
+                >
+                  <span
+                    class="cds--text-truncate--end"
+                  >
+                    Users
+                  </span>
+                </a>
+              </li>
+            </ul>
+          </ul>
+        </nav>
         <div
           class="cds--header__global"
           data-testid="header-menu"
         >
-          <div
-            data-floating-menu-container="true"
+          <span
+            class="cds--overflow-menu__wrapper"
           >
             <span
-              class="cds--overflow-menu__wrapper"
+              class="cds--popover-container cds--popover--caret cds--popover--high-contrast cds--popover--bottom cds--tooltip cds--icon-tooltip"
             >
-              <span
-                class="cds--popover-container cds--popover--caret cds--popover--high-contrast cds--popover--bottom cds--tooltip cds--icon-tooltip"
+              <div
+                class="cds--tooltip-trigger__wrapper"
               >
-                <div
-                  class="cds--tooltip-trigger__wrapper"
+                <button
+                  aria-expanded="false"
+                  aria-haspopup="true"
+                  aria-labelledby="tooltip-_r_1_"
+                  class="overflowMenu cds--overflow-menu cds--overflow-menu--lg cds--btn cds--btn--lg cds--layout--size-lg cds--btn--ghost cds--btn--icon-only"
+                  data-floating-menu-container="true"
+                  tooltipalignment="center"
+                  tooltipposition="bottom"
+                  type="button"
                 >
-                  <button
-                    aria-expanded="false"
-                    aria-haspopup="true"
-                    aria-labelledby="tooltip-_r_1_"
-                    class="overflowMenu cds--overflow-menu cds--overflow-menu--lg cds--btn cds--btn--lg cds--layout--size-lg cds--btn--ghost cds--btn--icon-only"
-                    data-floating-menu-container="true"
-                    tooltipalignment="center"
-                    tooltipposition="bottom"
-                    type="button"
+                  <svg
+                    aria-hidden="true"
+                    class="renderIcon"
+                    fill="currentColor"
+                    focusable="false"
+                    height="16"
+                    preserveAspectRatio="xMidYMid meet"
+                    viewBox="0 0 32 32"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
                   >
-                    <svg
-                      aria-hidden="true"
-                      class="renderIcon"
-                      fill="currentColor"
-                      focusable="false"
-                      height="16"
-                      preserveAspectRatio="xMidYMid meet"
-                      viewBox="0 0 32 32"
-                      width="16"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2ZM28,15H22A24.26,24.26,0,0,0,19.21,4.45,12,12,0,0,1,28,15ZM16,28a5,5,0,0,1-.67,0A21.85,21.85,0,0,1,12,17H20a21.85,21.85,0,0,1-3.3,11A5,5,0,0,1,16,28ZM12,15a21.85,21.85,0,0,1,3.3-11,6,6,0,0,1,1.34,0A21.85,21.85,0,0,1,20,15Zm.76-10.55A24.26,24.26,0,0,0,10,15h-6A12,12,0,0,1,12.79,4.45ZM4.05,17h6a24.26,24.26,0,0,0,2.75,10.55A12,12,0,0,1,4.05,17ZM19.21,27.55A24.26,24.26,0,0,0,22,17h6A12,12,0,0,1,19.21,27.55Z"
-                      />
-                    </svg>
-                  </button>
-                </div>
+                    <path
+                      d="M16,2A14,14,0,1,0,30,16,14,14,0,0,0,16,2ZM28,15H22A24.26,24.26,0,0,0,19.21,4.45,12,12,0,0,1,28,15ZM16,28a5,5,0,0,1-.67,0A21.85,21.85,0,0,1,12,17H20a21.85,21.85,0,0,1-3.3,11A5,5,0,0,1,16,28ZM12,15a21.85,21.85,0,0,1,3.3-11,6,6,0,0,1,1.34,0A21.85,21.85,0,0,1,20,15Zm.76-10.55A24.26,24.26,0,0,0,10,15h-6A12,12,0,0,1,12.79,4.45ZM4.05,17h6a24.26,24.26,0,0,0,2.75,10.55A12,12,0,0,1,4.05,17ZM19.21,27.55A24.26,24.26,0,0,0,22,17h6A12,12,0,0,1,19.21,27.55Z"
+                    />
+                  </svg>
+                </button>
+              </div>
+              <span
+                aria-hidden="true"
+                class="cds--popover"
+                id="tooltip-_r_1_"
+                role="tooltip"
+              >
                 <span
-                  aria-hidden="true"
-                  class="cds--popover"
-                  id="tooltip-_r_1_"
-                  role="tooltip"
+                  class="cds--popover-content cds--tooltip-content"
                 >
-                  <span
-                    class="cds--popover-content cds--tooltip-content"
-                  >
-                    Translated tooltip: English
-                  </span>
-                  <span
-                    class="cds--popover-caret"
-                  />
+                  Translated tooltip: English
                 </span>
+                <span
+                  class="cds--popover-caret"
+                />
               </span>
             </span>
-          </div>
-          <div
-            class="themeSwitcher"
+          </span>
+          <span
+            class="cds--popover-container cds--popover--caret cds--popover--high-contrast cds--popover--bottom cds--tooltip cds--icon-tooltip"
           >
             <div
-              class="themeContainer cds--g90 cds--layer-one"
+              class="cds--tooltip-trigger__wrapper"
             >
-              <span
-                class="cds--popover-container cds--popover--caret cds--popover--high-contrast cds--popover--bottom cds--tooltip"
+              <button
+                aria-label="Switch to light mode"
+                aria-labelledby="tooltip-_r_5_"
+                class="cds--header__action cds--btn cds--btn--lg cds--layout--size-lg cds--btn--ghost cds--btn--icon-only"
+                data-floating-menu-container="true"
+                type="button"
               >
-                <div
-                  class="cds--tooltip-trigger__wrapper"
-                >
-                  <button
-                    aria-label="System"
-                    aria-labelledby="tooltip-_r_4_"
-                    class="iconButton active"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      fill="currentColor"
-                      focusable="false"
-                      height="20"
-                      preserveAspectRatio="xMidYMid meet"
-                      viewBox="0 0 32 32"
-                      width="20"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M26,24H6a2.0023,2.0023,0,0,1-2-2V8A2.002,2.002,0,0,1,6,6H26a2.0023,2.0023,0,0,1,2,2V22A2.0027,2.0027,0,0,1,26,24ZM6,8V22H26V8Z"
-                        transform="translate(0 .005)"
-                      />
-                      <path
-                        d="M2 26.005H30V28.005H2z"
-                      />
-                    </svg>
-                  </button>
-                </div>
-                <span
+                <svg
                   aria-hidden="true"
-                  class="cds--popover"
-                  id="tooltip-_r_4_"
-                  role="tooltip"
+                  fill="currentColor"
+                  focusable="false"
+                  height="20"
+                  preserveAspectRatio="xMidYMid meet"
+                  viewBox="0 0 32 32"
+                  width="20"
+                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  <span
-                    class="cds--popover-content cds--tooltip-content"
-                  >
-                    Switch to light mode
-                  </span>
-                  <span
-                    class="cds--popover-caret"
+                  <path
+                    d="M26,24H6a2.0023,2.0023,0,0,1-2-2V8A2.002,2.002,0,0,1,6,6H26a2.0023,2.0023,0,0,1,2,2V22A2.0027,2.0027,0,0,1,26,24ZM6,8V22H26V8Z"
+                    transform="translate(0 .005)"
                   />
-                </span>
-              </span>
+                  <path
+                    d="M2 26.005H30V28.005H2z"
+                  />
+                </svg>
+              </button>
             </div>
-          </div>
+            <span
+              aria-hidden="true"
+              class="cds--popover"
+              id="tooltip-_r_5_"
+              role="tooltip"
+            >
+              <span
+                class="cds--popover-content cds--tooltip-content"
+              >
+                Switch to light mode
+              </span>
+              <span
+                class="cds--popover-caret"
+              />
+            </span>
+          </span>
           <a
             class="cds--header__name"
+            id="serviceName"
           >
             <span>
               Galasa Service
@@ -466,7 +572,7 @@ exports[`Layout renders the web UI layout 1`] = `
                 <button
                   aria-expanded="false"
                   aria-haspopup="true"
-                  aria-labelledby="tooltip-_r_7_"
+                  aria-labelledby="tooltip-_r_9_"
                   class="cds--overflow-menu cds--overflow-menu--lg cds--btn cds--btn--lg cds--layout--size-lg cds--btn--ghost cds--btn--icon-only"
                   data-floating-menu-container="true"
                   data-testid="menu-btn"
@@ -496,7 +602,7 @@ exports[`Layout renders the web UI layout 1`] = `
               <span
                 aria-hidden="true"
                 class="cds--popover"
-                id="tooltip-_r_7_"
+                id="tooltip-_r_9_"
                 role="tooltip"
               >
                 <span
diff --git a/galasa-ui/src/tests/components/headers/PageHeader.test.tsx b/galasa-ui/src/tests/components/headers/PageHeader.test.tsx
index c5282558..4baf67e4 100644
--- a/galasa-ui/src/tests/components/headers/PageHeader.test.tsx
+++ b/galasa-ui/src/tests/components/headers/PageHeader.test.tsx
@@ -35,13 +35,6 @@ jest.mock('next-intl', () => ({
   useLocale: () => 'en',
   NextIntlClientProvider: ({ children }: any) => <>{children}</>,
 }));
-// Mock matchMedia
-beforeAll(() => {
-  Object.defineProperty(window, 'matchMedia', {
-    writable: true,
-    value: jest.fn().mockImplementation((query) => ({})),
-  });
-});
 
 afterEach(() => {
   jest.clearAllMocks();
@@ -78,6 +71,6 @@ test('renders the "Test runs" link when the feature flag is enabled via prop', (
     </FeatureFlagProvider>
   );
 
-  const testRunsLink = screen.getByText('Test runs');
-  expect(testRunsLink).toBeInTheDocument();
+  const testRunsLinks = screen.getAllByText('Test runs');
+  expect(testRunsLinks.length).toBe(2);
 });
diff --git a/galasa-ui/src/tests/components/headers/ThemeSelector.test.tsx b/galasa-ui/src/tests/components/headers/ThemeSelector.test.tsx
index 781d40ba..60cff64a 100644
--- a/galasa-ui/src/tests/components/headers/ThemeSelector.test.tsx
+++ b/galasa-ui/src/tests/components/headers/ThemeSelector.test.tsx
@@ -38,7 +38,7 @@ describe('ThemeSelector', () => {
     renderWithTheme(<ThemeSelector />);
     const btn = screen.getByRole('button');
     // Mode is "System"
-    expect(btn).toHaveAttribute('aria-label', 'System');
+    expect(btn).toHaveAttribute('aria-label', 'Switch to light mode');
     // Effective applied theme is dark
     expect(document.documentElement).toHaveAttribute('data-carbon-theme', 'dark');
   });
@@ -49,7 +49,7 @@ describe('ThemeSelector', () => {
 
     fireEvent.click(btn);
 
-    expect(btn).toHaveAttribute('aria-label', 'Light');
+    expect(btn).toHaveAttribute('aria-label', 'Switch to dark mode');
     expect(localStorage.getItem('preferred-theme')).toBe('light');
     expect(document.documentElement).toHaveAttribute('data-carbon-theme', 'light');
   });
@@ -63,7 +63,7 @@ describe('ThemeSelector', () => {
     // 2nd click → Dark
     fireEvent.click(btn);
 
-    expect(btn).toHaveAttribute('aria-label', 'Dark');
+    expect(btn).toHaveAttribute('aria-label', 'Switch to system preference');
     expect(localStorage.getItem('preferred-theme')).toBe('dark');
     expect(document.documentElement).toHaveAttribute('data-carbon-theme', 'dark');
   });
@@ -76,7 +76,7 @@ describe('ThemeSelector', () => {
     fireEvent.click(btn);
     fireEvent.click(btn);
 
-    expect(btn).toHaveAttribute('aria-label', 'System');
+    expect(btn).toHaveAttribute('aria-label', 'Switch to light mode');
     expect(localStorage.getItem('preferred-theme')).toBeNull();
     expect(document.documentElement).toHaveAttribute('data-carbon-theme', 'dark'); // OS still dark
   });
diff --git a/galasa-ui/src/tests/index.test.tsx b/galasa-ui/src/tests/index.test.tsx
index 767d9563..bc2c2ec6 100644
--- a/galasa-ui/src/tests/index.test.tsx
+++ b/galasa-ui/src/tests/index.test.tsx
@@ -50,13 +50,6 @@ jest.mock('next/headers', () => ({
   })),
 }));
 
-beforeAll(() => {
-  Object.defineProperty(window, 'matchMedia', {
-    writable: true,
-    value: jest.fn().mockImplementation((query) => ({})),
-  });
-});
-
 test('renders Galasa header', () => {
   render(
     <FeatureFlagProvider>

From 0627a513559e110a1f6fd469d65580a68aa37fea Mon Sep 17 00:00:00 2001
From: Eamonn Mansour <47121388+eamansour@users.noreply.github.com>
Date: Thu, 7 May 2026 11:00:51 +0100
Subject: [PATCH 2/3] review: Reduce duplication in header menu items by moving
 the items into a separate component

Signed-off-by: Eamonn Mansour <47121388+eamansour@users.noreply.github.com>
---
 .../components/headers/GalasaMenuItems.tsx    | 25 +++++++++++++++++++
 .../src/components/headers/PageHeader.tsx     | 25 +++----------------
 2 files changed, 29 insertions(+), 21 deletions(-)
 create mode 100644 galasa-ui/src/components/headers/GalasaMenuItems.tsx

diff --git a/galasa-ui/src/components/headers/GalasaMenuItems.tsx b/galasa-ui/src/components/headers/GalasaMenuItems.tsx
new file mode 100644
index 00000000..a916b023
--- /dev/null
+++ b/galasa-ui/src/components/headers/GalasaMenuItems.tsx
@@ -0,0 +1,25 @@
+/*
+ * Copyright contributors to the Galasa project
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+'use client';
+
+import { HeaderMenuItem } from '@carbon/react';
+import { useFeatureFlags } from '@/contexts/FeatureFlagContext';
+import { FEATURE_FLAGS } from '@/utils/featureFlags';
+import { useTranslations } from 'next-intl';
+
+export default function GalasaMenuItems() {
+  const { isFeatureEnabled } = useFeatureFlags();
+  const translations = useTranslations('PageHeader');
+
+  return (
+    <>
+      <HeaderMenuItem href="/users">{translations('users')}</HeaderMenuItem>
+      {isFeatureEnabled(FEATURE_FLAGS.TEST_RUNS) && (
+        <HeaderMenuItem href="/test-runs">{translations('testRuns')}</HeaderMenuItem>
+      )}
+    </>
+  );
+}
diff --git a/galasa-ui/src/components/headers/PageHeader.tsx b/galasa-ui/src/components/headers/PageHeader.tsx
index 3a93175b..c19c329d 100644
--- a/galasa-ui/src/components/headers/PageHeader.tsx
+++ b/galasa-ui/src/components/headers/PageHeader.tsx
@@ -5,30 +5,19 @@
  */
 'use client';
 
-import {
-  Header,
-  HeaderName,
-  SkipToContent,
-  Theme,
-  HeaderNavigation,
-  HeaderMenuItem,
-} from '@carbon/react';
+import { Header, HeaderName, SkipToContent, Theme, HeaderNavigation } from '@carbon/react';
 import PageHeaderMenu from './PageHeaderMenu';
 import Image from 'next/image';
 import galasaLogo from '@/assets/images/galasaLogo.png';
-import { useFeatureFlags } from '@/contexts/FeatureFlagContext';
-import { FEATURE_FLAGS } from '@/utils/featureFlags';
-import { useTranslations } from 'next-intl';
 import { SideNav } from '@carbon/react';
 import { SideNavItems } from '@carbon/react';
 import { HeaderSideNavItems } from '@carbon/react';
 import { HeaderMenuButton } from '@carbon/react';
 import { useState } from 'react';
 import styles from '@/styles/headers/PageHeader.module.css';
+import GalasaMenuItems from './GalasaMenuItems';
 
 export default function PageHeader({ galasaServiceName }: { galasaServiceName: string }) {
-  const { isFeatureEnabled } = useFeatureFlags();
-  const translations = useTranslations('PageHeader');
   const [isSideNavExpanded, setIsSideNavExpanded] = useState(false);
 
   const onClickSideNavExpand = () => {
@@ -53,10 +42,7 @@ export default function PageHeader({ galasaServiceName }: { galasaServiceName: s
         </HeaderName>
 
         <HeaderNavigation aria-label="Galasa menu bar navigation">
-          <HeaderMenuItem href="/users">{translations('users')}</HeaderMenuItem>
-          {isFeatureEnabled(FEATURE_FLAGS.TEST_RUNS) && (
-            <HeaderMenuItem href="/test-runs">{translations('testRuns')}</HeaderMenuItem>
-          )}
+          <GalasaMenuItems />
         </HeaderNavigation>
 
         <SideNav
@@ -67,10 +53,7 @@ export default function PageHeader({ galasaServiceName }: { galasaServiceName: s
         >
           <SideNavItems>
             <HeaderSideNavItems>
-              <HeaderMenuItem href="/users">{translations('users')}</HeaderMenuItem>
-              {isFeatureEnabled(FEATURE_FLAGS.TEST_RUNS) && (
-                <HeaderMenuItem href="/test-runs">{translations('testRuns')}</HeaderMenuItem>
-              )}
+              <GalasaMenuItems />
             </HeaderSideNavItems>
           </SideNavItems>
         </SideNav>

From 6d75c7d0cd80c2be3927426871ea1a165813b336 Mon Sep 17 00:00:00 2001
From: Eamonn Mansour <47121388+eamansour@users.noreply.github.com>
Date: Thu, 7 May 2026 13:03:33 +0100
Subject: [PATCH 3/3] review: Remove unsupported tooltip props from carbon
 components

Signed-off-by: Eamonn Mansour <47121388+eamansour@users.noreply.github.com>
---
 galasa-ui/src/components/headers/LanguageSelector.tsx  | 2 --
 galasa-ui/src/components/headers/ThemeSelector.tsx     | 1 -
 galasa-ui/src/tests/__snapshots__/layout.test.tsx.snap | 4 ----
 3 files changed, 7 deletions(-)

diff --git a/galasa-ui/src/components/headers/LanguageSelector.tsx b/galasa-ui/src/components/headers/LanguageSelector.tsx
index 06a980ce..698169f0 100644
--- a/galasa-ui/src/components/headers/LanguageSelector.tsx
+++ b/galasa-ui/src/components/headers/LanguageSelector.tsx
@@ -56,8 +56,6 @@ export default function LanguageSelector() {
       size="lg"
       iconDescription={`${translations('tooltip')}: ${selectedLanguage.text}`}
       aria-label="Filter menu"
-      tooltipAlignment="center"
-      tooltipPosition="bottom"
     >
       {languages.map((language) => (
         <OverflowMenuItem
diff --git a/galasa-ui/src/components/headers/ThemeSelector.tsx b/galasa-ui/src/components/headers/ThemeSelector.tsx
index 1e0689f6..f4a72b4a 100644
--- a/galasa-ui/src/components/headers/ThemeSelector.tsx
+++ b/galasa-ui/src/components/headers/ThemeSelector.tsx
@@ -40,7 +40,6 @@ export default function ThemeSelector() {
       data-floating-menu-container
       aria-label={next.tooltip}
       tooltipAlignment="center"
-      tooltipPosition="bottom"
       onClick={cycleTheme}
     >
       {currentTheme.icon}
diff --git a/galasa-ui/src/tests/__snapshots__/layout.test.tsx.snap b/galasa-ui/src/tests/__snapshots__/layout.test.tsx.snap
index a7eb21b7..c781c08f 100644
--- a/galasa-ui/src/tests/__snapshots__/layout.test.tsx.snap
+++ b/galasa-ui/src/tests/__snapshots__/layout.test.tsx.snap
@@ -146,8 +146,6 @@ exports[`Layout renders the web UI layout 1`] = `
                     aria-labelledby="tooltip-_r_1_"
                     class="overflowMenu cds--overflow-menu cds--overflow-menu--lg cds--btn cds--btn--lg cds--layout--size-lg cds--btn--ghost cds--btn--icon-only"
                     data-floating-menu-container="true"
-                    tooltipalignment="center"
-                    tooltipposition="bottom"
                     type="button"
                   >
                     <svg
@@ -465,8 +463,6 @@ exports[`Layout renders the web UI layout 1`] = `
                   aria-labelledby="tooltip-_r_1_"
                   class="overflowMenu cds--overflow-menu cds--overflow-menu--lg cds--btn cds--btn--lg cds--layout--size-lg cds--btn--ghost cds--btn--icon-only"
                   data-floating-menu-container="true"
-                  tooltipalignment="center"
-                  tooltipposition="bottom"
                   type="button"
                 >
                   <svg