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/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({