From 1e3ac572294cd981039cf9314c395e86fe4415f3 Mon Sep 17 00:00:00 2001
From: Senrokai <enzo.marioni@avalonvanguard.com>
Date: Thu, 24 Sep 2026 23:45:48 +0200
Subject: [PATCH] Wrap a body's name on its card instead of cutting off the
 digits that tell it apart
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The detail page and the system view's object card truncated the name and the line under it with
an ellipsis. For a designation, the part that went is the part that identifies it: the audit
measured "2MASS J21252752-8138278 b" at 288 px in a 256 px heading, shown as
"2MASS J21252752-81382…", and the eyebrow at 273 px, shown as "EXOPLANET · 2MASS J21252752-8138…".

Both lines now wrap (wrap-break-word) in both places. On the dev server the heading for that
planet is two lines, 45 px high, with its scroll width equal to its 256 px box, and the eyebrow
fits in 256 px.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../body-detail/info-panel.component.spec.ts  | 43 +++++++++++++++++++
 .../body-detail/info-panel.component.ts       |  6 ++-
 .../system-object-card.component.spec.ts      | 10 +++++
 .../system-object-card.component.ts           |  6 ++-
 4 files changed, 61 insertions(+), 4 deletions(-)
 create mode 100644 src/app/features/body-detail/info-panel.component.spec.ts

diff --git a/src/app/features/body-detail/info-panel.component.spec.ts b/src/app/features/body-detail/info-panel.component.spec.ts
new file mode 100644
index 0000000..86d364b
--- /dev/null
+++ b/src/app/features/body-detail/info-panel.component.spec.ts
@@ -0,0 +1,43 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { ArticleService } from '../../core/data/article.service';
+import { PlanetAppearance } from '../../shared/astro/planet-appearance';
+import { BodyDetailViewModel } from './body-detail.model';
+import { InfoPanelComponent } from './info-panel.component';
+
+const planet: BodyDetailViewModel = {
+  id: '2MASS J21252752-8138278 b',
+  name: '2MASS J21252752-8138278 b',
+  kind: 'exoplanet',
+  hostStarName: '2MASS J21252752-8138278',
+  orbit: { semiMajorAxisAu: 7493 },
+  appearance: { planetClass: 'gasGiant', palette: { structure: 'banded' }, equilibriumTemperatureK: 2.74, bulkDensityGramsPerCm3: null, polarCapExtentDeg: 0, seed: 1 } as unknown as PlanetAppearance,
+  hasPhotography: false
+};
+
+describe('InfoPanelComponent', () => {
+  let fixture: ComponentFixture<InfoPanelComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [InfoPanelComponent],
+      providers: [provideRouter([]), { provide: ArticleService, useValue: { lookup: async () => ({ status: 'none' }) } }]
+    }).compileComponents();
+    fixture = TestBed.createComponent(InfoPanelComponent);
+    fixture.componentRef.setInput('body', planet);
+    fixture.detectChanges();
+  });
+
+  it('wraps a long designation rather than cutting off the digits that tell it apart', () => {
+    const host = fixture.nativeElement as HTMLElement;
+    const heading = host.querySelector('h1')!;
+    const eyebrow = heading.nextElementSibling!;
+    expect(heading.textContent?.trim()).toBe('2MASS J21252752-8138278 b');
+    for (const line of [heading, eyebrow]) {
+      expect(line.classList).not.toContain('truncate');
+      expect(line.classList).toContain('wrap-break-word');
+    }
+  });
+});
diff --git a/src/app/features/body-detail/info-panel.component.ts b/src/app/features/body-detail/info-panel.component.ts
index 24180fc..7304feb 100644
--- a/src/app/features/body-detail/info-panel.component.ts
+++ b/src/app/features/body-detail/info-panel.component.ts
@@ -35,8 +35,10 @@ import { ReadoutSectionsComponent } from './readout-sections.component';
 
       <header class="flex items-start gap-2 px-4 pt-4 pb-3">
         <div class="min-w-0 flex-1">
-          <h1 class="truncate text-lg leading-tight font-bold tracking-[0.04em] text-text uppercase">{{ body().name }}</h1>
-          <p class="type-eyebrow mt-1 truncate text-accent">{{ readouts().kindLabel }} · {{ body().hostStarName }}</p>
+          <!-- Wrapped, not truncated: a designation's last digits are the ones that tell it from its
+               neighbours, and an ellipsis took exactly those off "2MASS J21252752-8138278 b". -->
+          <h1 class="text-lg leading-tight font-bold tracking-[0.04em] wrap-break-word text-text uppercase">{{ body().name }}</h1>
+          <p class="type-eyebrow mt-1 wrap-break-word text-accent">{{ readouts().kindLabel }} · {{ body().hostStarName }}</p>
         </div>
         <button
           type="button"
diff --git a/src/app/features/galaxy-system/system-object-card.component.spec.ts b/src/app/features/galaxy-system/system-object-card.component.spec.ts
index fcd56d9..ff59b0d 100644
--- a/src/app/features/galaxy-system/system-object-card.component.spec.ts
+++ b/src/app/features/galaxy-system/system-object-card.component.spec.ts
@@ -83,6 +83,16 @@ describe('SystemObjectCardComponent', () => {
     expect(render(bare).textContent).not.toContain('Measured');
   });
 
+  it('wraps a long designation rather than cutting off the digits that tell it apart', () => {
+    const host = render({ ...earth, name: '2MASS J21252752-8138278 b', hostStarName: '2MASS J21252752-8138278' });
+    const name = host.querySelector('[data-testid="object-card-name"]')!;
+    expect(name.textContent?.trim()).toBe('2MASS J21252752-8138278 b');
+    for (const line of [name, name.nextElementSibling!]) {
+      expect(line.classList).not.toContain('truncate');
+      expect(line.classList).toContain('wrap-break-word');
+    }
+  });
+
   it('says a photographed surface is a photograph', () => {
     expect(render(earth).textContent).toContain('photography');
   });
diff --git a/src/app/features/galaxy-system/system-object-card.component.ts b/src/app/features/galaxy-system/system-object-card.component.ts
index 369332e..6d1b9c2 100644
--- a/src/app/features/galaxy-system/system-object-card.component.ts
+++ b/src/app/features/galaxy-system/system-object-card.component.ts
@@ -35,8 +35,10 @@ import { ChevronIconComponent } from '../../shared/ui/chevron-icon.component';
       <div data-testid="object-card" class="hud-brackets hud-acquire hud-surface font-body text-text">
         <div class="flex items-start justify-between gap-3 px-4 pt-4 pb-3">
           <header class="min-w-0">
-            <p class="truncate text-lg leading-tight font-bold tracking-[0.04em] text-text uppercase">{{ body().name }}</p>
-            <p class="type-eyebrow mt-1 truncate text-accent">{{ readouts().kindLabel }} · {{ body().hostStarName }}</p>
+            <!-- Wrapped, not truncated, as on the detail page: a designation's last digits are the
+                 ones that tell it from its neighbours. -->
+            <p data-testid="object-card-name" class="text-lg leading-tight font-bold tracking-[0.04em] wrap-break-word text-text uppercase">{{ body().name }}</p>
+            <p class="type-eyebrow mt-1 wrap-break-word text-accent">{{ readouts().kindLabel }} · {{ body().hostStarName }}</p>
           </header>
           <button
             type="button"