From 415f1a830be56eb663b2c340d78ea2718df90b24 Mon Sep 17 00:00:00 2001
From: Janne Savolainen <janne.savolainen@live.fi>
Date: Wed, 17 Aug 2022 15:18:04 +0300
Subject: [PATCH] Update snapshots

Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
---
 ...acters-in-page-registrations.test.tsx.snap |  161 ++-
 .../navigate-to-extension-page.test.tsx.snap  |  401 ++++--
 .../navigating-between-routes.test.tsx.snap   |  160 ++-
 ...ation-using-application-menu.test.tsx.snap |  163 ++-
 .../installing-update.test.ts.snap            |  558 +++++---
 ...g-update-using-topbar-button.test.tsx.snap |  192 ++-
 .../installing-update-using-tray.test.ts.snap |  558 +++++---
 ...e-since-update-was-downloaded.test.ts.snap |  351 +++--
 ...eriodical-checking-of-updates.test.ts.snap |   81 +-
 ...selection-of-update-stability.test.ts.snap |   81 +-
 .../keyboard-shortcuts.test.tsx.snap          | 1256 ++++++++++-------
 ...gation-using-application-menu.test.ts.snap |  161 ++-
 ...elm-repository-in-preferences.test.ts.snap |  960 ++++++++-----
 ...tory-from-list-in-preferences.test.ts.snap |  800 +++++++----
 ...m-repositories-in-preferences.test.ts.snap |  800 +++++++----
 ...ive-repository-in-preferences.test.ts.snap |  320 +++--
 .../closing-preferences.test.tsx.snap         |  640 +++++----
 ...nsion-adding-preference-tabs.test.tsx.snap |   80 +-
 ...on-to-application-preferences.test.ts.snap |  160 ++-
 ...igation-to-editor-preferences.test.ts.snap |  160 ++-
 ...tension-specific-preferences.test.tsx.snap |  800 +++++++----
 ...ion-to-kubernetes-preferences.test.ts.snap |  160 ++-
 ...vigation-to-proxy-preferences.test.ts.snap |  160 ++-
 ...ion-to-telemetry-preferences.test.tsx.snap |  400 ++++--
 ...ation-to-terminal-preferences.test.ts.snap |  160 ++-
 ...gation-using-application-menu.test.ts.snap |  161 ++-
 .../navigation-using-tray.test.ts.snap        |  161 ++-
 ...-originating-from-extensions.test.tsx.snap |   81 +-
 ...dability-using-extension-api.test.tsx.snap |  328 +++--
 ...gation-using-application-menu.test.ts.snap |  242 ++--
 30 files changed, 6511 insertions(+), 4185 deletions(-)

diff --git a/src/features/__snapshots__/extension-special-characters-in-page-registrations.test.tsx.snap b/src/features/__snapshots__/extension-special-characters-in-page-registrations.test.tsx.snap
index 3eb46b81e9..88f53aaa3a 100644
--- a/src/features/__snapshots__/extension-special-characters-in-page-registrations.test.tsx.snap
+++ b/src/features/__snapshots__/extension-special-characters-in-page-registrations.test.tsx.snap
@@ -11,43 +11,62 @@ exports[`extension special characters in page registrations renders 1`] = `
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="home-button"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -76,7 +95,7 @@ exports[`extension special characters in page registrations renders 1`] = `
               style="width: 320px;"
             >
               <h2>
-                Welcome to some-product-name!
+                Welcome to OpenLens!
               </h2>
               <p>
                 To get you started we have auto-detected your clusters in your
@@ -211,44 +230,62 @@ exports[`extension special characters in page registrations when navigating to r
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
diff --git a/src/features/__snapshots__/navigate-to-extension-page.test.tsx.snap b/src/features/__snapshots__/navigate-to-extension-page.test.tsx.snap
index 048afb8493..923b3df502 100644
--- a/src/features/__snapshots__/navigate-to-extension-page.test.tsx.snap
+++ b/src/features/__snapshots__/navigate-to-extension-page.test.tsx.snap
@@ -11,43 +11,62 @@ exports[`navigate to extension page renders 1`] = `
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="home-button"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -76,7 +95,7 @@ exports[`navigate to extension page renders 1`] = `
               style="width: 320px;"
             >
               <h2>
-                Welcome to some-product-name!
+                Welcome to OpenLens!
               </h2>
               <p>
                 To get you started we have auto-detected your clusters in your
@@ -211,44 +230,62 @@ exports[`navigate to extension page when extension navigates to child route rend
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -332,44 +369,62 @@ exports[`navigate to extension page when extension navigates to route with param
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -469,44 +524,62 @@ exports[`navigate to extension page when extension navigates to route without pa
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -606,44 +679,62 @@ exports[`navigate to extension page when extension navigates to route without pa
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
diff --git a/src/features/__snapshots__/navigating-between-routes.test.tsx.snap b/src/features/__snapshots__/navigating-between-routes.test.tsx.snap
index 5808ef6828..f4e6b41559 100644
--- a/src/features/__snapshots__/navigating-between-routes.test.tsx.snap
+++ b/src/features/__snapshots__/navigating-between-routes.test.tsx.snap
@@ -11,44 +11,62 @@ exports[`navigating between routes given route with optional path parameters whe
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -135,44 +153,62 @@ exports[`navigating between routes given route without path parameters when navi
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
diff --git a/src/features/add-cluster/__snapshots__/navigation-using-application-menu.test.tsx.snap b/src/features/add-cluster/__snapshots__/navigation-using-application-menu.test.tsx.snap
index b5b54a989f..bf62184f33 100644
--- a/src/features/add-cluster/__snapshots__/navigation-using-application-menu.test.tsx.snap
+++ b/src/features/add-cluster/__snapshots__/navigation-using-application-menu.test.tsx.snap
@@ -11,43 +11,62 @@ exports[`add-cluster - navigation using application menu renders 1`] = `
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="home-button"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -76,7 +95,7 @@ exports[`add-cluster - navigation using application menu renders 1`] = `
               style="width: 320px;"
             >
               <h2>
-                Welcome to some-product-name!
+                Welcome to OpenLens!
               </h2>
               <p>
                 To get you started we have auto-detected your clusters in your
@@ -211,44 +230,62 @@ exports[`add-cluster - navigation using application menu when navigating to add
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -279,7 +316,7 @@ exports[`add-cluster - navigation using application menu when navigating to add
               </code>
                file. 
               <a
-                href="https://docs.k8slens.dev/main/getting-started/add-cluster/"
+                href="https://docs.k8slens.dev/main/catalog/add-cluster/"
                 rel="noreferrer"
                 target="_blank"
               >
diff --git a/src/features/application-update/__snapshots__/installing-update.test.ts.snap b/src/features/application-update/__snapshots__/installing-update.test.ts.snap
index 42b59bfab2..226e479136 100644
--- a/src/features/application-update/__snapshots__/installing-update.test.ts.snap
+++ b/src/features/application-update/__snapshots__/installing-update.test.ts.snap
@@ -12,43 +12,62 @@ exports[`installing update when started renders 1`] = `
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="home-button"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -77,7 +96,7 @@ exports[`installing update when started renders 1`] = `
                 style="width: 320px;"
               >
                 <h2>
-                  Welcome to some-product-name!
+                  Welcome to OpenLens!
                 </h2>
                 <p>
                   To get you started we have auto-detected your clusters in your
@@ -214,43 +233,62 @@ exports[`installing update when started when user checks for updates renders 1`]
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="home-button"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -279,7 +317,7 @@ exports[`installing update when started when user checks for updates renders 1`]
                 style="width: 320px;"
               >
                 <h2>
-                  Welcome to some-product-name!
+                  Welcome to OpenLens!
                 </h2>
                 <p>
                   To get you started we have auto-detected your clusters in your
@@ -416,43 +454,62 @@ exports[`installing update when started when user checks for updates when new up
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="home-button"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -481,7 +538,7 @@ exports[`installing update when started when user checks for updates when new up
                 style="width: 320px;"
               >
                 <h2>
-                  Welcome to some-product-name!
+                  Welcome to OpenLens!
                 </h2>
                 <p>
                   To get you started we have auto-detected your clusters in your
@@ -618,61 +675,84 @@ exports[`installing update when started when user checks for updates when new up
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="home-button"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
-            >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
-          >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
-            >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
-          >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
-            >
-              arrow_forward
-            </span>
-          </i>
-          <button
-            class="updateButton"
-            data-testid="update-button"
-            data-warning-level="light"
-            id="update-lens-button"
-          >
-            Update
             <i
-              class="Icon icon material focusable"
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
               <span
                 class="icon"
-                data-icon-name="arrow_drop_down"
+                data-icon-name="home"
               >
-                arrow_drop_down
+                home
               </span>
             </i>
-          </button>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <button
+              class="updateButton"
+              data-testid="update-button"
+              data-warning-level="light"
+              id="update-lens-button"
+            >
+              Update
+              <i
+                class="Icon icon material focusable"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="arrow_drop_down"
+                >
+                  arrow_drop_down
+                </span>
+              </i>
+            </button>
+          </div>
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -701,7 +781,7 @@ exports[`installing update when started when user checks for updates when new up
                 style="width: 320px;"
               >
                 <h2>
-                  Welcome to some-product-name!
+                  Welcome to OpenLens!
                 </h2>
                 <p>
                   To get you started we have auto-detected your clusters in your
@@ -838,61 +918,84 @@ exports[`installing update when started when user checks for updates when new up
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="home-button"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
-            >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
-          >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
-            >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
-          >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
-            >
-              arrow_forward
-            </span>
-          </i>
-          <button
-            class="updateButton"
-            data-testid="update-button"
-            data-warning-level="light"
-            id="update-lens-button"
-          >
-            Update
             <i
-              class="Icon icon material focusable"
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
               <span
                 class="icon"
-                data-icon-name="arrow_drop_down"
+                data-icon-name="home"
               >
-                arrow_drop_down
+                home
               </span>
             </i>
-          </button>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <button
+              class="updateButton"
+              data-testid="update-button"
+              data-warning-level="light"
+              id="update-lens-button"
+            >
+              Update
+              <i
+                class="Icon icon material focusable"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="arrow_drop_down"
+                >
+                  arrow_drop_down
+                </span>
+              </i>
+            </button>
+          </div>
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -921,7 +1024,7 @@ exports[`installing update when started when user checks for updates when new up
                 style="width: 320px;"
               >
                 <h2>
-                  Welcome to some-product-name!
+                  Welcome to OpenLens!
                 </h2>
                 <p>
                   To get you started we have auto-detected your clusters in your
@@ -1058,43 +1161,62 @@ exports[`installing update when started when user checks for updates when no new
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="home-button"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -1123,7 +1245,7 @@ exports[`installing update when started when user checks for updates when no new
                 style="width: 320px;"
               >
                 <h2>
-                  Welcome to some-product-name!
+                  Welcome to OpenLens!
                 </h2>
                 <p>
                   To get you started we have auto-detected your clusters in your
diff --git a/src/features/application-update/child-features/application-update-using-top-bar/__snapshots__/installing-update-using-topbar-button.test.tsx.snap b/src/features/application-update/child-features/application-update-using-top-bar/__snapshots__/installing-update-using-topbar-button.test.tsx.snap
index 1baec94319..f712f0eacd 100644
--- a/src/features/application-update/child-features/application-update-using-top-bar/__snapshots__/installing-update-using-topbar-button.test.tsx.snap
+++ b/src/features/application-update/child-features/application-update-using-top-bar/__snapshots__/installing-update-using-topbar-button.test.tsx.snap
@@ -12,57 +12,83 @@ exports[`encourage user to update when sufficient time passed since update was d
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="home-button"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
-            >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
-          >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
-            >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
-          >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
-            >
-              arrow_forward
-            </span>
-          </i>
-          <button
-            class="updateButton"
-            data-testid="update-button"
-            data-warning-level="light"
-            id="update-lens-button"
-          >
-            Update
             <i
-              class="Icon icon material focusable"
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
               <span
                 class="icon"
-                data-icon-name="arrow_drop_down"
+                data-icon-name="home"
               >
-                arrow_drop_down
+                home
               </span>
             </i>
-          </button>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <button
+              class="updateButton"
+              data-testid="update-button"
+              data-warning-level="light"
+              id="update-lens-button"
+            >
+              Update
+              <i
+                class="Icon icon material focusable"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="arrow_drop_down"
+                >
+                  arrow_drop_down
+                </span>
+              </i>
+            </button>
+          </div>
         </div>
       </div>
       <main>
@@ -92,7 +118,7 @@ exports[`encourage user to update when sufficient time passed since update was d
                 style="width: 320px;"
               >
                 <h2>
-                  Welcome to some-product-name!
+                  Welcome to OpenLens!
                 </h2>
                 <p>
                   To get you started we have auto-detected your clusters in your
@@ -229,39 +255,61 @@ exports[`encourage user to update when sufficient time passed since update was d
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="home-button"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
       </div>
       <main>
@@ -291,7 +339,7 @@ exports[`encourage user to update when sufficient time passed since update was d
                 style="width: 320px;"
               >
                 <h2>
-                  Welcome to some-product-name!
+                  Welcome to OpenLens!
                 </h2>
                 <p>
                   To get you started we have auto-detected your clusters in your
diff --git a/src/features/application-update/child-features/application-update-using-tray/__snapshots__/installing-update-using-tray.test.ts.snap b/src/features/application-update/child-features/application-update-using-tray/__snapshots__/installing-update-using-tray.test.ts.snap
index 7922c4659d..eaa2492f82 100644
--- a/src/features/application-update/child-features/application-update-using-tray/__snapshots__/installing-update-using-tray.test.ts.snap
+++ b/src/features/application-update/child-features/application-update-using-tray/__snapshots__/installing-update-using-tray.test.ts.snap
@@ -12,43 +12,62 @@ exports[`installing update using tray when started renders 1`] = `
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="home-button"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -77,7 +96,7 @@ exports[`installing update using tray when started renders 1`] = `
                 style="width: 320px;"
               >
                 <h2>
-                  Welcome to some-product-name!
+                  Welcome to OpenLens!
                 </h2>
                 <p>
                   To get you started we have auto-detected your clusters in your
@@ -214,43 +233,62 @@ exports[`installing update using tray when started when user checks for updates
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="home-button"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -279,7 +317,7 @@ exports[`installing update using tray when started when user checks for updates
                 style="width: 320px;"
               >
                 <h2>
-                  Welcome to some-product-name!
+                  Welcome to OpenLens!
                 </h2>
                 <p>
                   To get you started we have auto-detected your clusters in your
@@ -416,43 +454,62 @@ exports[`installing update using tray when started when user checks for updates
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="home-button"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -481,7 +538,7 @@ exports[`installing update using tray when started when user checks for updates
                 style="width: 320px;"
               >
                 <h2>
-                  Welcome to some-product-name!
+                  Welcome to OpenLens!
                 </h2>
                 <p>
                   To get you started we have auto-detected your clusters in your
@@ -618,61 +675,84 @@ exports[`installing update using tray when started when user checks for updates
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="home-button"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
-            >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
-          >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
-            >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
-          >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
-            >
-              arrow_forward
-            </span>
-          </i>
-          <button
-            class="updateButton"
-            data-testid="update-button"
-            data-warning-level="light"
-            id="update-lens-button"
-          >
-            Update
             <i
-              class="Icon icon material focusable"
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
               <span
                 class="icon"
-                data-icon-name="arrow_drop_down"
+                data-icon-name="home"
               >
-                arrow_drop_down
+                home
               </span>
             </i>
-          </button>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <button
+              class="updateButton"
+              data-testid="update-button"
+              data-warning-level="light"
+              id="update-lens-button"
+            >
+              Update
+              <i
+                class="Icon icon material focusable"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="arrow_drop_down"
+                >
+                  arrow_drop_down
+                </span>
+              </i>
+            </button>
+          </div>
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -701,7 +781,7 @@ exports[`installing update using tray when started when user checks for updates
                 style="width: 320px;"
               >
                 <h2>
-                  Welcome to some-product-name!
+                  Welcome to OpenLens!
                 </h2>
                 <p>
                   To get you started we have auto-detected your clusters in your
@@ -838,61 +918,84 @@ exports[`installing update using tray when started when user checks for updates
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="home-button"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
-            >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
-          >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
-            >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
-          >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
-            >
-              arrow_forward
-            </span>
-          </i>
-          <button
-            class="updateButton"
-            data-testid="update-button"
-            data-warning-level="light"
-            id="update-lens-button"
-          >
-            Update
             <i
-              class="Icon icon material focusable"
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
               <span
                 class="icon"
-                data-icon-name="arrow_drop_down"
+                data-icon-name="home"
               >
-                arrow_drop_down
+                home
               </span>
             </i>
-          </button>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <button
+              class="updateButton"
+              data-testid="update-button"
+              data-warning-level="light"
+              id="update-lens-button"
+            >
+              Update
+              <i
+                class="Icon icon material focusable"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="arrow_drop_down"
+                >
+                  arrow_drop_down
+                </span>
+              </i>
+            </button>
+          </div>
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -921,7 +1024,7 @@ exports[`installing update using tray when started when user checks for updates
                 style="width: 320px;"
               >
                 <h2>
-                  Welcome to some-product-name!
+                  Welcome to OpenLens!
                 </h2>
                 <p>
                   To get you started we have auto-detected your clusters in your
@@ -1058,43 +1161,62 @@ exports[`installing update using tray when started when user checks for updates
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="home-button"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -1123,7 +1245,7 @@ exports[`installing update using tray when started when user checks for updates
                 style="width: 320px;"
               >
                 <h2>
-                  Welcome to some-product-name!
+                  Welcome to OpenLens!
                 </h2>
                 <p>
                   To get you started we have auto-detected your clusters in your
diff --git a/src/features/application-update/child-features/force-user-to-update-when-too-long-time-since-update-was-downloaded/__snapshots__/force-user-to-update-when-too-long-time-since-update-was-downloaded.test.ts.snap b/src/features/application-update/child-features/force-user-to-update-when-too-long-time-since-update-was-downloaded/__snapshots__/force-user-to-update-when-too-long-time-since-update-was-downloaded.test.ts.snap
index 69c8ff0ac1..4f7064a385 100644
--- a/src/features/application-update/child-features/force-user-to-update-when-too-long-time-since-update-was-downloaded/__snapshots__/force-user-to-update-when-too-long-time-since-update-was-downloaded.test.ts.snap
+++ b/src/features/application-update/child-features/force-user-to-update-when-too-long-time-since-update-was-downloaded/__snapshots__/force-user-to-update-when-too-long-time-since-update-was-downloaded.test.ts.snap
@@ -12,61 +12,84 @@ exports[`force user to update when too long since update was downloaded when app
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="home-button"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
-            >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
-          >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
-            >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
-          >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
-            >
-              arrow_forward
-            </span>
-          </i>
-          <button
-            class="updateButton"
-            data-testid="update-button"
-            data-warning-level="light"
-            id="update-lens-button"
-          >
-            Update
             <i
-              class="Icon icon material focusable"
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
               <span
                 class="icon"
-                data-icon-name="arrow_drop_down"
+                data-icon-name="home"
               >
-                arrow_drop_down
+                home
               </span>
             </i>
-          </button>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <button
+              class="updateButton"
+              data-testid="update-button"
+              data-warning-level="light"
+              id="update-lens-button"
+            >
+              Update
+              <i
+                class="Icon icon material focusable"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="arrow_drop_down"
+                >
+                  arrow_drop_down
+                </span>
+              </i>
+            </button>
+          </div>
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -95,7 +118,7 @@ exports[`force user to update when too long since update was downloaded when app
                 style="width: 320px;"
               >
                 <h2>
-                  Welcome to some-product-name!
+                  Welcome to OpenLens!
                 </h2>
                 <p>
                   To get you started we have auto-detected your clusters in your
@@ -232,61 +255,84 @@ exports[`force user to update when too long since update was downloaded when app
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="home-button"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
-            >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
-          >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
-            >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
-          >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
-            >
-              arrow_forward
-            </span>
-          </i>
-          <button
-            class="updateButton"
-            data-testid="update-button"
-            data-warning-level="light"
-            id="update-lens-button"
-          >
-            Update
             <i
-              class="Icon icon material focusable"
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
               <span
                 class="icon"
-                data-icon-name="arrow_drop_down"
+                data-icon-name="home"
               >
-                arrow_drop_down
+                home
               </span>
             </i>
-          </button>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <button
+              class="updateButton"
+              data-testid="update-button"
+              data-warning-level="light"
+              id="update-lens-button"
+            >
+              Update
+              <i
+                class="Icon icon material focusable"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="arrow_drop_down"
+                >
+                  arrow_drop_down
+                </span>
+              </i>
+            </button>
+          </div>
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -315,7 +361,7 @@ exports[`force user to update when too long since update was downloaded when app
                 style="width: 320px;"
               >
                 <h2>
-                  Welcome to some-product-name!
+                  Welcome to OpenLens!
                 </h2>
                 <p>
                   To get you started we have auto-detected your clusters in your
@@ -499,61 +545,84 @@ exports[`force user to update when too long since update was downloaded when app
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="home-button"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
-            >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
-          >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
-            >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
-          >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
-            >
-              arrow_forward
-            </span>
-          </i>
-          <button
-            class="updateButton"
-            data-testid="update-button"
-            data-warning-level="light"
-            id="update-lens-button"
-          >
-            Update
             <i
-              class="Icon icon material focusable"
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
               <span
                 class="icon"
-                data-icon-name="arrow_drop_down"
+                data-icon-name="home"
               >
-                arrow_drop_down
+                home
               </span>
             </i>
-          </button>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <button
+              class="updateButton"
+              data-testid="update-button"
+              data-warning-level="light"
+              id="update-lens-button"
+            >
+              Update
+              <i
+                class="Icon icon material focusable"
+              >
+                <span
+                  class="icon"
+                  data-icon-name="arrow_drop_down"
+                >
+                  arrow_drop_down
+                </span>
+              </i>
+            </button>
+          </div>
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -582,7 +651,7 @@ exports[`force user to update when too long since update was downloaded when app
                 style="width: 320px;"
               >
                 <h2>
-                  Welcome to some-product-name!
+                  Welcome to OpenLens!
                 </h2>
                 <p>
                   To get you started we have auto-detected your clusters in your
diff --git a/src/features/application-update/child-features/periodical-checking-of-updates/__snapshots__/periodical-checking-of-updates.test.ts.snap b/src/features/application-update/child-features/periodical-checking-of-updates/__snapshots__/periodical-checking-of-updates.test.ts.snap
index 3a9779a33a..f3f9995263 100644
--- a/src/features/application-update/child-features/periodical-checking-of-updates/__snapshots__/periodical-checking-of-updates.test.ts.snap
+++ b/src/features/application-update/child-features/periodical-checking-of-updates/__snapshots__/periodical-checking-of-updates.test.ts.snap
@@ -12,43 +12,62 @@ exports[`periodical checking of updates given updater is enabled and configurati
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="home-button"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -77,7 +96,7 @@ exports[`periodical checking of updates given updater is enabled and configurati
                 style="width: 320px;"
               >
                 <h2>
-                  Welcome to some-product-name!
+                  Welcome to OpenLens!
                 </h2>
                 <p>
                   To get you started we have auto-detected your clusters in your
diff --git a/src/features/application-update/child-features/selection-of-update-stability/__snapshots__/selection-of-update-stability.test.ts.snap b/src/features/application-update/child-features/selection-of-update-stability/__snapshots__/selection-of-update-stability.test.ts.snap
index 0533d66176..c884e31d5f 100644
--- a/src/features/application-update/child-features/selection-of-update-stability/__snapshots__/selection-of-update-stability.test.ts.snap
+++ b/src/features/application-update/child-features/selection-of-update-stability/__snapshots__/selection-of-update-stability.test.ts.snap
@@ -12,43 +12,62 @@ exports[`selection of update stability when started renders 1`] = `
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="home-button"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -77,7 +96,7 @@ exports[`selection of update stability when started renders 1`] = `
                 style="width: 320px;"
               >
                 <h2>
-                  Welcome to some-product-name!
+                  Welcome to OpenLens!
                 </h2>
                 <p>
                   To get you started we have auto-detected your clusters in your
diff --git a/src/features/command-pallet/__snapshots__/keyboard-shortcuts.test.tsx.snap b/src/features/command-pallet/__snapshots__/keyboard-shortcuts.test.tsx.snap
index d9c8504408..8a5bd71d0d 100644
--- a/src/features/command-pallet/__snapshots__/keyboard-shortcuts.test.tsx.snap
+++ b/src/features/command-pallet/__snapshots__/keyboard-shortcuts.test.tsx.snap
@@ -13,120 +13,149 @@ exports[`Command Pallet: keyboard shortcut tests when on linux renders 1`] = `
           class="items"
         >
           <div
-            class="winMenu"
+            class="preventedDragging"
           >
             <div
-              data-testid="window-menu"
+              class="winMenu"
             >
-              <svg
-                height="12"
-                shape-rendering="crispEdges"
-                viewBox="0 0 12 12"
-                width="12"
+              <div
+                data-testid="window-menu"
               >
-                <path
-                  d="M0,8.5h12v1H0V8.5z"
-                  fill="currentColor"
-                />
-                <path
-                  d="M0,5.5h12v1H0V5.5z"
-                  fill="currentColor"
-                />
-                <path
-                  d="M0,2.5h12v1H0V2.5z"
-                  fill="currentColor"
-                />
-              </svg>
+                <svg
+                  height="12"
+                  shape-rendering="crispEdges"
+                  viewBox="0 0 12 12"
+                  width="12"
+                >
+                  <path
+                    d="M0,8.5h12v1H0V8.5z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M0,5.5h12v1H0V5.5z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M0,2.5h12v1H0V2.5z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
             </div>
           </div>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="home-button"
-          >
-            <span
-              class="icon"
-              data-icon-name="home"
-            >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
-          >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
-            >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
-          >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
-            >
-              arrow_forward
-            </span>
-          </i>
-        </div>
-        <div
-          class="items"
-        >
           <div
-            class="windowButtons linuxButtons"
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
+            >
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
+          <div
+            class="preventedDragging"
           >
             <div
-              class="minimize"
-              data-testid="window-minimize"
+              class="windowButtons linuxButtons"
             >
-              <svg
-                shape-rendering="crispEdges"
-                viewBox="0 0 12 12"
+              <div
+                class="minimize"
+                data-testid="window-minimize"
               >
-                <rect
-                  fill="currentColor"
-                  height="1"
-                  width="10"
-                  x="1"
-                  y="9"
-                />
-              </svg>
-            </div>
-            <div
-              class="maximize"
-              data-testid="window-maximize"
-            >
-              <svg
-                shape-rendering="crispEdges"
-                viewBox="0 0 12 12"
+                <svg
+                  shape-rendering="crispEdges"
+                  viewBox="0 0 12 12"
+                >
+                  <rect
+                    fill="currentColor"
+                    height="1"
+                    width="10"
+                    x="1"
+                    y="9"
+                  />
+                </svg>
+              </div>
+              <div
+                class="maximize"
+                data-testid="window-maximize"
               >
-                <rect
-                  fill="none"
-                  height="9"
-                  stroke="currentColor"
-                  width="9"
-                  x="1.5"
-                  y="1.5"
-                />
-              </svg>
-            </div>
-            <div
-              class="close"
-              data-testid="window-close"
-            >
-              <svg
-                shape-rendering="crispEdges"
-                viewBox="0 0 12 12"
+                <svg
+                  shape-rendering="crispEdges"
+                  viewBox="0 0 12 12"
+                >
+                  <rect
+                    fill="none"
+                    height="9"
+                    stroke="currentColor"
+                    width="9"
+                    x="1.5"
+                    y="1.5"
+                  />
+                </svg>
+              </div>
+              <div
+                class="close"
+                data-testid="window-close"
               >
-                <polygon
-                  fill="currentColor"
-                  points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"
-                />
-              </svg>
+                <svg
+                  shape-rendering="crispEdges"
+                  viewBox="0 0 12 12"
+                >
+                  <polygon
+                    fill="currentColor"
+                    points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"
+                  />
+                </svg>
+              </div>
             </div>
           </div>
         </div>
@@ -158,7 +187,7 @@ exports[`Command Pallet: keyboard shortcut tests when on linux renders 1`] = `
                 style="width: 320px;"
               >
                 <h2>
-                  Welcome to some-product-name!
+                  Welcome to OpenLens!
                 </h2>
                 <p>
                   To get you started we have auto-detected your clusters in your
@@ -296,120 +325,149 @@ exports[`Command Pallet: keyboard shortcut tests when on linux when pressing ESC
           class="items"
         >
           <div
-            class="winMenu"
+            class="preventedDragging"
           >
             <div
-              data-testid="window-menu"
+              class="winMenu"
             >
-              <svg
-                height="12"
-                shape-rendering="crispEdges"
-                viewBox="0 0 12 12"
-                width="12"
+              <div
+                data-testid="window-menu"
               >
-                <path
-                  d="M0,8.5h12v1H0V8.5z"
-                  fill="currentColor"
-                />
-                <path
-                  d="M0,5.5h12v1H0V5.5z"
-                  fill="currentColor"
-                />
-                <path
-                  d="M0,2.5h12v1H0V2.5z"
-                  fill="currentColor"
-                />
-              </svg>
+                <svg
+                  height="12"
+                  shape-rendering="crispEdges"
+                  viewBox="0 0 12 12"
+                  width="12"
+                >
+                  <path
+                    d="M0,8.5h12v1H0V8.5z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M0,5.5h12v1H0V5.5z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M0,2.5h12v1H0V2.5z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
             </div>
           </div>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="home-button"
-          >
-            <span
-              class="icon"
-              data-icon-name="home"
-            >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
-          >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
-            >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
-          >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
-            >
-              arrow_forward
-            </span>
-          </i>
-        </div>
-        <div
-          class="items"
-        >
           <div
-            class="windowButtons linuxButtons"
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
+            >
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
+          <div
+            class="preventedDragging"
           >
             <div
-              class="minimize"
-              data-testid="window-minimize"
+              class="windowButtons linuxButtons"
             >
-              <svg
-                shape-rendering="crispEdges"
-                viewBox="0 0 12 12"
+              <div
+                class="minimize"
+                data-testid="window-minimize"
               >
-                <rect
-                  fill="currentColor"
-                  height="1"
-                  width="10"
-                  x="1"
-                  y="9"
-                />
-              </svg>
-            </div>
-            <div
-              class="maximize"
-              data-testid="window-maximize"
-            >
-              <svg
-                shape-rendering="crispEdges"
-                viewBox="0 0 12 12"
+                <svg
+                  shape-rendering="crispEdges"
+                  viewBox="0 0 12 12"
+                >
+                  <rect
+                    fill="currentColor"
+                    height="1"
+                    width="10"
+                    x="1"
+                    y="9"
+                  />
+                </svg>
+              </div>
+              <div
+                class="maximize"
+                data-testid="window-maximize"
               >
-                <rect
-                  fill="none"
-                  height="9"
-                  stroke="currentColor"
-                  width="9"
-                  x="1.5"
-                  y="1.5"
-                />
-              </svg>
-            </div>
-            <div
-              class="close"
-              data-testid="window-close"
-            >
-              <svg
-                shape-rendering="crispEdges"
-                viewBox="0 0 12 12"
+                <svg
+                  shape-rendering="crispEdges"
+                  viewBox="0 0 12 12"
+                >
+                  <rect
+                    fill="none"
+                    height="9"
+                    stroke="currentColor"
+                    width="9"
+                    x="1.5"
+                    y="1.5"
+                  />
+                </svg>
+              </div>
+              <div
+                class="close"
+                data-testid="window-close"
               >
-                <polygon
-                  fill="currentColor"
-                  points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"
-                />
-              </svg>
+                <svg
+                  shape-rendering="crispEdges"
+                  viewBox="0 0 12 12"
+                >
+                  <polygon
+                    fill="currentColor"
+                    points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"
+                  />
+                </svg>
+              </div>
             </div>
           </div>
         </div>
@@ -441,7 +499,7 @@ exports[`Command Pallet: keyboard shortcut tests when on linux when pressing ESC
                 style="width: 320px;"
               >
                 <h2>
-                  Welcome to some-product-name!
+                  Welcome to OpenLens!
                 </h2>
                 <p>
                   To get you started we have auto-detected your clusters in your
@@ -579,120 +637,149 @@ exports[`Command Pallet: keyboard shortcut tests when on linux when pressing SHI
           class="items"
         >
           <div
-            class="winMenu"
+            class="preventedDragging"
           >
             <div
-              data-testid="window-menu"
+              class="winMenu"
             >
-              <svg
-                height="12"
-                shape-rendering="crispEdges"
-                viewBox="0 0 12 12"
-                width="12"
+              <div
+                data-testid="window-menu"
               >
-                <path
-                  d="M0,8.5h12v1H0V8.5z"
-                  fill="currentColor"
-                />
-                <path
-                  d="M0,5.5h12v1H0V5.5z"
-                  fill="currentColor"
-                />
-                <path
-                  d="M0,2.5h12v1H0V2.5z"
-                  fill="currentColor"
-                />
-              </svg>
+                <svg
+                  height="12"
+                  shape-rendering="crispEdges"
+                  viewBox="0 0 12 12"
+                  width="12"
+                >
+                  <path
+                    d="M0,8.5h12v1H0V8.5z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M0,5.5h12v1H0V5.5z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M0,2.5h12v1H0V2.5z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
             </div>
           </div>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="home-button"
-          >
-            <span
-              class="icon"
-              data-icon-name="home"
-            >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
-          >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
-            >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
-          >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
-            >
-              arrow_forward
-            </span>
-          </i>
-        </div>
-        <div
-          class="items"
-        >
           <div
-            class="windowButtons linuxButtons"
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
+            >
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
+          <div
+            class="preventedDragging"
           >
             <div
-              class="minimize"
-              data-testid="window-minimize"
+              class="windowButtons linuxButtons"
             >
-              <svg
-                shape-rendering="crispEdges"
-                viewBox="0 0 12 12"
+              <div
+                class="minimize"
+                data-testid="window-minimize"
               >
-                <rect
-                  fill="currentColor"
-                  height="1"
-                  width="10"
-                  x="1"
-                  y="9"
-                />
-              </svg>
-            </div>
-            <div
-              class="maximize"
-              data-testid="window-maximize"
-            >
-              <svg
-                shape-rendering="crispEdges"
-                viewBox="0 0 12 12"
+                <svg
+                  shape-rendering="crispEdges"
+                  viewBox="0 0 12 12"
+                >
+                  <rect
+                    fill="currentColor"
+                    height="1"
+                    width="10"
+                    x="1"
+                    y="9"
+                  />
+                </svg>
+              </div>
+              <div
+                class="maximize"
+                data-testid="window-maximize"
               >
-                <rect
-                  fill="none"
-                  height="9"
-                  stroke="currentColor"
-                  width="9"
-                  x="1.5"
-                  y="1.5"
-                />
-              </svg>
-            </div>
-            <div
-              class="close"
-              data-testid="window-close"
-            >
-              <svg
-                shape-rendering="crispEdges"
-                viewBox="0 0 12 12"
+                <svg
+                  shape-rendering="crispEdges"
+                  viewBox="0 0 12 12"
+                >
+                  <rect
+                    fill="none"
+                    height="9"
+                    stroke="currentColor"
+                    width="9"
+                    x="1.5"
+                    y="1.5"
+                  />
+                </svg>
+              </div>
+              <div
+                class="close"
+                data-testid="window-close"
               >
-                <polygon
-                  fill="currentColor"
-                  points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"
-                />
-              </svg>
+                <svg
+                  shape-rendering="crispEdges"
+                  viewBox="0 0 12 12"
+                >
+                  <polygon
+                    fill="currentColor"
+                    points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"
+                  />
+                </svg>
+              </div>
             </div>
           </div>
         </div>
@@ -724,7 +811,7 @@ exports[`Command Pallet: keyboard shortcut tests when on linux when pressing SHI
                 style="width: 320px;"
               >
                 <h2>
-                  Welcome to some-product-name!
+                  Welcome to OpenLens!
                 </h2>
                 <p>
                   To get you started we have auto-detected your clusters in your
@@ -874,120 +961,149 @@ exports[`Command Pallet: keyboard shortcut tests when on linux when pressing SHI
           class="items"
         >
           <div
-            class="winMenu"
+            class="preventedDragging"
           >
             <div
-              data-testid="window-menu"
+              class="winMenu"
             >
-              <svg
-                height="12"
-                shape-rendering="crispEdges"
-                viewBox="0 0 12 12"
-                width="12"
+              <div
+                data-testid="window-menu"
               >
-                <path
-                  d="M0,8.5h12v1H0V8.5z"
-                  fill="currentColor"
-                />
-                <path
-                  d="M0,5.5h12v1H0V5.5z"
-                  fill="currentColor"
-                />
-                <path
-                  d="M0,2.5h12v1H0V2.5z"
-                  fill="currentColor"
-                />
-              </svg>
+                <svg
+                  height="12"
+                  shape-rendering="crispEdges"
+                  viewBox="0 0 12 12"
+                  width="12"
+                >
+                  <path
+                    d="M0,8.5h12v1H0V8.5z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M0,5.5h12v1H0V5.5z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M0,2.5h12v1H0V2.5z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
             </div>
           </div>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="home-button"
-          >
-            <span
-              class="icon"
-              data-icon-name="home"
-            >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
-          >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
-            >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
-          >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
-            >
-              arrow_forward
-            </span>
-          </i>
-        </div>
-        <div
-          class="items"
-        >
           <div
-            class="windowButtons linuxButtons"
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
+            >
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
+          <div
+            class="preventedDragging"
           >
             <div
-              class="minimize"
-              data-testid="window-minimize"
+              class="windowButtons linuxButtons"
             >
-              <svg
-                shape-rendering="crispEdges"
-                viewBox="0 0 12 12"
+              <div
+                class="minimize"
+                data-testid="window-minimize"
               >
-                <rect
-                  fill="currentColor"
-                  height="1"
-                  width="10"
-                  x="1"
-                  y="9"
-                />
-              </svg>
-            </div>
-            <div
-              class="maximize"
-              data-testid="window-maximize"
-            >
-              <svg
-                shape-rendering="crispEdges"
-                viewBox="0 0 12 12"
+                <svg
+                  shape-rendering="crispEdges"
+                  viewBox="0 0 12 12"
+                >
+                  <rect
+                    fill="currentColor"
+                    height="1"
+                    width="10"
+                    x="1"
+                    y="9"
+                  />
+                </svg>
+              </div>
+              <div
+                class="maximize"
+                data-testid="window-maximize"
               >
-                <rect
-                  fill="none"
-                  height="9"
-                  stroke="currentColor"
-                  width="9"
-                  x="1.5"
-                  y="1.5"
-                />
-              </svg>
-            </div>
-            <div
-              class="close"
-              data-testid="window-close"
-            >
-              <svg
-                shape-rendering="crispEdges"
-                viewBox="0 0 12 12"
+                <svg
+                  shape-rendering="crispEdges"
+                  viewBox="0 0 12 12"
+                >
+                  <rect
+                    fill="none"
+                    height="9"
+                    stroke="currentColor"
+                    width="9"
+                    x="1.5"
+                    y="1.5"
+                  />
+                </svg>
+              </div>
+              <div
+                class="close"
+                data-testid="window-close"
               >
-                <polygon
-                  fill="currentColor"
-                  points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"
-                />
-              </svg>
+                <svg
+                  shape-rendering="crispEdges"
+                  viewBox="0 0 12 12"
+                >
+                  <polygon
+                    fill="currentColor"
+                    points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"
+                  />
+                </svg>
+              </div>
             </div>
           </div>
         </div>
@@ -1019,7 +1135,7 @@ exports[`Command Pallet: keyboard shortcut tests when on linux when pressing SHI
                 style="width: 320px;"
               >
                 <h2>
-                  Welcome to some-product-name!
+                  Welcome to OpenLens!
                 </h2>
                 <p>
                   To get you started we have auto-detected your clusters in your
@@ -1156,43 +1272,62 @@ exports[`Command Pallet: keyboard shortcut tests when on macOS renders 1`] = `
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="home-button"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -1221,7 +1356,7 @@ exports[`Command Pallet: keyboard shortcut tests when on macOS renders 1`] = `
                 style="width: 320px;"
               >
                 <h2>
-                  Welcome to some-product-name!
+                  Welcome to OpenLens!
                 </h2>
                 <p>
                   To get you started we have auto-detected your clusters in your
@@ -1358,43 +1493,62 @@ exports[`Command Pallet: keyboard shortcut tests when on macOS when pressing ESC
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="home-button"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -1423,7 +1577,7 @@ exports[`Command Pallet: keyboard shortcut tests when on macOS when pressing ESC
                 style="width: 320px;"
               >
                 <h2>
-                  Welcome to some-product-name!
+                  Welcome to OpenLens!
                 </h2>
                 <p>
                   To get you started we have auto-detected your clusters in your
@@ -1560,43 +1714,62 @@ exports[`Command Pallet: keyboard shortcut tests when on macOS when pressing SHI
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="home-button"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -1625,7 +1798,7 @@ exports[`Command Pallet: keyboard shortcut tests when on macOS when pressing SHI
                 style="width: 320px;"
               >
                 <h2>
-                  Welcome to some-product-name!
+                  Welcome to OpenLens!
                 </h2>
                 <p>
                   To get you started we have auto-detected your clusters in your
@@ -1774,43 +1947,62 @@ exports[`Command Pallet: keyboard shortcut tests when on macOS when pressing SHI
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="home-button"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -1839,7 +2031,7 @@ exports[`Command Pallet: keyboard shortcut tests when on macOS when pressing SHI
                 style="width: 320px;"
               >
                 <h2>
-                  Welcome to some-product-name!
+                  Welcome to OpenLens!
                 </h2>
                 <p>
                   To get you started we have auto-detected your clusters in your
diff --git a/src/features/extensions/__snapshots__/navigation-using-application-menu.test.ts.snap b/src/features/extensions/__snapshots__/navigation-using-application-menu.test.ts.snap
index bf03515a34..a3f8413f52 100644
--- a/src/features/extensions/__snapshots__/navigation-using-application-menu.test.ts.snap
+++ b/src/features/extensions/__snapshots__/navigation-using-application-menu.test.ts.snap
@@ -11,43 +11,62 @@ exports[`extensions - navigation using application menu renders 1`] = `
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="home-button"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -76,7 +95,7 @@ exports[`extensions - navigation using application menu renders 1`] = `
               style="width: 320px;"
             >
               <h2>
-                Welcome to some-product-name!
+                Welcome to OpenLens!
               </h2>
               <p>
                 To get you started we have auto-detected your clusters in your
@@ -211,44 +230,62 @@ exports[`extensions - navigation using application menu when navigating to exten
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
diff --git a/src/features/helm-charts/__snapshots__/add-custom-helm-repository-in-preferences.test.ts.snap b/src/features/helm-charts/__snapshots__/add-custom-helm-repository-in-preferences.test.ts.snap
index b824016800..1ae3058496 100644
--- a/src/features/helm-charts/__snapshots__/add-custom-helm-repository-in-preferences.test.ts.snap
+++ b/src/features/helm-charts/__snapshots__/add-custom-helm-repository-in-preferences.test.ts.snap
@@ -12,44 +12,62 @@ exports[`add custom helm repository in preferences when navigating to preference
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -591,44 +609,62 @@ exports[`add custom helm repository in preferences when navigating to preference
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -1181,44 +1217,62 @@ exports[`add custom helm repository in preferences when navigating to preference
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -1882,44 +1936,62 @@ exports[`add custom helm repository in preferences when navigating to preference
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -2480,44 +2552,62 @@ exports[`add custom helm repository in preferences when navigating to preference
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -3181,44 +3271,62 @@ exports[`add custom helm repository in preferences when navigating to preference
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -4064,44 +4172,62 @@ exports[`add custom helm repository in preferences when navigating to preference
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -4765,44 +4891,62 @@ exports[`add custom helm repository in preferences when navigating to preference
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -5648,44 +5792,62 @@ exports[`add custom helm repository in preferences when navigating to preference
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -6350,44 +6512,62 @@ exports[`add custom helm repository in preferences when navigating to preference
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -6948,44 +7128,62 @@ exports[`add custom helm repository in preferences when navigating to preference
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -7535,44 +7733,62 @@ exports[`add custom helm repository in preferences when navigating to preference
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
diff --git a/src/features/helm-charts/__snapshots__/add-helm-repository-from-list-in-preferences.test.ts.snap b/src/features/helm-charts/__snapshots__/add-helm-repository-from-list-in-preferences.test.ts.snap
index d453863fb4..6857cbcfb0 100644
--- a/src/features/helm-charts/__snapshots__/add-helm-repository-from-list-in-preferences.test.ts.snap
+++ b/src/features/helm-charts/__snapshots__/add-helm-repository-from-list-in-preferences.test.ts.snap
@@ -12,44 +12,62 @@ exports[`add helm repository from list in preferences when navigating to prefere
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -591,44 +609,62 @@ exports[`add helm repository from list in preferences when navigating to prefere
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -1181,44 +1217,62 @@ exports[`add helm repository from list in preferences when navigating to prefere
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -1824,44 +1878,62 @@ exports[`add helm repository from list in preferences when navigating to prefere
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -2414,44 +2486,62 @@ exports[`add helm repository from list in preferences when navigating to prefere
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -3004,44 +3094,62 @@ exports[`add helm repository from list in preferences when navigating to prefere
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -3583,44 +3691,62 @@ exports[`add helm repository from list in preferences when navigating to prefere
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -4207,44 +4333,62 @@ exports[`add helm repository from list in preferences when navigating to prefere
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -4894,44 +5038,62 @@ exports[`add helm repository from list in preferences when navigating to prefere
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -5518,44 +5680,62 @@ exports[`add helm repository from list in preferences when navigating to prefere
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
diff --git a/src/features/helm-charts/__snapshots__/listing-active-helm-repositories-in-preferences.test.ts.snap b/src/features/helm-charts/__snapshots__/listing-active-helm-repositories-in-preferences.test.ts.snap
index dcbac4a681..9084aceca4 100644
--- a/src/features/helm-charts/__snapshots__/listing-active-helm-repositories-in-preferences.test.ts.snap
+++ b/src/features/helm-charts/__snapshots__/listing-active-helm-repositories-in-preferences.test.ts.snap
@@ -12,44 +12,62 @@ exports[`listing active helm repositories in preferences when navigating to pref
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -591,44 +609,62 @@ exports[`listing active helm repositories in preferences when navigating to pref
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -1170,44 +1206,62 @@ exports[`listing active helm repositories in preferences when navigating to pref
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -1641,44 +1695,62 @@ exports[`listing active helm repositories in preferences when navigating to pref
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -2220,44 +2292,62 @@ exports[`listing active helm repositories in preferences when navigating to pref
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -2691,44 +2781,62 @@ exports[`listing active helm repositories in preferences when navigating to pref
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -3270,44 +3378,62 @@ exports[`listing active helm repositories in preferences when navigating to pref
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -3894,44 +4020,62 @@ exports[`listing active helm repositories in preferences when navigating to pref
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -4365,44 +4509,62 @@ exports[`listing active helm repositories in preferences when navigating to pref
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -4836,44 +4998,62 @@ exports[`listing active helm repositories in preferences when navigating to pref
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
diff --git a/src/features/helm-charts/__snapshots__/remove-helm-repository-from-list-of-active-repository-in-preferences.test.ts.snap b/src/features/helm-charts/__snapshots__/remove-helm-repository-from-list-of-active-repository-in-preferences.test.ts.snap
index 9690003f48..d5b1c6b99e 100644
--- a/src/features/helm-charts/__snapshots__/remove-helm-repository-from-list-of-active-repository-in-preferences.test.ts.snap
+++ b/src/features/helm-charts/__snapshots__/remove-helm-repository-from-list-of-active-repository-in-preferences.test.ts.snap
@@ -12,44 +12,62 @@ exports[`remove helm repository from list of active repositories in preferences
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -591,44 +609,62 @@ exports[`remove helm repository from list of active repositories in preferences
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -1181,44 +1217,62 @@ exports[`remove helm repository from list of active repositories in preferences
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -1771,44 +1825,62 @@ exports[`remove helm repository from list of active repositories in preferences
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
diff --git a/src/features/preferences/__snapshots__/closing-preferences.test.tsx.snap b/src/features/preferences/__snapshots__/closing-preferences.test.tsx.snap
index 720d17ab66..14108e700e 100644
--- a/src/features/preferences/__snapshots__/closing-preferences.test.tsx.snap
+++ b/src/features/preferences/__snapshots__/closing-preferences.test.tsx.snap
@@ -11,44 +11,62 @@ exports[`preferences - closing-preferences given accessing preferences directly
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -662,44 +680,62 @@ exports[`preferences - closing-preferences given accessing preferences directly
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -917,44 +953,62 @@ exports[`preferences - closing-preferences given accessing preferences directly
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -1038,44 +1092,62 @@ exports[`preferences - closing-preferences given accessing preferences directly
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -1159,44 +1231,62 @@ exports[`preferences - closing-preferences given already in a page and then navi
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -1810,44 +1900,62 @@ exports[`preferences - closing-preferences given already in a page and then navi
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -2065,44 +2173,62 @@ exports[`preferences - closing-preferences given already in a page and then navi
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -2320,44 +2446,62 @@ exports[`preferences - closing-preferences given already in a page and then navi
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
diff --git a/src/features/preferences/__snapshots__/extension-adding-preference-tabs.test.tsx.snap b/src/features/preferences/__snapshots__/extension-adding-preference-tabs.test.tsx.snap
index 37b1c86792..37c4fe3bd3 100644
--- a/src/features/preferences/__snapshots__/extension-adding-preference-tabs.test.tsx.snap
+++ b/src/features/preferences/__snapshots__/extension-adding-preference-tabs.test.tsx.snap
@@ -12,44 +12,62 @@ exports[`preferences: extension adding preference tabs given in preferences, whe
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
diff --git a/src/features/preferences/__snapshots__/navigation-to-application-preferences.test.ts.snap b/src/features/preferences/__snapshots__/navigation-to-application-preferences.test.ts.snap
index 8f3df16d7c..ed6248be68 100644
--- a/src/features/preferences/__snapshots__/navigation-to-application-preferences.test.ts.snap
+++ b/src/features/preferences/__snapshots__/navigation-to-application-preferences.test.ts.snap
@@ -11,44 +11,62 @@ exports[`preferences - navigation to application preferences given in some child
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -326,44 +344,62 @@ exports[`preferences - navigation to application preferences given in some child
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
diff --git a/src/features/preferences/__snapshots__/navigation-to-editor-preferences.test.ts.snap b/src/features/preferences/__snapshots__/navigation-to-editor-preferences.test.ts.snap
index ccb22a9388..e74e650060 100644
--- a/src/features/preferences/__snapshots__/navigation-to-editor-preferences.test.ts.snap
+++ b/src/features/preferences/__snapshots__/navigation-to-editor-preferences.test.ts.snap
@@ -11,44 +11,62 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -650,44 +668,62 @@ exports[`preferences - navigation to editor preferences given in preferences, wh
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
diff --git a/src/features/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap b/src/features/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap
index 1d894a42df..7d1082e4e3 100644
--- a/src/features/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap
+++ b/src/features/preferences/__snapshots__/navigation-to-extension-specific-preferences.test.tsx.snap
@@ -26,44 +26,62 @@ exports[`preferences - navigation to extension specific preferences given in pre
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -315,44 +333,62 @@ exports[`preferences - navigation to extension specific preferences given in pre
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -616,44 +652,62 @@ exports[`preferences - navigation to extension specific preferences given in pre
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -917,44 +971,62 @@ exports[`preferences - navigation to extension specific preferences given in pre
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -1241,44 +1313,62 @@ exports[`preferences - navigation to extension specific preferences given in pre
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -1880,44 +1970,62 @@ exports[`preferences - navigation to extension specific preferences given in pre
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -2554,44 +2662,62 @@ exports[`preferences - navigation to extension specific preferences given in pre
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -2867,44 +2993,62 @@ exports[`preferences - navigation to extension specific preferences given in pre
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -3126,44 +3270,62 @@ exports[`preferences - navigation to extension specific preferences when navigat
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -3415,44 +3577,62 @@ exports[`preferences - navigation to extension specific preferences when navigat
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
diff --git a/src/features/preferences/__snapshots__/navigation-to-kubernetes-preferences.test.ts.snap b/src/features/preferences/__snapshots__/navigation-to-kubernetes-preferences.test.ts.snap
index e97c2a1e4d..506b3bca81 100644
--- a/src/features/preferences/__snapshots__/navigation-to-kubernetes-preferences.test.ts.snap
+++ b/src/features/preferences/__snapshots__/navigation-to-kubernetes-preferences.test.ts.snap
@@ -11,44 +11,62 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -650,44 +668,62 @@ exports[`preferences - navigation to kubernetes preferences given in preferences
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
diff --git a/src/features/preferences/__snapshots__/navigation-to-proxy-preferences.test.ts.snap b/src/features/preferences/__snapshots__/navigation-to-proxy-preferences.test.ts.snap
index 6c0d16035f..3ea412f5b3 100644
--- a/src/features/preferences/__snapshots__/navigation-to-proxy-preferences.test.ts.snap
+++ b/src/features/preferences/__snapshots__/navigation-to-proxy-preferences.test.ts.snap
@@ -11,44 +11,62 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -650,44 +668,62 @@ exports[`preferences - navigation to proxy preferences given in preferences, whe
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
diff --git a/src/features/preferences/__snapshots__/navigation-to-telemetry-preferences.test.tsx.snap b/src/features/preferences/__snapshots__/navigation-to-telemetry-preferences.test.tsx.snap
index b82a730aa2..84d6a6699b 100644
--- a/src/features/preferences/__snapshots__/navigation-to-telemetry-preferences.test.tsx.snap
+++ b/src/features/preferences/__snapshots__/navigation-to-telemetry-preferences.test.tsx.snap
@@ -11,44 +11,62 @@ exports[`preferences - navigation to telemetry preferences given URL for Sentry
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -312,44 +330,62 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -951,44 +987,62 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -1602,44 +1656,62 @@ exports[`preferences - navigation to telemetry preferences given in preferences,
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -1891,44 +1963,62 @@ exports[`preferences - navigation to telemetry preferences given no URL for Sent
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
diff --git a/src/features/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap b/src/features/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap
index c4288ab971..12758bf9be 100644
--- a/src/features/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap
+++ b/src/features/preferences/__snapshots__/navigation-to-terminal-preferences.test.ts.snap
@@ -11,44 +11,62 @@ exports[`preferences - navigation to terminal preferences given in preferences,
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -650,44 +668,62 @@ exports[`preferences - navigation to terminal preferences given in preferences,
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
diff --git a/src/features/preferences/__snapshots__/navigation-using-application-menu.test.ts.snap b/src/features/preferences/__snapshots__/navigation-using-application-menu.test.ts.snap
index 52faefc5a2..ff29f5fb0c 100644
--- a/src/features/preferences/__snapshots__/navigation-using-application-menu.test.ts.snap
+++ b/src/features/preferences/__snapshots__/navigation-using-application-menu.test.ts.snap
@@ -11,43 +11,62 @@ exports[`preferences - navigation using application menu renders 1`] = `
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="home-button"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -76,7 +95,7 @@ exports[`preferences - navigation using application menu renders 1`] = `
               style="width: 320px;"
             >
               <h2>
-                Welcome to some-product-name!
+                Welcome to OpenLens!
               </h2>
               <p>
                 To get you started we have auto-detected your clusters in your
@@ -211,44 +230,62 @@ exports[`preferences - navigation using application menu when navigating to pref
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive focusable"
-          data-testid="home-button"
-          tabindex="0"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
diff --git a/src/features/preferences/__snapshots__/navigation-using-tray.test.ts.snap b/src/features/preferences/__snapshots__/navigation-using-tray.test.ts.snap
index 804a28d827..5697fa20e2 100644
--- a/src/features/preferences/__snapshots__/navigation-using-tray.test.ts.snap
+++ b/src/features/preferences/__snapshots__/navigation-using-tray.test.ts.snap
@@ -12,43 +12,62 @@ exports[`show-about-using-tray renders 1`] = `
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="home-button"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -77,7 +96,7 @@ exports[`show-about-using-tray renders 1`] = `
                 style="width: 320px;"
               >
                 <h2>
-                  Welcome to some-product-name!
+                  Welcome to OpenLens!
                 </h2>
                 <p>
                   To get you started we have auto-detected your clusters in your
@@ -214,44 +233,62 @@ exports[`show-about-using-tray when navigating using tray renders 1`] = `
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
diff --git a/src/features/status-bar/__snapshots__/status-bar-items-originating-from-extensions.test.tsx.snap b/src/features/status-bar/__snapshots__/status-bar-items-originating-from-extensions.test.tsx.snap
index d4c048366c..9250fdf9bf 100644
--- a/src/features/status-bar/__snapshots__/status-bar-items-originating-from-extensions.test.tsx.snap
+++ b/src/features/status-bar/__snapshots__/status-bar-items-originating-from-extensions.test.tsx.snap
@@ -12,43 +12,62 @@ exports[`status-bar-items-originating-from-extensions when application starts wh
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="home-button"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -77,7 +96,7 @@ exports[`status-bar-items-originating-from-extensions when application starts wh
                 style="width: 320px;"
               >
                 <h2>
-                  Welcome to some-product-name!
+                  Welcome to OpenLens!
                 </h2>
                 <p>
                   To get you started we have auto-detected your clusters in your
diff --git a/src/features/top-bar/extension-api/__snapshots__/extendability-using-extension-api.test.tsx.snap b/src/features/top-bar/extension-api/__snapshots__/extendability-using-extension-api.test.tsx.snap
index 245143298a..0e2d9a5c23 100644
--- a/src/features/top-bar/extension-api/__snapshots__/extendability-using-extension-api.test.tsx.snap
+++ b/src/features/top-bar/extension-api/__snapshots__/extendability-using-extension-api.test.tsx.snap
@@ -12,40 +12,61 @@ exports[`extendability-using-extension-api given an extension with a weakly type
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
       </div>
       <main>
@@ -211,44 +232,69 @@ exports[`extendability-using-extension-api given an extension with top-bar items
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
-          >
-            <span
-              class="icon"
-              data-icon-name="home"
-            >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
-          >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
-            >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
-          >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
-            >
-              arrow_forward
-            </span>
-          </i>
           <div
-            data-testid="some-top-bar-item"
+            class="preventedDragging"
           >
-            Some-content
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
+            >
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
+            >
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
+          <div
+            class="preventedDragging"
+          >
+            <div
+              data-testid="some-top-bar-item"
+            >
+              Some-content
+            </div>
           </div>
         </div>
       </div>
@@ -415,40 +461,61 @@ exports[`extendability-using-extension-api given an extension with top-bar items
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
       </div>
       <main>
@@ -614,40 +681,61 @@ exports[`extendability-using-extension-api renders 1`] = `
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
       </div>
       <main>
diff --git a/src/features/welcome/__snapshots__/navigation-using-application-menu.test.ts.snap b/src/features/welcome/__snapshots__/navigation-using-application-menu.test.ts.snap
index 928887b393..6e2a85d63b 100644
--- a/src/features/welcome/__snapshots__/navigation-using-application-menu.test.ts.snap
+++ b/src/features/welcome/__snapshots__/navigation-using-application-menu.test.ts.snap
@@ -11,43 +11,62 @@ exports[`welcome - navigation using application menu renders 1`] = `
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="home-button"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -76,7 +95,7 @@ exports[`welcome - navigation using application menu renders 1`] = `
               style="width: 320px;"
             >
               <h2>
-                Welcome to some-product-name!
+                Welcome to OpenLens!
               </h2>
               <p>
                 To get you started we have auto-detected your clusters in your
@@ -212,44 +231,62 @@ exports[`welcome - navigation using application menu when navigated somewhere el
         <div
           class="items"
         >
-          <i
-            class="Icon material interactive focusable"
-            data-testid="home-button"
-            tabindex="0"
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="home"
+            <i
+              class="Icon material interactive focusable"
+              data-testid="home-button"
+              tabindex="0"
             >
-              home
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-back"
+              <span
+                class="icon"
+                data-icon-name="home"
+              >
+                home
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_back"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-back"
             >
-              arrow_back
-            </span>
-          </i>
-          <i
-            class="Icon material interactive disabled focusable"
-            data-testid="history-forward"
+              <span
+                class="icon"
+                data-icon-name="arrow_back"
+              >
+                arrow_back
+              </span>
+            </i>
+          </div>
+          <div
+            class="size-sm"
+          />
+          <div
+            class="preventedDragging"
           >
-            <span
-              class="icon"
-              data-icon-name="arrow_forward"
+            <i
+              class="Icon material interactive disabled focusable"
+              data-testid="history-forward"
             >
-              arrow_forward
-            </span>
-          </i>
+              <span
+                class="icon"
+                data-icon-name="arrow_forward"
+              >
+                arrow_forward
+              </span>
+            </i>
+          </div>
+          <div
+            class="separator"
+          />
         </div>
-        <div
-          class="items"
-        />
       </div>
       <main>
         <div
@@ -852,43 +889,62 @@ exports[`welcome - navigation using application menu when navigated somewhere el
       <div
         class="items"
       >
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="home-button"
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="home"
+          <i
+            class="Icon material interactive focusable"
+            data-testid="home-button"
+            tabindex="0"
           >
-            home
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-back"
+            <span
+              class="icon"
+              data-icon-name="home"
+            >
+              home
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_back"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-back"
           >
-            arrow_back
-          </span>
-        </i>
-        <i
-          class="Icon material interactive disabled focusable"
-          data-testid="history-forward"
+            <span
+              class="icon"
+              data-icon-name="arrow_back"
+            >
+              arrow_back
+            </span>
+          </i>
+        </div>
+        <div
+          class="size-sm"
+        />
+        <div
+          class="preventedDragging"
         >
-          <span
-            class="icon"
-            data-icon-name="arrow_forward"
+          <i
+            class="Icon material interactive disabled focusable"
+            data-testid="history-forward"
           >
-            arrow_forward
-          </span>
-        </i>
+            <span
+              class="icon"
+              data-icon-name="arrow_forward"
+            >
+              arrow_forward
+            </span>
+          </i>
+        </div>
+        <div
+          class="separator"
+        />
       </div>
-      <div
-        class="items"
-      />
     </div>
     <main>
       <div
@@ -917,7 +973,7 @@ exports[`welcome - navigation using application menu when navigated somewhere el
               style="width: 320px;"
             >
               <h2>
-                Welcome to some-product-name!
+                Welcome to OpenLens!
               </h2>
               <p>
                 To get you started we have auto-detected your clusters in your