From e7abc8671a38c320f32ccf3ea5a0f7dd95f853c8 Mon Sep 17 00:00:00 2001
From: userquin <userquin@gmail.com>
Date: Mon, 9 Feb 2026 13:54:01 +0100
Subject: [PATCH 1/5] fix(ui): invalid html button markup

---
 app/components/Compare/PackageSelector.vue   | 14 +++----
 app/components/Header/AccountMenu.client.vue | 40 ++++++++++----------
 app/components/Package/DeprecatedTree.vue    |  4 +-
 app/components/Package/VulnerabilityTree.vue |  8 ++--
 4 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/app/components/Compare/PackageSelector.vue b/app/components/Compare/PackageSelector.vue
index fd0efd385..7b4d0dd2a 100644
--- a/app/components/Compare/PackageSelector.vue
+++ b/app/components/Compare/PackageSelector.vue
@@ -178,13 +178,13 @@ function handleBlur() {
             :aria-label="$t('compare.no_dependency.add_column')"
             @click="addPackage(NO_DEPENDENCY_ID)"
           >
-            <div class="text-sm text-accent italic flex items-center gap-2">
+            <span class="text-sm text-accent italic flex items-center gap-2">
               <span class="i-carbon:clean w-4 h-4" aria-hidden="true" />
               {{ $t('compare.no_dependency.typeahead_title') }}
-            </div>
-            <div class="text-xs text-fg-muted truncate mt-0.5">
+            </span>
+            <span class="text-xs text-fg-muted truncate mt-0.5">
               {{ $t('compare.no_dependency.typeahead_description') }}
-            </div>
+            </span>
           </ButtonBase>
 
           <div v-if="isSearching" class="px-4 py-3 text-sm text-fg-muted">
@@ -196,10 +196,10 @@ function handleBlur() {
             class="block w-full text-start"
             @click="addPackage(result.name)"
           >
-            <div class="font-mono text-sm text-fg">{{ result.name }}</div>
-            <div v-if="result.description" class="text-xs text-fg-muted truncate mt-0.5">
+            <span class="font-mono text-sm text-fg">{{ result.name }}</span>
+            <span v-if="result.description" class="text-xs text-fg-muted truncate mt-0.5">
               {{ result.description }}
-            </div>
+            </span>
           </ButtonBase>
         </div>
       </Transition>
diff --git a/app/components/Header/AccountMenu.client.vue b/app/components/Header/AccountMenu.client.vue
index 9d9bd3204..4ad58741f 100644
--- a/app/components/Header/AccountMenu.client.vue
+++ b/app/components/Header/AccountMenu.client.vue
@@ -65,7 +65,7 @@ function openAuthModal() {
       class="border-none"
     >
       <!-- Stacked avatars when connected -->
-      <div
+      <span
         v-if="hasAnyConnection"
         class="flex items-center"
         :class="hasBothConnections ? '-space-x-2' : ''"
@@ -103,7 +103,7 @@ function openAuthModal() {
         >
           <span class="i-carbon-cloud w-3 h-3 text-fg-muted" aria-hidden="true" />
         </span>
-      </div>
+      </span>
 
       <!-- "connect" text when not connected -->
       <span v-if="!hasAnyConnection" class="font-mono text-sm">
@@ -163,10 +163,10 @@ function openAuthModal() {
               >
                 <span class="i-carbon-terminal w-4 h-4 text-fg-muted" aria-hidden="true" />
               </span>
-              <div class="flex-1 min-w-0">
-                <div class="font-mono text-sm text-fg truncate">~{{ npmUser }}</div>
-                <div class="text-xs text-fg-subtle">{{ $t('account_menu.npm_cli') }}</div>
-              </div>
+              <span class="flex-1 min-w-0">
+                <span class="font-mono text-sm text-fg truncate">~{{ npmUser }}</span>
+                <span class="text-xs text-fg-subtle">{{ $t('account_menu.npm_cli') }}</span>
+              </span>
               <span
                 v-if="operationCount > 0"
                 class="px-1.5 py-0.5 font-mono text-xs rounded"
@@ -206,10 +206,10 @@ function openAuthModal() {
               >
                 <span class="i-carbon-cloud w-4 h-4 text-fg-muted" aria-hidden="true" />
               </span>
-              <div class="flex-1 min-w-0">
-                <div class="font-mono text-sm text-fg truncate">@{{ atprotoUser.handle }}</div>
-                <div class="text-xs text-fg-subtle">{{ $t('account_menu.atmosphere') }}</div>
-              </div>
+              <span class="flex-1 min-w-0">
+                <span class="font-mono text-sm text-fg truncate">@{{ atprotoUser.handle }}</span>
+                <span class="text-xs text-fg-subtle">{{ $t('account_menu.atmosphere') }}</span>
+              </span>
             </button>
           </div>
 
@@ -236,16 +236,16 @@ function openAuthModal() {
                 />
                 <span v-else class="i-carbon-terminal w-4 h-4 text-fg-muted" aria-hidden="true" />
               </span>
-              <div class="flex-1 min-w-0">
-                <div class="font-mono text-sm text-fg">
+              <span class="flex-1 min-w-0">
+                <span class="font-mono text-sm text-fg">
                   {{
                     isNpmConnecting
                       ? $t('account_menu.connecting')
                       : $t('account_menu.connect_npm_cli')
                   }}
-                </div>
-                <div class="text-xs text-fg-subtle">{{ $t('account_menu.npm_cli_desc') }}</div>
-              </div>
+                </span>
+                <span class="text-xs text-fg-subtle">{{ $t('account_menu.npm_cli_desc') }}</span>
+              </span>
             </button>
 
             <button
@@ -258,12 +258,12 @@ function openAuthModal() {
               <span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
                 <span class="i-carbon-cloud w-4 h-4 text-fg-muted" aria-hidden="true" />
               </span>
-              <div class="flex-1 min-w-0">
-                <div class="font-mono text-sm text-fg">
+              <span class="flex-1 min-w-0">
+                <span class="font-mono text-sm text-fg">
                   {{ $t('account_menu.connect_atmosphere') }}
-                </div>
-                <div class="text-xs text-fg-subtle">{{ $t('account_menu.atmosphere_desc') }}</div>
-              </div>
+                </span>
+                <span class="text-xs text-fg-subtle">{{ $t('account_menu.atmosphere_desc') }}</span>
+              </span>
             </button>
           </div>
         </div>
diff --git a/app/components/Package/DeprecatedTree.vue b/app/components/Package/DeprecatedTree.vue
index f78d90b29..d8e06b795 100644
--- a/app/components/Package/DeprecatedTree.vue
+++ b/app/components/Package/DeprecatedTree.vue
@@ -53,12 +53,12 @@ function getDepthStyle(depth: DependencyDepth) {
         aria-controls="deprecated-tree-details"
         @click="isExpanded = !isExpanded"
       >
-        <div class="flex items-center gap-2 min-w-0">
+        <span class="flex items-center gap-2 min-w-0">
           <span class="i-carbon-warning-hex w-4 h-4 shrink-0" aria-hidden="true" />
           <span class="font-mono text-sm font-medium truncate">
             {{ $t('package.deprecated.tree_found', analysisData!.deprecatedPackages.length) }}
           </span>
-        </div>
+        </span>
         <span
           class="i-carbon-chevron-down w-4 h-4 transition-transform duration-200 shrink-0"
           :class="{ 'rotate-180': isExpanded }"
diff --git a/app/components/Package/VulnerabilityTree.vue b/app/components/Package/VulnerabilityTree.vue
index 677f57825..5965e89d9 100644
--- a/app/components/Package/VulnerabilityTree.vue
+++ b/app/components/Package/VulnerabilityTree.vue
@@ -83,7 +83,7 @@ function getDepthStyle(depth: string | undefined) {
         aria-controls="vuln-tree-details"
         @click="isExpanded = !isExpanded"
       >
-        <div class="flex items-center gap-2 min-w-0">
+        <span class="flex items-center gap-2 min-w-0">
           <span class="i-carbon:warning-alt w-4 h-4 shrink-0" aria-hidden="true" />
           <span class="font-mono text-sm font-medium truncate">
             {{
@@ -98,15 +98,15 @@ function getDepthStyle(depth: string | undefined) {
               )
             }}
           </span>
-        </div>
-        <div class="flex items-center gap-2 shrink-0">
+        </span>
+        <span class="flex items-center gap-2 shrink-0">
           <span class="text-xs opacity-80 hidden sm:inline">{{ summaryText }}</span>
           <span
             class="i-carbon:chevron-down w-4 h-4 transition-transform duration-200"
             :class="{ 'rotate-180': isExpanded }"
             aria-hidden="true"
           />
-        </div>
+        </span>
       </button>
 
       <!-- Expandable details -->

From 425ef630b2e144f5e32b1b1888e48e708eb57a18 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Mon, 9 Feb 2026 13:10:15 +0000
Subject: [PATCH 2/5] fix: set spans to block in account menu

---
 app/components/Header/AccountMenu.client.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/components/Header/AccountMenu.client.vue b/app/components/Header/AccountMenu.client.vue
index 4ad58741f..8bc23a0ca 100644
--- a/app/components/Header/AccountMenu.client.vue
+++ b/app/components/Header/AccountMenu.client.vue
@@ -164,7 +164,7 @@ function openAuthModal() {
                 <span class="i-carbon-terminal w-4 h-4 text-fg-muted" aria-hidden="true" />
               </span>
               <span class="flex-1 min-w-0">
-                <span class="font-mono text-sm text-fg truncate">~{{ npmUser }}</span>
+                <span class="font-mono text-sm text-fg truncate block">~{{ npmUser }}</span>
                 <span class="text-xs text-fg-subtle">{{ $t('account_menu.npm_cli') }}</span>
               </span>
               <span
@@ -207,7 +207,9 @@ function openAuthModal() {
                 <span class="i-carbon-cloud w-4 h-4 text-fg-muted" aria-hidden="true" />
               </span>
               <span class="flex-1 min-w-0">
-                <span class="font-mono text-sm text-fg truncate">@{{ atprotoUser.handle }}</span>
+                <span class="font-mono text-sm text-fg truncate block"
+                  >@{{ atprotoUser.handle }}</span
+                >
                 <span class="text-xs text-fg-subtle">{{ $t('account_menu.atmosphere') }}</span>
               </span>
             </button>
@@ -237,7 +239,7 @@ function openAuthModal() {
                 <span v-else class="i-carbon-terminal w-4 h-4 text-fg-muted" aria-hidden="true" />
               </span>
               <span class="flex-1 min-w-0">
-                <span class="font-mono text-sm text-fg">
+                <span class="font-mono text-sm text-fg block">
                   {{
                     isNpmConnecting
                       ? $t('account_menu.connecting')
@@ -259,7 +261,7 @@ function openAuthModal() {
                 <span class="i-carbon-cloud w-4 h-4 text-fg-muted" aria-hidden="true" />
               </span>
               <span class="flex-1 min-w-0">
-                <span class="font-mono text-sm text-fg">
+                <span class="font-mono text-sm text-fg block">
                   {{ $t('account_menu.connect_atmosphere') }}
                 </span>
                 <span class="text-xs text-fg-subtle">{{ $t('account_menu.atmosphere_desc') }}</span>

From bae644626ae2d356c47f9da3f8819587191cd668 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Mon, 9 Feb 2026 13:23:05 +0000
Subject: [PATCH 3/5] fix: add block to first line

---
 app/components/Compare/PackageSelector.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/Compare/PackageSelector.vue b/app/components/Compare/PackageSelector.vue
index 7b4d0dd2a..0ff26b077 100644
--- a/app/components/Compare/PackageSelector.vue
+++ b/app/components/Compare/PackageSelector.vue
@@ -178,7 +178,7 @@ function handleBlur() {
             :aria-label="$t('compare.no_dependency.add_column')"
             @click="addPackage(NO_DEPENDENCY_ID)"
           >
-            <span class="text-sm text-accent italic flex items-center gap-2">
+            <span class="text-sm text-accent italic flex items-center gap-2 block">
               <span class="i-carbon:clean w-4 h-4" aria-hidden="true" />
               {{ $t('compare.no_dependency.typeahead_title') }}
             </span>
@@ -196,7 +196,7 @@ function handleBlur() {
             class="block w-full text-start"
             @click="addPackage(result.name)"
           >
-            <span class="font-mono text-sm text-fg">{{ result.name }}</span>
+            <span class="font-mono text-sm text-fg block">{{ result.name }}</span>
             <span v-if="result.description" class="text-xs text-fg-muted truncate mt-0.5">
               {{ result.description }}
             </span>

From 9e601faee3161e8ef3e0981f4c32b872673f2e74 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Mon, 9 Feb 2026 13:24:22 +0000
Subject: [PATCH 4/5] chore: more block

---
 app/components/Package/DeprecatedTree.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Package/DeprecatedTree.vue b/app/components/Package/DeprecatedTree.vue
index d8e06b795..4d63a3eb6 100644
--- a/app/components/Package/DeprecatedTree.vue
+++ b/app/components/Package/DeprecatedTree.vue
@@ -53,7 +53,7 @@ function getDepthStyle(depth: DependencyDepth) {
         aria-controls="deprecated-tree-details"
         @click="isExpanded = !isExpanded"
       >
-        <span class="flex items-center gap-2 min-w-0">
+        <span class="flex items-center gap-2 min-w-0 block">
           <span class="i-carbon-warning-hex w-4 h-4 shrink-0" aria-hidden="true" />
           <span class="font-mono text-sm font-medium truncate">
             {{ $t('package.deprecated.tree_found', analysisData!.deprecatedPackages.length) }}

From 931d9df188ea74ed3f892e5041ac6aed65477790 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Mon, 9 Feb 2026 13:25:08 +0000
Subject: [PATCH 5/5] chore: another

---
 app/components/Package/VulnerabilityTree.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/Package/VulnerabilityTree.vue b/app/components/Package/VulnerabilityTree.vue
index 5965e89d9..463ef5ab5 100644
--- a/app/components/Package/VulnerabilityTree.vue
+++ b/app/components/Package/VulnerabilityTree.vue
@@ -83,7 +83,7 @@ function getDepthStyle(depth: string | undefined) {
         aria-controls="vuln-tree-details"
         @click="isExpanded = !isExpanded"
       >
-        <span class="flex items-center gap-2 min-w-0">
+        <span class="flex items-center gap-2 min-w-0 block">
           <span class="i-carbon:warning-alt w-4 h-4 shrink-0" aria-hidden="true" />
           <span class="font-mono text-sm font-medium truncate">
             {{