Wrap a body's name on its card instead of cutting off the digits that tell it apart

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>

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');
+    }
+  });
+});

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"

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');
   });

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"