Hide the formatting toolbar while a comment card is open

A selection's fixed formatting toolbar stayed above an open orphan or
anchored comment card and covered it. The orphan card's offset is now one
custom property shared by its top and max-height.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: MaggieAppleton

e2e/sidecar.e2e.ts

@@ -1325,6 +1325,19 @@ test("a removed subject block moves its comment to document orphan chrome", asyn
 	await expect(page.getByRole("dialog", { name: "Orphaned comments" })).toContainText(QUOTED);
 });
 
+test("an open comment card hides the formatting toolbar of a lingering selection", async ({ join, seed }) => {
+	await seed(TWO_BLOCKS);
+	let page = await join("ana");
+	await page.setViewportSize({ width: 1_280, height: 800 });
+	await content(page).locator("p").nth(1).selectText();
+	let toolbar = page.getByRole("toolbar", { name: "Text formatting" });
+	await expect(toolbar).toBeVisible();
+
+	let card = await thread(page);
+	await expect(card).toBeVisible();
+	await expect(toolbar).toBeHidden();
+});
+
 test("the orphaned comments popover shows its whole card beneath the pill", async ({ join, seed }) => {
 	await seed(TWO_BLOCKS);
 	let page = await join("ana");
@@ -1334,9 +1347,16 @@ test("the orphaned comments popover shows its whole card beneath the pill", asyn
 	await page.keyboard.press("Backspace");
 	await page.keyboard.press("Backspace");
 
+	// A selection's formatting toolbar would sit over the card it opens.
+	await content(page).locator("p").first().selectText();
+	let toolbar = page.getByRole("toolbar", { name: "Text formatting" });
+	await expect(toolbar).toBeVisible();
+
 	let opener = page.getByRole("button", { name: "1 orphaned comments" });
 	await opener.click();
 	let popover = page.getByRole("dialog", { name: "Orphaned comments" });
+	await expect(popover).toBeVisible();
+	await expect(toolbar).toBeHidden();
 	// The card sizes against the document, not the pill that holds it.
 	let reply = popover.getByRole("textbox", { name: "Reply", exact: true });
 	await expect(reply).toBeInViewport({ ratio: 1 });

packages/editor/src/styles.css

@@ -1489,10 +1489,11 @@
 }
 
 .plan-comment-orphan-card {
-	top: 2.5rem;
+	--orphan-card-offset: 2.5rem;
+	top: var(--orphan-card-offset);
 	right: 0;
 	width: min(20rem, calc(100cqi - 1rem));
-	max-height: calc(100% - 2.5rem);
+	max-height: calc(100% - var(--orphan-card-offset));
 }
 
 /* The scrim every phone sheet shares, lighter while this sheet rests at its medium detent. */
@@ -5441,6 +5442,11 @@ body:has(.plan-comment-sheet-popup[data-swiping])
 	animation: plan-bubble-enter var(--duration-fast) var(--ease-out);
 }
 
+/* An open comment card owns the reader's attention; a lingering selection's toolbar would cover it. */
+:root:has(.plan-comment-card.motion-comment-surface:not(.is-closing)) .plan-formatting-toolbar {
+	display: none;
+}
+
 @media (prefers-reduced-motion: reduce) {
 	.plan-formatting-toolbar {
 		animation: none;