From d0fea09daac7969c874aa25e54e7072ce82c3c43 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Sun, 12 Apr 2026 21:58:30 +0200
Subject: [PATCH 1/4] fix: improve compare scatter chart legend

---
 app/components/Compare/FacetScatterChart.vue | 92 ++++++++++++++------
 1 file changed, 63 insertions(+), 29 deletions(-)

diff --git a/app/components/Compare/FacetScatterChart.vue b/app/components/Compare/FacetScatterChart.vue
index a0de43bb25..582e05fb06 100644
--- a/app/components/Compare/FacetScatterChart.vue
+++ b/app/components/Compare/FacetScatterChart.vue
@@ -16,8 +16,12 @@ const props = defineProps<{
 const colorMode = useColorMode()
 const resolvedMode = shallowRef<'light' | 'dark'>('light')
 const rootEl = shallowRef<HTMLElement | null>(null)
+const { width } = useElementSize(rootEl)
 const { copy, copied } = useClipboard()
 
+const mobileBreakpointWidth = 640
+const isMobile = computed(() => width.value > 0 && width.value < mobileBreakpointWidth)
+
 const { colors } = useCssVariables(
   [
     '--bg',
@@ -277,6 +281,13 @@ const highlightedAxis = shallowRef<AxisHighlight>(null)
 function toggleAxisHighlight(state: AxisHighlight) {
   highlightedAxis.value = state
 }
+
+const readyTeleport = shallowRef(false)
+
+onMounted(async () => {
+  await nextTick()
+  readyTeleport.value = true
+})
 </script>
 
 <template>
@@ -296,9 +307,7 @@ function toggleAxisHighlight(state: AxisHighlight) {
     </div>
 
     <div class="flex flex-col sm:flex-row gap-4 items-start">
-      <div
-        class="w-full sm:w-fit order-1 sm:order-2 flex flex-row sm:flex-col gap-2 sm:self-end sm:mb-17"
-      >
+      <div class="w-full sm:w-fit order-1 sm:order-2 flex flex-row sm:flex-col gap-2">
         <SelectField
           class="w-full"
           id="select-facet-scatter-x"
@@ -327,6 +336,22 @@ function toggleAxisHighlight(state: AxisHighlight) {
           @focusin="toggleAxisHighlight('y')"
           @focusout="toggleAxisHighlight(null)"
         />
+
+        <h3
+          id="scatter-chart-legend-packages"
+          :class="[
+            'mb-1 font-mono text-fg-subtle tracking-wide uppercase mt-4 text-2xs',
+            isMobile ? 'sr-only' : 'block',
+          ]"
+        >
+          {{ $t('compare.packages.section_packages') }}
+        </h3>
+
+        <div
+          id="compare-scatter-legend"
+          role="group"
+          aria-labelledby="scatter-chart-legend-packages"
+        ></div>
       </div>
 
       <ClientOnly>
@@ -344,34 +369,43 @@ function toggleAxisHighlight(state: AxisHighlight) {
             </template>
 
             <!-- Custom legend -->
-            <template #legend="{ legend }">
-              <div
-                class="flex flex-row flex-wrap gap-x-6 justify-center gap-y-2 px-6 sm:px-10 text-xs"
+            <template #legend="{ legend }" v-if="readyTeleport">
+              <div id="compare-scatter-legend-inner"></div>
+              <Teleport
+                :to="isMobile ? '#compare-scatter-legend-inner' : '#compare-scatter-legend'"
               >
-                <button
-                  v-for="datapoint in legend"
-                  :key="datapoint.name"
-                  :aria-pressed="datapoint.isSegregated"
-                  :aria-label="datapoint.name"
-                  type="button"
-                  class="flex gap-1 place-items-center"
-                  @click="datapoint.segregate()"
+                <ul
+                  :class="
+                    isMobile
+                      ? 'flex flex-row flex-wrap gap-x-6 justify-center gap-y-2 px-6 sm:px-10 text-xs'
+                      : 'text-sm leading-6'
+                  "
                 >
-                  <div class="h-3 w-3">
-                    <svg viewBox="0 0 2 2" class="w-full">
-                      <circle cx="1" cy="1" r="1" :fill="datapoint.color" />
-                    </svg>
-                  </div>
-                  <span
-                    class="text-fg"
-                    :style="{
-                      textDecoration: datapoint.isSegregated ? 'line-through' : undefined,
-                    }"
-                  >
-                    {{ datapoint.name }}
-                  </span>
-                </button>
-              </div>
+                  <li v-for="datapoint in legend" :key="datapoint.name">
+                    <button
+                      :aria-pressed="datapoint.isSegregated"
+                      :aria-label="datapoint.name"
+                      type="button"
+                      class="flex gap-1.5 place-items-center"
+                      @click="datapoint.segregate()"
+                    >
+                      <div class="h-3 w-3" aria-hidden="true">
+                        <svg viewBox="0 0 2 2" class="w-full">
+                          <circle cx="1" cy="1" r="1" :fill="datapoint.color" />
+                        </svg>
+                      </div>
+                      <span
+                        class="text-fg"
+                        :style="{
+                          textDecoration: datapoint.isSegregated ? 'line-through' : undefined,
+                        }"
+                      >
+                        {{ datapoint.name }}
+                      </span>
+                    </button>
+                  </li>
+                </ul>
+              </Teleport>
             </template>
 
             <!-- Custom svg content -->

From 78b668bbbac36504af4feba5db79e238995eeeee Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Sun, 12 Apr 2026 22:06:56 +0200
Subject: [PATCH 2/4] fix: add missing a11y in inner teleport target

---
 app/components/Compare/FacetScatterChart.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/components/Compare/FacetScatterChart.vue b/app/components/Compare/FacetScatterChart.vue
index 582e05fb06..21f7a7bf72 100644
--- a/app/components/Compare/FacetScatterChart.vue
+++ b/app/components/Compare/FacetScatterChart.vue
@@ -370,7 +370,11 @@ onMounted(async () => {
 
             <!-- Custom legend -->
             <template #legend="{ legend }" v-if="readyTeleport">
-              <div id="compare-scatter-legend-inner"></div>
+              <div
+                id="compare-scatter-legend-inner"
+                role="group"
+                aria-labelledby="scatter-chart-legend-packages"
+              ></div>
               <Teleport
                 :to="isMobile ? '#compare-scatter-legend-inner' : '#compare-scatter-legend'"
               >

From 5486e45a48a4cd6ae982f2434543de722217ec95 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Sun, 12 Apr 2026 22:11:13 +0200
Subject: [PATCH 3/4] fix: follow the rabbit

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

diff --git a/app/components/Compare/FacetScatterChart.vue b/app/components/Compare/FacetScatterChart.vue
index 21f7a7bf72..55993a7d22 100644
--- a/app/components/Compare/FacetScatterChart.vue
+++ b/app/components/Compare/FacetScatterChart.vue
@@ -349,8 +349,8 @@ onMounted(async () => {
 
         <div
           id="compare-scatter-legend"
-          role="group"
-          aria-labelledby="scatter-chart-legend-packages"
+          :role="isMobile ? undefined : 'group'"
+          :aria-labelledby="isMobile ? undefined : 'scatter-chart-legend-packages'"
         ></div>
       </div>
 
@@ -372,8 +372,8 @@ onMounted(async () => {
             <template #legend="{ legend }" v-if="readyTeleport">
               <div
                 id="compare-scatter-legend-inner"
-                role="group"
-                aria-labelledby="scatter-chart-legend-packages"
+                :role="isMobile ? 'group' : undefined"
+                :aria-labelledby="isMobile ? 'scatter-chart-legend-packages' : undefined"
               ></div>
               <Teleport
                 :to="isMobile ? '#compare-scatter-legend-inner' : '#compare-scatter-legend'"

From 0f0987a5665a60fa1f8c795cc5659618be6cd952 Mon Sep 17 00:00:00 2001
From: graphieros <alec.lloyd.probert@gmail.com>
Date: Sun, 12 Apr 2026 22:20:14 +0200
Subject: [PATCH 4/4] fix: condition display of teleport instead of the legend
 slot

---
 app/components/Compare/FacetScatterChart.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/components/Compare/FacetScatterChart.vue b/app/components/Compare/FacetScatterChart.vue
index 55993a7d22..c21ea2c32e 100644
--- a/app/components/Compare/FacetScatterChart.vue
+++ b/app/components/Compare/FacetScatterChart.vue
@@ -369,13 +369,14 @@ onMounted(async () => {
             </template>
 
             <!-- Custom legend -->
-            <template #legend="{ legend }" v-if="readyTeleport">
+            <template #legend="{ legend }">
               <div
                 id="compare-scatter-legend-inner"
                 :role="isMobile ? 'group' : undefined"
                 :aria-labelledby="isMobile ? 'scatter-chart-legend-packages' : undefined"
               ></div>
               <Teleport
+                v-if="readyTeleport"
                 :to="isMobile ? '#compare-scatter-legend-inner' : '#compare-scatter-legend'"
               >
                 <ul