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"