fix(stats): polish comparison chart

packages/stats/app/src/routes/compare-radar.tsx

@@ -86,26 +86,10 @@ export function ComparisonRadar(props: ComparisonRadarProps) {
             <For each={series()}>
               {(model) => (
                 <g data-slot="compare-radar-series" style={{ color: model.color }}>
-                  <Show when={radarSeriesPolygon(model.scores)}>
+                  <polygon data-slot="compare-radar-area" points={radarSeriesPolygon(model.scores)} />
-                    {(points) => <polygon data-slot="compare-radar-area" points={points()} />}
-                  </Show>
-                  <Show when={!radarSeriesPolygon(model.scores)}>
-                    <For each={radarSeriesConnections(model.scores)}>
-                      {(connection) => (
-                        <line
-                          data-slot="compare-radar-line"
-                          x1={connection.start.x}
-                          y1={connection.start.y}
-                          x2={connection.end.x}
-                          y2={connection.end.y}
-                        />
-                      )}
-                    </For>
-                  </Show>
                   <For each={model.scores}>
                     {(score, index) => {
-                      if (score === undefined) return null
+                      const point = () => radarPoint(index(), axes().length, score ?? 0)
-                      const point = () => radarPoint(index(), axes().length, score)
                       return (
                         <>
                           <circle data-slot="compare-radar-point" cx={point().x} cy={point().y} r="0.95" />
@@ -341,27 +325,12 @@ function radarPolygonPoints(count: number, score: number) {
 }
 
 function radarSeriesPolygon(scores: (number | undefined)[]) {
-  if (scores.some((score) => score === undefined)) return
   return scores
     .map((score, index) => radarPoint(index, scores.length, score ?? 0))
     .map((point) => `${point.x},${point.y}`)
     .join(" ")
 }
 
-function radarSeriesConnections(scores: (number | undefined)[]) {
-  return scores.flatMap((score, index) => {
-    const nextIndex = (index + 1) % scores.length
-    const next = scores[nextIndex]
-    if (score === undefined || next === undefined) return []
-    return [
-      {
-        start: radarPoint(index, scores.length, score),
-        end: radarPoint(nextIndex, scores.length, next),
-      },
-    ]
-  })
-}
-
 function radarAxisStyle(index: number, count: number) {
   const angle = -Math.PI / 2 + (index * Math.PI * 2) / count
   const horizontal = Math.cos(angle)

packages/stats/app/src/routes/index.css

@@ -5326,10 +5326,8 @@ body {
 
 [data-page="stats"] [data-component="comparison-card"] b {
   min-width: 0;
-  overflow: hidden;
   font: inherit;
-  text-overflow: ellipsis;
+  overflow-wrap: anywhere;
-  white-space: nowrap;
 }
 
 [data-page="stats"] [data-component="comparison-card"] i {
@@ -5777,9 +5775,7 @@ body {
 }
 
 [data-page="stats"] [data-slot="compare-home-select-name"] {
-  overflow: hidden;
+  overflow-wrap: anywhere;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 [data-page="stats"] [data-slot="compare-home-select-panel"][data-selected="true"] [data-slot="compare-home-plus"] {
@@ -5810,10 +5806,10 @@ body {
 [data-page="stats"] [data-component="compare-home-card"] {
   position: relative;
   display: grid;
-  grid-template-rows: 62px 1px 20px 20px;
+  grid-template-rows: 62px 1px auto 20px;
   gap: 16px;
   min-width: 0;
-  height: 184px;
+  min-height: 184px;
   box-sizing: border-box;
   padding: 16px;
   overflow: hidden;
@@ -5895,10 +5891,11 @@ body {
 [data-page="stats"] [data-slot="compare-home-card-models"] {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 6px;
   color: var(--stats-muted);
   font-weight: 400;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
 }
 
 [data-page="stats"] [data-slot="compare-home-card-models"] span {
@@ -6119,11 +6116,9 @@ body {
 
 [data-page="stats"] [data-slot="compare-radar-legend"] strong,
 [data-page="stats"] [data-slot="compare-radar-legend"] small {
-  overflow: hidden;
   font-size: 13px;
   line-height: 18px;
-  text-overflow: ellipsis;
+  overflow-wrap: anywhere;
-  white-space: nowrap;
 }
 
 [data-page="stats"] [data-slot="compare-radar-legend"] strong {
@@ -6433,13 +6428,11 @@ body {
 
 [data-page="stats"] [data-slot="compare-detail-select-name"] {
   min-width: 0;
-  overflow: hidden;
   color: var(--stats-text);
   font-size: 13px;
   font-weight: 500;
   line-height: 18px;
-  text-overflow: ellipsis;
+  overflow-wrap: anywhere;
-  white-space: nowrap;
 }
 
 [data-page="stats"] button[data-slot="compare-detail-select-model"] > svg {
@@ -6915,13 +6908,11 @@ body {
 
 [data-page="stats"] [data-slot="compare-model-modal-row-main"] > span:last-child {
   min-width: 0;
-  overflow: hidden;
   color: var(--stats-text);
   font-size: 13px;
   font-weight: 500;
   line-height: 1.1;
-  text-overflow: ellipsis;
+  overflow-wrap: anywhere;
-  white-space: nowrap;
 }
 
 [data-page="stats"] [data-slot="compare-model-modal-badge"] {
@@ -6978,13 +6969,11 @@ body {
 
 [data-page="stats"] [data-slot="compare-model-modal-detail-header"] strong {
   min-width: 0;
-  overflow: hidden;
   color: var(--stats-text);
   font-size: 13px;
   font-weight: 500;
   line-height: 1.1;
-  text-overflow: ellipsis;
+  overflow-wrap: anywhere;
-  white-space: nowrap;
 }
 
 [data-page="stats"] [data-slot="compare-model-modal-description"] {
@@ -7433,13 +7422,15 @@ body {
 
 @media (min-width: 90rem) {
   [data-page="stats"] [data-slot="header-bar"] {
+    display: grid;
+    grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
     gap: 32px;
   }
 
   [data-page="stats"] [data-slot="brand"],
   [data-page="stats"] [data-component="section-nav"],
   [data-page="stats"] [data-slot="header-actions"] {
-    flex: 1 1 0;
+    min-width: 0;
   }
 
   [data-page="stats"] [data-slot="brand"] {