From c3d54c5d4423d4d0a45c63e9f2cecc8b7188e49d Mon Sep 17 00:00:00 2001
From: MrAlders0n <MrAlders0n@smal.ca>
Date: Tue, 13 Oct 2026 13:14:08 -0400
Subject: [PATCH] Atlas: keep the Heard by toggle one width so flipping never
 wraps the header

---
 src/features/atlas/AtlasCard.tsx        | 15 +++++++++++++--
 tests/features/atlas/AtlasCard.test.tsx |  4 ++++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/features/atlas/AtlasCard.tsx b/src/features/atlas/AtlasCard.tsx
index 0e2f58e..c244c7a 100644
--- a/src/features/atlas/AtlasCard.tsx
+++ b/src/features/atlas/AtlasCard.tsx
@@ -100,16 +100,27 @@ export function AtlasCard({
     </span>
   );
 
+  // Both toggle labels share one grid cell so the button is as wide as the longer one in either
+  // state; otherwise flipping could push the actions under the title and grow the card.
+  const labels = [t("atlas.heardBy"), t("tabs.Analytics")];
   const actions = (
     <div className="ml-auto flex shrink-0 items-center gap-1">
       <button
         type="button"
-        className={ACTION_BUTTON_CLASS}
+        className={`${ACTION_BUTTON_CLASS} grid text-center`}
         aria-pressed={heardOpen}
+        aria-label={labels[heardOpen ? 1 : 0]}
         disabled={!node}
         onClick={toggleHeard}
       >
-        {t(heardOpen ? "tabs.Analytics" : "atlas.heardBy")}
+        {labels.map((label, index) => {
+          const shown = index === (heardOpen ? 1 : 0);
+          return (
+            <span key={label} aria-hidden={!shown || undefined} className={`col-start-1 row-start-1 ${shown ? "" : "invisible"}`}>
+              {label}
+            </span>
+          );
+        })}
       </button>
       <button type="button" className={ACTION_BUTTON_CLASS} onClick={onRemove}>
         {t("atlas.remove")}
diff --git a/tests/features/atlas/AtlasCard.test.tsx b/tests/features/atlas/AtlasCard.test.tsx
index 9711af7..cac643e 100644
--- a/tests/features/atlas/AtlasCard.test.tsx
+++ b/tests/features/atlas/AtlasCard.test.tsx
@@ -143,6 +143,9 @@ describe("AtlasCard", () => {
     expect(screen.getByRole("button", { name: "Drag to reorder" })).toBeInTheDocument();
     const toggle = screen.getByRole("button", { name: "Heard by" });
     expect(toggle).toHaveAttribute("aria-pressed", "false");
+    // Both labels stay in the button, stacked, so flipping never changes its width and wraps the header.
+    expect(toggle.querySelector('[aria-hidden="true"]')).toHaveTextContent("Analytics");
+    expect(toggle.querySelector('[aria-hidden="true"]')).toHaveClass("invisible", "col-start-1", "row-start-1");
     fireEvent.click(toggle);
     expect(handlers.onHeardToggle).toHaveBeenCalled();
     view.rerender(
@@ -153,6 +156,7 @@ describe("AtlasCard", () => {
     const summary = await screen.findByText(/2 observers heard the latest packet/);
     expect(summary).toHaveTextContent(/ago$/);
     expect(screen.getByRole("button", { name: "Analytics" })).toHaveAttribute("aria-pressed", "true");
+    expect(screen.getByRole("button", { name: "Analytics" }).querySelector('[aria-hidden="true"]')).toHaveTextContent("Heard by");
     expect(screen.queryByText("Mean SNR")).not.toBeInTheDocument();
     expect(summary.parentElement).toHaveStyle({ height: "240px" });
     expect(summary.nextElementSibling).toHaveClass("overflow-y-auto");