test(hub-client e2e): expect breadcrumb chip to flip below at the document top (bd-pvcnea83)

The edit-chrome flip (this branch) intentionally moves the breadcrumb chip BELOW
the edit surface when a block is flush against the viewport top — there is no room
above. The existing breadcrumb-geometry test asserted the chip is always ABOVE the
surface using a top-of-document paragraph fixture, so it became a hard CI failure
(chip bottom 116.30 > textarea top 66.00) once the flip landed.

- Rewrite that test to assert the flipped-below placement at the top: chip top ≥
  surface bottom (not overlapping the edited text), anchored near the surface
  bottom, and chip top ≥ 0 (uncropped — the whole point of the flip).
- Add a companion test proving the flip is CONDITIONAL: editing a later paragraph
  (ample headroom above) keeps the chip in its default ABOVE placement.

Both verified locally against the real hub e2e (chromium): top block → chip below
(textarea bottom 91.5, chip top 95.5); non-top block → chip above. Full
breadcrumb-geometry spec: 8 passed, 1 skipped, 1 pre-existing-flaky (4b
scroll-tracking, passed on retry — edits a mid-document block, unaffected).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: cscheid

hub-client/e2e/q2-preview-breadcrumb-geometry.spec.ts

@@ -65,11 +65,14 @@ test.describe('Phase 4 — Breadcrumb chip geometry (real browser)', () => {
     });
 
     // -------------------------------------------------------------------------
-    // Existing vertical test (P3.5 tier i item 1) — kept byte-for-byte.
-    // Guards: chip sits above the active edit surface, never occluding line 1.
+    // Vertical placement at the top of the document (P3.5 tier i item 1).
+    // The first block is flush against the viewport top, so there is no room
+    // ABOVE it for the chip — it must flip BELOW the edit surface rather than be
+    // clipped above the scroll area (bd-pvcnea83). Guards: chip flipped below,
+    // anchored near the surface bottom, and never clipped above the viewport.
     // -------------------------------------------------------------------------
 
-    test('chip sits above the active edit surface, never occluding line 1', async ({ page }) => {
+    test('chip flips below the edit surface at the document top (uncropped, never occluding the edited text)', async ({ page }) => {
         // Enable the nesting-cursor BEFORE any navigation — addInitScript re-applies
         // on every document load, including the iframe.
         await page.addInitScript(() => {
@@ -129,30 +132,33 @@ test.describe('Phase 4 — Breadcrumb chip geometry (real browser)', () => {
         // TypeScript narrowing (already asserted above).
         if (!chipBox || !taBox) throw new Error('impossible — asserted above');
 
+        const surfaceBottom = taBox.y + taBox.height;
         console.log(
             `Chip box: y=${chipBox.y.toFixed(2)}, bottom=${(chipBox.y + chipBox.height).toFixed(2)}, height=${chipBox.height.toFixed(2)}\n` +
-            `Textarea box: y=${taBox.y.toFixed(2)}`,
+            `Textarea box: y=${taBox.y.toFixed(2)}, bottom=${surfaceBottom.toFixed(2)}`,
         );
 
-        // Step 5: assertions.
+        // Step 5: assertions (bd-pvcnea83 — flipped-below placement at the top).
         const TOL = 2;
 
-        // (a) Chip bottom is AT OR ABOVE surface top — never occludes line 1.
+        // (a) Chip top is AT OR BELOW the surface bottom — the chip flipped below the
+        //     edit box (no room above at the document top), so it never overlaps the
+        //     edited text.
         expect(
-            chipBox.y + chipBox.height,
-            `chip bottom (${(chipBox.y + chipBox.height).toFixed(2)}) must be ≤ textarea top (${taBox.y.toFixed(2)}) + ${TOL}px tolerance`,
-        ).toBeLessThanOrEqual(taBox.y + TOL);
+            chipBox.y,
+            `chip top (${chipBox.y.toFixed(2)}) must be ≥ surface bottom (${surfaceBottom.toFixed(2)}) − ${TOL}px — flipped below, not overlapping the surface`,
+        ).toBeGreaterThanOrEqual(surfaceBottom - TOL);
 
-        // (b) Chip bottom is anchored close to the surface top (not floating far above).
+        // (b) Chip is anchored close to the surface bottom (not floating far below).
         //     The gap must be less than ~one chip-gap (12 px) so the chip is still
         //     visually attached and the useLayoutEffect positioning is doing real work.
         expect(
-            taBox.y - (chipBox.y + chipBox.height),
-            `chip must be anchored near the surface top — gap (${(taBox.y - (chipBox.y + chipBox.height)).toFixed(2)}px) must be < 12px`,
+            chipBox.y - surfaceBottom,
+            `chip must be anchored near the surface bottom — gap (${(chipBox.y - surfaceBottom).toFixed(2)}px) must be < 12px`,
         ).toBeLessThan(12);
 
-        // (c) At the document top, the chip sits in the page margin (not clipped above
-        //     the viewport — `top` is clamped to ≥ 0 in real CSS).
+        // (c) The chip is not clipped above the viewport top (the whole point of the
+        //     flip — `top` is ≥ 0 in real CSS).
         expect(
             chipBox.y,
             `chip top (${chipBox.y.toFixed(2)}) must be ≥ 0 — not clipped above the viewport`,
@@ -162,6 +168,80 @@ test.describe('Phase 4 — Breadcrumb chip geometry (real browser)', () => {
         await iframe.locator('textarea').first().press('Escape');
     });
 
+    // -------------------------------------------------------------------------
+    // Companion to the above: the flip is CONDITIONAL. When a block has room
+    // above it (not at the document top), the chip stays in its default ABOVE
+    // placement — proving bd-pvcnea83 only flips when there isn't room, rather
+    // than always rendering below.
+    // -------------------------------------------------------------------------
+
+    test('chip stays above the edit surface when there is room above (non-top block)', async ({ page }) => {
+        await page.addInitScript(() => {
+            localStorage.setItem('quarto-hub:preferences', JSON.stringify({
+                version: 1,
+                scrollSyncEnabled: true,
+                errorOverlayCollapsed: true,
+                colorScheme: 'auto',
+                unlockNestingCursor: true,
+            }));
+        });
+
+        const serverUrl = getServerUrl();
+        // A title plus several paragraphs gives a later paragraph ample headroom
+        // above it, so the chip is NOT clipped and keeps its default above placement.
+        const QMD = [
+            '---',
+            'title: With a title',
+            'format: q2-preview',
+            '---',
+            '',
+            'Para one.',
+            '',
+            'Para two.',
+            '',
+            'Para three.',
+            '',
+            'Para four.',
+            '',
+        ].join('\n');
+
+        const docId = await createProjectOnServer(serverUrl, [
+            { path: '_quarto.yml', content: 'project:\n  type: default\n', contentType: 'text' },
+            { path: 'breadcrumb-above.qmd', content: QMD, contentType: 'text' },
+        ]);
+
+        const iframe = await openFile(page, serverUrl, docId, 'breadcrumb-above.qmd');
+
+        // Edit a LATER paragraph (index 2 → "Para three.") — well below the top.
+        await iframe.locator('p[data-block-pool-id]').nth(2).click();
+        await iframe.locator('textarea').first().waitFor({ timeout: 10_000 });
+        const chip = iframe.locator('[data-testid="q2-breadcrumb-chip"]');
+        await chip.waitFor({ timeout: 5000 });
+
+        const chipBox = await chip.boundingBox();
+        const taBox = await iframe.locator('textarea').first().boundingBox();
+        if (!chipBox || !taBox) throw new Error('chip/textarea bounding box must be non-null');
+
+        console.log(
+            `Chip box: y=${chipBox.y.toFixed(2)}, bottom=${(chipBox.y + chipBox.height).toFixed(2)}\n` +
+            `Textarea box: y=${taBox.y.toFixed(2)}`,
+        );
+
+        const TOL = 2;
+        // Default ABOVE placement: chip bottom sits at or above the surface top.
+        expect(
+            chipBox.y + chipBox.height,
+            `chip bottom (${(chipBox.y + chipBox.height).toFixed(2)}) must be ≤ surface top (${taBox.y.toFixed(2)}) + ${TOL}px — default above placement`,
+        ).toBeLessThanOrEqual(taBox.y + TOL);
+        // Anchored near the surface top.
+        expect(
+            taBox.y - (chipBox.y + chipBox.height),
+            `chip must be anchored near the surface top — gap (${(taBox.y - (chipBox.y + chipBox.height)).toFixed(2)}px) must be < 12px`,
+        ).toBeLessThan(12);
+
+        await iframe.locator('textarea').first().press('Escape');
+    });
+
     // -------------------------------------------------------------------------
     // 4a — DESIGN GO/NO-GO GATE (not a regression guard).
     //