diff --git a/frontend-web/src/open-canvas/components/artifact/WritingRewritePreview.tsx b/frontend-web/src/open-canvas/components/artifact/WritingRewritePreview.tsx
index 907ea73c..02f24a58 100644
--- a/frontend-web/src/open-canvas/components/artifact/WritingRewritePreview.tsx
+++ b/frontend-web/src/open-canvas/components/artifact/WritingRewritePreview.tsx
@@ -101,27 +101,35 @@ export function WritingRewritePreview({
 
   // ── Position ────────────────────────────────────────────────────────────
   const panelWidth = 480;
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [computedPos, setComputedPos] = useState<{ left: number; top: number } | null>(null);
+  const [computedPos, setComputedPos] = useState<{
+    left: number;
+    top?: number;
+    bottom?: number;
+    maxHeight: number;
+  } | null>(null);
 
   useLayoutEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    const h = el.getBoundingClientRect().height;
-    const safeX = Math.min(Math.max(pos.x, 8), window.innerWidth - panelWidth - 8);
-    const spaceBelow = window.innerHeight - pos.y - 8;
-    const spaceAbove = pos.y - 8;
-    let safeY: number;
-    if (spaceBelow >= h) {
-      safeY = pos.y + 6;
-    } else if (spaceAbove >= h) {
-      safeY = pos.y - h - 6;
-    } else if (spaceBelow >= spaceAbove) {
-      safeY = Math.max(8, window.innerHeight - h - 8);
+    const MARGIN = 8;
+    const GAP = 6;
+    const MIN_HEIGHT = 160;
+    const safeX = Math.min(Math.max(pos.x, MARGIN), window.innerWidth - panelWidth - MARGIN);
+    const spaceBelow = window.innerHeight - pos.y - MARGIN;
+    const spaceAbove = pos.y - MARGIN;
+    if (spaceBelow >= spaceAbove) {
+      // More space below — anchor top at selection bottom, grow downward
+      setComputedPos({
+        left: safeX,
+        top: pos.y + GAP,
+        maxHeight: Math.max(MIN_HEIGHT, spaceBelow - GAP),
+      });
     } else {
-      safeY = 8;
+      // More space above — anchor bottom at selection top, grow upward
+      setComputedPos({
+        left: safeX,
+        bottom: window.innerHeight - pos.y + GAP,
+        maxHeight: Math.max(MIN_HEIGHT, spaceAbove - GAP),
+      });
     }
-    setComputedPos({ left: safeX, top: safeY });
   }, [pos.x, pos.y]);
 
   const actionLabel = tone
@@ -134,16 +142,18 @@ export function WritingRewritePreview({
       <div className="fixed inset-0 z-[9990]" onMouseDown={onClose} />
 
       <div
-        ref={containerRef}
         style={{
           position: "fixed",
           left: computedPos?.left ?? pos.x,
-          top: computedPos?.top ?? (pos.y + 6),
+          ...(computedPos?.bottom !== undefined
+            ? { bottom: computedPos.bottom }
+            : { top: computedPos?.top ?? (pos.y + 6) }),
+          maxHeight: computedPos?.maxHeight,
           width: panelWidth,
           zIndex: 9999,
           visibility: computedPos ? "visible" : "hidden",
         }}
-        className="rounded-xl border bg-popover shadow-xl animate-in fade-in zoom-in-95 duration-100 overflow-hidden"
+        className="flex flex-col rounded-xl border bg-popover shadow-xl animate-in fade-in zoom-in-95 duration-100 overflow-hidden"
       >
         {/* Header */}
         <div className="flex items-center justify-between px-3 py-2 border-b bg-muted/40">
@@ -179,7 +189,7 @@ export function WritingRewritePreview({
         </div>
 
         {/* Body */}
-        <div className="p-3 space-y-2 max-h-96 overflow-y-auto">
+        <div className="p-3 space-y-2 overflow-y-auto flex-1 min-h-0">
 
           {/* Thinking — collapsible with animation */}
           {thinking && (