fix: use same tooltip layout as other charts

Author: graphieros

app/components/Compare/FacetBarChart.vue

@@ -220,13 +220,18 @@ const config = computed<VueUiHorizontalBarConfig>(() => {
             const name = datapoint?.name?.replace(/\n/g, '<br>')
             return `
             <div class="font-mono p-3 border border-border rounded-md bg-[var(--bg)]/10 backdrop-blur-md">
-              <div class="flex items-center gap-2">
+              <div class="grid grid-cols-[12px_minmax(0,1fr)_max-content] items-center gap-x-3">
                 <div class="w-3 h-3">
                   <svg viewBox="0 0 2 2" class="w-full h-full">
                     <rect x="0" y="0" width="2" height="2" rx="0.3" fill="${datapoint?.color}" />
                   </svg>
                 </div>
-                <span>${name}: ${(datapoint as VueUiHorizontalBarDatapoint).formattedValue ?? 0}</span>
+                <span class="text-3xs uppercase tracking-wide text-[var(--fg)]/70 truncate">
+                  ${name}
+                </span>
+                <span class="text-base text-[var(--fg)] font-mono tabular-nums text-end">
+                  ${(datapoint as VueUiHorizontalBarDatapoint).formattedValue ?? 0}
+                </span>
               </div>
             </div>
             `