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.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"