From 9bd59452958e20eb8829fc414abb8d5c1ec13dbd Mon Sep 17 00:00:00 2001
From: Owais Jamil <desertthunder.dev@gmail.com>
Date: Mon, 02 Mar 2026 20:35:47 +0000
Subject: [PATCH] fix: preview display

---
 src/components/Button.tsx | 17 +++++++++--------
 src/components/export/ExportDialog/ExportDialog.tsx | 6 +++---
 src/components/export/ExportDialog/ExportFooter.tsx | 2 +-
 src/components/export/ExportDialog/ExportHeader.tsx | 8 +++++++-
 4 file(s) changed, 20 insertion(s)(+), 13 deletion(s)(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -21,20 +21,21 @@
   iconGhost:
     "inline-flex items-center justify-center rounded bg-transparent border-none text-icon-secondary cursor-pointer",
   iconSubtle:
-    "inline-flex items-center justify-center rounded border border-stroke-subtle bg-transparent text-icon-secondary hover:text-icon-primary cursor-pointer",
+    "inline-flex items-center justify-center rounded border border-stroke-subtle bg-transparent text-icon-secondary hover:text-icon-primary cursor-pointer transition-colors duration-300",
   outline:
-    "inline-flex items-center justify-center rounded border border-stroke-subtle bg-transparent text-text-secondary hover:text-text-primary cursor-pointer",
+    "inline-flex items-center justify-center rounded border border-stroke-subtle bg-transparent text-text-secondary hover:text-text-primary cursor-pointer transition-colors duration-300",
   surface:
-    "inline-flex items-center justify-center rounded border border-stroke-subtle bg-layer-01 text-text-secondary hover:text-text-primary cursor-pointer",
+    "inline-flex items-center justify-center rounded border border-stroke-subtle bg-layer-01 text-text-secondary hover:text-text-primary cursor-pointer transition-colors duration-300",
   secondary:
-    "inline-flex items-center justify-center rounded border border-stroke-subtle bg-layer-02 text-text-primary hover:bg-layer-03 cursor-pointer",
+    "inline-flex items-center justify-center rounded border border-stroke-subtle bg-layer-02 text-text-primary hover:bg-layer-03 cursor-pointer transition-colors duration-300",
   primary:
-    "inline-flex items-center justify-center rounded border border-accent-cyan bg-accent-cyan text-white hover:opacity-90 cursor-pointer",
+    "inline-flex items-center justify-center rounded border border-accent-cyan bg-accent-cyan text-white hover:opacity-90 cursor-pointer transition-colors duration-300",
   primaryBlue:
-    "inline-flex items-center justify-center rounded border border-accent-blue bg-accent-blue text-white hover:bg-link-hover cursor-pointer",
+    "inline-flex items-center justify-center rounded border border-accent-blue bg-accent-blue text-white hover:bg-link-hover cursor-pointer transition-colors duration-300",
   link:
-    "inline-flex items-center justify-center bg-transparent border-none text-link-primary underline underline-offset-2 cursor-pointer",
-  dangerGhost: "inline-flex items-center justify-center bg-transparent border-none text-support-error cursor-pointer",
+    "inline-flex items-center justify-center bg-transparent border-none text-link-primary underline underline-offset-2 cursor-pointer transition-colors duration-300",
+  dangerGhost:
+    "inline-flex items-center justify-center bg-transparent border-none text-support-error cursor-pointer transition-colors duration-300",
 };
 
 const BUTTON_SIZE_CLASSES: Record<ButtonSize, ClassValue> = {
diff --git a/src/components/export/ExportDialog/ExportDialog.tsx b/src/components/export/ExportDialog/ExportDialog.tsx
--- a/src/components/export/ExportDialog/ExportDialog.tsx
+++ b/src/components/export/ExportDialog/ExportDialog.tsx
@@ -138,7 +138,7 @@
       <ExportError error={error} />
       <div
         className={`min-h-0 flex-1 overflow-hidden ${
-          showPreview ? "grid grid-cols-[minmax(0,_1fr)_minmax(280px,_320px)] gap-3" : "flex"
+          showPreview ? "grid grid-cols-[minmax(0,1fr)_minmax(280px,320px)] gap-3" : "flex"
         }`}>
         {showPreview
           ? <PreviewPane previewResult={previewResult} options={options} editorFontFamily={editorFontFamily} />
@@ -199,7 +199,7 @@
       <ExportError error={error} />
       <div
         className={`min-h-0 flex-1 overflow-hidden ${
-          showPreview ? "grid grid-cols-[minmax(0,_1fr)_minmax(280px,_320px)] gap-3" : "flex"
+          showPreview ? "grid grid-cols-[minmax(0,1fr)_minmax(280px,320px)] gap-3" : "flex"
         }`}>
         {showPreview
           ? (
@@ -313,7 +313,7 @@
   }, [handleCancel, handleExportDocx]);
 
   const compactPanel = useMemo(() => isCompact || viewportWidth < 1024, [isCompact, viewportWidth]);
-  const showPreview = useMemo(() => !compactPanel && viewportWidth >= 1280, [compactPanel, viewportWidth]);
+  const showPreview = useMemo(() => !compactPanel, [compactPanel]);
   const isPdfTabActive = useMemo(() => activeExportTabId === "pdf", [activeExportTabId]);
   const isDocxTabActive = useMemo(() => activeExportTabId === "docx", [activeExportTabId]);
   const isTextTabActive = useMemo(() => activeExportTabId === "txt", [activeExportTabId]);
diff --git a/src/components/export/ExportDialog/ExportFooter.tsx b/src/components/export/ExportDialog/ExportFooter.tsx
--- a/src/components/export/ExportDialog/ExportFooter.tsx
+++ b/src/components/export/ExportDialog/ExportFooter.tsx
@@ -18,7 +18,7 @@
     </Button>
     <Button
       type="button"
-      variant="primary"
+      variant="primaryBlue"
       size="lg"
       onClick={handleExport}
       disabled={isLoading || disable}
diff --git a/src/components/export/ExportDialog/ExportHeader.tsx b/src/components/export/ExportDialog/ExportHeader.tsx
--- a/src/components/export/ExportDialog/ExportHeader.tsx
+++ b/src/components/export/ExportDialog/ExportHeader.tsx
@@ -18,7 +18,13 @@
         )
         : null}
     </div>
-    <Button type="button" variant="iconSubtle" size="iconLg" onClick={onCancel} aria-label="Close export dialog">
+    <Button
+      type="button"
+      variant="iconSubtle"
+      size="iconLg"
+      onClick={onCancel}
+      aria-label="Close export dialog"
+      className="hover:bg-support-error/10 hover:text-support-error transition-colors duration-200">
       <XIcon size="sm" />
     </Button>
   </div>

--
tangled.sh