fix(e2e): repair the two integration-card assertions the sweep left behind

Both ends of the divider removal were green and the pipe between them was
never run. The `<hr>` came out of every integration card, all three unit
tests were updated to expect none, and this browser spec kept asserting nine.
It is the same shape as the failure this project keeps rediscovering: two
correct halves and nothing exercising the assembly.

The cost was not just a red spec. The Pixel-5 horizontal-overflow assertion
sits AFTER it in the same test, so `/settings/integrations` had no proven
mobile-overflow check for the whole sweep — the test never reached it.

The second assertion read a sentence's bytes and broke on the text diet while
the thing it was about — the card rendering its explainer at all — never
changed. `SettingsCardHeader` now names its description slot
(`data-slot="settings-card-description"`) and the spec targets that: the slot
is present, non-empty, and not a raw i18n key. The product name stays
assertable because a proper noun is not prose. The wording itself is pinned
where it belongs, in the unit test that reads the same bundle it renders from.

e2e/settings-integrations-mobile.spec.ts

@@ -182,11 +182,13 @@ test.describe("/settings/integrations Pixel-5 layout", () => {
       fallback.locator('[data-testid="integration-status-pill"]'),
     ).toHaveAttribute("data-state", "stalled");
 
-    // Card anatomy is uniform now that Nightscout, the OAuth cards and Apple
-    // Health all carry the divider.
+    // Card anatomy is uniform because no integration card paints a rule under
+    // its header any more. The `<hr>` existed only in this folder — nine cards
+    // carrying a separator no other Settings card has — and the card's own gap
+    // does the separating now.
     await expect(
       page.locator('[data-testid="integration-card-divider"]'),
-    ).toHaveCount(9);
+    ).toHaveCount(0);
 
     // Withings is connected in this fixture; WHOOP is a BYO-keys card that
     // stays dormant until an operator adds credentials, so assert the one
@@ -251,8 +253,18 @@ test.describe("Apple Health guidance", () => {
 
     const card = page.getByTestId("apple-health-card");
     await expect(card).toBeVisible();
+    // The product name is a proper noun and stays assertable; the sentence
+    // around it is not. The description SLOT is the stable target — this spec
+    // is about the card rendering its explainer, not about its wording, and
+    // the wording is pinned by `apple-health-card.test.tsx` against the same
+    // i18n bundle it renders from.
     await expect(card).toContainText("HealthLog iOS app");
-    await expect(card).toContainText("not a web or OAuth connection");
+    const description = card.locator('[data-slot="settings-card-description"]');
+    await expect(description).toBeVisible();
+    await expect(description).not.toHaveText("");
+    // A raw key means the bundle lookup failed, which is the failure this
+    // assertion can actually see from a browser.
+    await expect(description).not.toContainText("settings.appleHealth");
     await expect(page.getByTestId("apple-health-status")).toHaveAttribute(
       "data-state",
       "pending-setup",

src/components/settings/__tests__/one-piece-anatomy.test.tsx

@@ -85,6 +85,16 @@ describe("SettingsCardHeader — one description sentence, one text run", () =>
     const html = render(<SettingsCardHeader icon={Bell} title="Channels" />);
     expect(html).toMatch(/<h2[^>]*class="text-lg font-semibold"/);
   });
+
+  it("names the description slot so a browser test can target it", () => {
+    // A spec that asserted the sentence's bytes broke on the text diet while
+    // the thing it was actually about — the card rendering its explainer —
+    // never changed. This attribute is the stable target that replaced it.
+    const html = render(
+      <SettingsCardHeader icon={Bell} title="Channels" description="One." />,
+    );
+    expect(html).toContain('data-slot="settings-card-description"');
+  });
 });
 
 describe("SettingsCardActions — one row, one shape", () => {

src/components/settings/_card-header.tsx

@@ -94,9 +94,17 @@ export function SettingsCardHeader({
         </div>
         {/* One sentence, one text run. This slot deliberately carries no
             `space-y-*`: the vertical rhythm was the licence call sites used
-            to stack explainer paragraphs into a muted `text-xs` slot. */}
+            to stack explainer paragraphs into a muted `text-xs` slot.
+            The `data-slot` is what a browser test targets — asserting the
+            sentence's bytes couples the suite to wording, and a text diet
+            then breaks specs that were never about the words. */}
         {description ? (
-          <div className="text-muted-foreground text-xs">{description}</div>
+          <div
+            data-slot="settings-card-description"
+            className="text-muted-foreground text-xs"
+          >
+            {description}
+          </div>
         ) : null}
       </div>
     </header>