Shorten ECharts and MUI X labels in stats library list (#8666)

## Problem

On the `/stats` page, the **libraries** section renders each library's
name in a fixed-width 80px column. Two names — `Apache ECharts` and `MUI
X Charts` — wrap to two lines, so those rows are taller than the rest
and the histogram bars misalign.

## Fix

Add a stats-only short-name override so every library label stays on a
single line:

- `echarts` → **ECharts**
- `muix` → **MUI X**

The override (`statsLibLabel`) is applied in both the
quality-distribution and lines-of-code histograms. The canonical full
names from the API (`Apache ECharts`, `MUI X Charts`) are intentionally
kept everywhere else — the Libraries page, SEO meta descriptions, and
plot-of-the-day — so this is purely a display tweak for the dense stats
list.

## Verification

- `yarn type-check` ✅
- `yarn lint` ✅ (no new warnings)
- `yarn test src/pages/StatsPage.test.tsx` ✅ (10/10)

https://claude.ai/code/session_018EdFoKNnMYTnUXBhXWpM9Z

---
_Generated by [Claude
Code](https://claude.ai/code/session_018EdFoKNnMYTnUXBhXWpM9Z)_

---------

Co-authored-by: Claude <noreply@anthropic.com>

Author: MarkusNeusinger

app/src/pages/StatsPage.test.tsx

@@ -35,6 +35,31 @@ const mockDashboard = {
       loc_buckets: { '0-20': 2, '40-60': 5 },
       avg_loc: 78,
     },
+    // echarts/muix carry their canonical API names so the StatsPage short-label
+    // override (statsLibLabel) is exercised: 'Apache ECharts' -> 'ECharts',
+    // 'MUI X Charts' -> 'MUI X'. matplotlib above asserts the fallback to name.
+    {
+      id: 'echarts',
+      name: 'Apache ECharts',
+      impl_count: 30,
+      avg_score: 89,
+      min_score: 70,
+      max_score: 96,
+      score_buckets: { '85-90': 5, '90-95': 8 },
+      loc_buckets: { '60-80': 4 },
+      avg_loc: 95,
+    },
+    {
+      id: 'muix',
+      name: 'MUI X Charts',
+      impl_count: 8,
+      avg_score: 88,
+      min_score: 72,
+      max_score: 94,
+      score_buckets: { '85-90': 3, '90-95': 2 },
+      loc_buckets: { '80-100': 2 },
+      avg_loc: 110,
+    },
   ],
   coverage_matrix: [
     {
@@ -207,6 +232,26 @@ describe('StatsPage', () => {
     expect(screen.getByText('95')).toBeInTheDocument();
   });
 
+  it('shortens echarts/muix library labels and falls back to name for others', async () => {
+    mockFetchSuccess();
+
+    render(<StatsPage />);
+
+    await waitFor(() => {
+      expect(screen.getByText('libraries')).toBeInTheDocument();
+    });
+
+    // statsLibLabel maps the canonical API names to single-line labels. Each
+    // appears twice — once in the quality histogram, once in the LOC histogram.
+    expect(screen.getAllByText('ECharts')).toHaveLength(2);
+    expect(screen.getAllByText('MUI X')).toHaveLength(2);
+    // The canonical names must NOT leak through anywhere on the page.
+    expect(screen.queryByText('Apache ECharts')).not.toBeInTheDocument();
+    expect(screen.queryByText('MUI X Charts')).not.toBeInTheDocument();
+    // Libraries without an override still render their plain name (2 histograms).
+    expect(screen.getAllByText('matplotlib').length).toBeGreaterThanOrEqual(2);
+  });
+
   it('renders tag distribution categories', async () => {
     mockFetchSuccess();
 

app/src/pages/StatsPage.tsx

@@ -99,6 +99,19 @@ function formatNum(n: number): string {
   return n.toLocaleString();
 }
 
+// Shorter labels for the fixed-width (80px) library column so every row stays
+// on a single line. The API's canonical names ("Apache ECharts", "MUI X
+// Charts") wrap to two lines here; we keep the full names elsewhere (Libraries
+// page, SEO, plot-of-the-day) and only trim them in this dense histogram list.
+const STATS_LIB_LABELS: Record<string, string> = {
+  echarts: 'ECharts',
+  muix: 'MUI X',
+};
+
+function statsLibLabel(lib: Pick<LibraryStats, 'id' | 'name'>): string {
+  return STATS_LIB_LABELS[lib.id] ?? lib.name;
+}
+
 export function StatsPage() {
   const { trackPageview, trackEvent } = useAnalytics();
   const { isDark } = useTheme();
@@ -361,7 +374,7 @@ export function StatsPage() {
                       pb: '2px',
                     }}
                   >
-                    {lib.name}
+                    {statsLibLabel(lib)}
                   </Typography>
                   <Box
                     sx={{
@@ -442,7 +455,7 @@ export function StatsPage() {
                       pb: '2px',
                     }}
                   >
-                    {lib.name}
+                    {statsLibLabel(lib)}
                   </Typography>
                   <Box
                     sx={{