From 865c11dd8bbc2efd07bc177ae56bdf1e2bbd6ce1 Mon Sep 17 00:00:00 2001
From: OpenClaw Bot <ai-agent@topdoglabs.com>
Date: Mon, 23 Feb 2026 18:12:25 -0600
Subject: [PATCH] Signed-off-by: OpenClaw Bot <ai-agent@topdoglabs.com>

---
 components/MarkdownPreviewDialog.tsx | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/components/MarkdownPreviewDialog.tsx b/components/MarkdownPreviewDialog.tsx
index 823919e..2fe455e 100644
--- a/components/MarkdownPreviewDialog.tsx
+++ b/components/MarkdownPreviewDialog.tsx
@@ -5,7 +5,7 @@ import { Button } from '@/components/ui/button';
 import { X, Maximize2, Minimize2, Folder, Tag } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
 
@@ -28,13 +28,20 @@ export function MarkdownPreviewDialog({
 }: MarkdownPreviewDialogProps) {
   const [isFullscreen, setIsFullscreen] = useState(false);
 
+  useEffect(() => {
+    if (!isOpen) {
+      setIsFullscreen(false);
+    }
+  }, [isOpen]);
+
   return (
     <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
       <DialogContent
+        showCloseButton={false}
         className={`
           ${isFullscreen 
-            ? 'fixed inset-0 w-screen h-screen max-w-none rounded-none border-0 p-0' 
-            : 'w-[95vw] max-w-6xl h-[90vh]'
+            ? 'inset-0 top-0 left-0 right-0 bottom-0 w-screen h-dvh max-w-none sm:max-w-none rounded-none border-0 translate-x-0 translate-y-0' 
+            : 'w-[95vw] h-[90vh] max-w-none sm:max-w-none'
           }
           p-0 gap-0 overflow-hidden bg-slate-950 border-slate-800 flex flex-col
         `}
@@ -103,7 +110,11 @@ export function MarkdownPreviewDialog({
 
         {/* Content */}
         <div className="flex-1 overflow-auto bg-slate-950">
-          <div className="max-w-4xl mx-auto p-8">
+          <div
+            className={`mx-auto w-full ${
+              isFullscreen ? 'max-w-none px-4 sm:px-8 py-6' : 'max-w-5xl px-4 sm:px-6 lg:px-8 py-6 sm:py-8'
+            }`}
+          >
             <article className="markdown-body">
               <ReactMarkdown
                 remarkPlugins={[remarkGfm]}