fix(rectification): show mobile natal board as a covering bottom sheet

BUG-330: the compact board sat in the same layer as the composer, so peek copy overlapped the sheet title. Overlay only below 768px; desktop stays a side column.
Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/src/app/globals.css

@@ -322,6 +322,7 @@ button:disabled { cursor: default; opacity: .45; }
 @keyframes onboarding-caret { 50% { opacity: 0; } }
 @keyframes account-overlay-enter { from { opacity: 0; } }
 @keyframes account-dialog-enter { from { opacity: 0; transform: translateY(var(--space-1)) scale(.985); } }
+@keyframes rectification-sheet-enter { from { opacity: 0; transform: translateY(18%); } }
 
 @media (hover: hover) {
   .session-list button:not(:disabled):hover, .profile-trigger:not(:disabled):hover { background: var(--color-light-hover); color: var(--color-ink); }
@@ -1874,6 +1875,7 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
 .birth-time-clock-menu .select-item { justify-content: flex-start; }
 
 .rectification-workspace {
+  position: relative;
   min-width: 0;
   min-height: 0;
   height: 100%;
@@ -1883,9 +1885,11 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
 }
 .rectification-workspace.is-compact {
   grid-template-columns: minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr);
 }
-.rectification-workspace.is-compact.is-board-open {
-  grid-template-rows: minmax(8rem, 1fr) minmax(13rem, 46%);
+.rectification-workspace.is-compact .rectification-workspace__chat,
+.rectification-workspace.is-compact .rectification-board-overlay {
+  grid-area: 1 / 1;
 }
 .rectification-workspace__chat {
   min-width: 0;
@@ -1913,13 +1917,42 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
   background: var(--color-canvas-soft);
   color: var(--color-ink);
 }
+.rectification-workspace.is-compact .rectification-board-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 20;
+  display: grid;
+  align-items: end;
+  isolation: isolate;
+}
+.rectification-board-scrim {
+  position: absolute;
+  inset: 0;
+  border: 0;
+  background: var(--color-scrim);
+  cursor: pointer;
+  animation: account-overlay-enter 180ms ease-out both;
+}
 .rectification-board.is-sheet {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 92%;
+  max-height: 100%;
+  min-height: 0;
+  overflow: hidden;
   border-inline-start: 0;
   border-block-start: 1px solid var(--color-border);
   border-start-start-radius: var(--radius-lg);
   border-start-end-radius: var(--radius-lg);
-  box-shadow: 0 -8px 28px color-mix(in srgb, var(--color-ink) 10%, transparent);
+  background: var(--color-canvas);
+  box-shadow: 0 -12px 32px color-mix(in srgb, var(--color-ink) 12%, transparent);
   padding-bottom: env(safe-area-inset-bottom);
+  animation: rectification-sheet-enter 280ms var(--ease-out) both;
+  grid-template-rows: auto auto minmax(0, 1fr);
+}
+.rectification-board.is-sheet .rectification-board__header {
+  background: var(--color-canvas);
 }
 .rectification-board__handle {
   width: 36px;

frontend/src/components/rectification-agentic-chat.tsx

@@ -266,17 +266,15 @@ export function RectificationAgenticChat(props: RectificationAgenticChatProps) {
   const boardTitleId = useId();
 
   useLayoutEffect(() => {
-    const node = workspace.current;
-    if (!node) return;
+    const query = window.matchMedia(`(max-width: ${RECTIFICATION_BOARD_SPLIT_MIN_PX - 1}px)`);
     const update = () => {
-      const nextCompact = node.clientWidth < RECTIFICATION_BOARD_SPLIT_MIN_PX;
+      const nextCompact = query.matches;
       setCompactBoard(nextCompact);
       if (!nextCompact) setBoardOpen(false);
     };
     update();
-    const observer = new ResizeObserver(update);
-    observer.observe(node);
-    return () => observer.disconnect();
+    query.addEventListener("change", update);
+    return () => query.removeEventListener("change", update);
   }, []);
 
   useEffect(() => {
@@ -689,7 +687,7 @@ export function RectificationAgenticChat(props: RectificationAgenticChatProps) {
       ref={workspace}
       className={`rectification-workspace${compactBoard ? " is-compact" : ""}${boardOpen ? " is-board-open" : ""}`}
     >
-      <div className="rectification-workspace__chat">
+      <div className="rectification-workspace__chat" inert={compactBoard && boardOpen ? true : undefined}>
         <section ref={conversation} className="conversation is-rectification" aria-label="生时校正对话" aria-busy={busy || regeneratingMessageKey !== null}>
           <div className="message-list">
           {pendingConsultationQuestion?.trim() && (

frontend/src/components/rectification-board.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { X } from "lucide-react";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import {
   groupWindowTransitions,
   rectificationBoardPeekCopy,
@@ -210,8 +210,11 @@ export function RectificationBoard({
   titleId: string;
   onClose: () => void;
 }>) {
+  const sheetRef = useRef<HTMLElement>(null);
+
   useEffect(() => {
     if (!compact || !open) return;
+    sheetRef.current?.focus();
     const handleKey = (event: KeyboardEvent) => {
       if (event.key === "Escape") onClose();
     };
@@ -221,11 +224,15 @@ export function RectificationBoard({
 
   if (compact && !open) return null;
 
-  return (
+  const sheet = (
     <aside
+      ref={sheetRef}
       id={boardId}
       className={`rectification-board${compact ? " is-sheet" : ""}`}
       aria-labelledby={titleId}
+      role={compact ? "dialog" : undefined}
+      aria-modal={compact ? true : undefined}
+      tabIndex={compact ? -1 : undefined}
     >
       <RectificationBoardBody
         result={result}
@@ -237,6 +244,15 @@ export function RectificationBoard({
       />
     </aside>
   );
+
+  if (!compact) return sheet;
+
+  return (
+    <div className="rectification-board-overlay">
+      <div className="rectification-board-scrim" aria-hidden="true" onClick={onClose} />
+      {sheet}
+    </div>
+  );
 }
 
 export function RectificationBoardPeek({

frontend/src/lib/rectification-board-model.ts

@@ -11,7 +11,7 @@ import {
   type RectificationHouseTable,
 } from "./rectification-candidate-result";
 
-export const RECTIFICATION_BOARD_SPLIT_MIN_PX = 832;
+export const RECTIFICATION_BOARD_SPLIT_MIN_PX = 768;
 
 export type GroupedWindowMinute = Readonly<{
   at: string;