From 886d20a793559ae6e3382c979145b3af07aa3063 Mon Sep 17 00:00:00 2001
From: ct <charlesteh90@gmail.com>
Date: Tue, 17 Jun 2025 21:01:01 +0800
Subject: [PATCH] Update

---
 .../partials/canvas/sample-timeline-data.jsx  |  6 +++---
 .../modules/editor/partials/text-sidebar.jsx  | 20 ++++++++++++++++---
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/resources/js/modules/editor/partials/canvas/sample-timeline-data.jsx b/resources/js/modules/editor/partials/canvas/sample-timeline-data.jsx
index b9fb083..dff0fb6 100644
--- a/resources/js/modules/editor/partials/canvas/sample-timeline-data.jsx
+++ b/resources/js/modules/editor/partials/canvas/sample-timeline-data.jsx
@@ -57,9 +57,9 @@ const sampleTimelineElements = [
         startTime: 0,
         layer: 2,
         duration: 4,
-        x: 50,
-        y: 600,
-        fontSize: 24,
+        x: 90,
+        y: 180,
+        fontSize: 40,
         fontWeight: 'bold',
         fontFamily: 'Montserrat',
         fontStyle: 'normal',
diff --git a/resources/js/modules/editor/partials/text-sidebar.jsx b/resources/js/modules/editor/partials/text-sidebar.jsx
index 24f8975..2dc55af 100644
--- a/resources/js/modules/editor/partials/text-sidebar.jsx
+++ b/resources/js/modules/editor/partials/text-sidebar.jsx
@@ -122,7 +122,7 @@ export default function TextSidebar({ isOpen, onClose }) {
 
     return (
         <Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}>
-            <SheetContent side="right" className="w-80 overflow-y-auto">
+            <SheetContent side="right" className="max-[140px] w-full overflow-y-auto">
                 <SheetHeader>
                     <SheetTitle className="flex items-center gap-3">
                         <Type className="h-6 w-6" />
@@ -140,8 +140,14 @@ export default function TextSidebar({ isOpen, onClose }) {
                                     value={textValue}
                                     onChange={handleTextChange}
                                     placeholder="Enter your text..."
-                                    className="mt-2 text-center"
+                                    className="mt-2 text-center text-nowrap"
                                     rows={4}
+                                    style={{
+                                        fontFamily: fontFamily,
+                                        fontSize: `${fontSize * 0.6}px`, // Cap preview size for readability
+                                        fontWeight: isBold ? 'bold' : 'normal',
+                                        fontStyle: isItalic ? 'italic' : 'normal',
+                                    }}
                                 />
                             </div>
 
@@ -155,7 +161,15 @@ export default function TextSidebar({ isOpen, onClose }) {
                                     <SelectContent>
                                         {AVAILABLE_FONTS.map((font) => (
                                             <SelectItem key={font.value} value={font.value}>
-                                                <span style={{ fontFamily: font.name }}>{font.name}</span>
+                                                <span
+                                                    style={{
+                                                        fontFamily: font.name,
+                                                        fontWeight: isBold ? 'bold' : 'normal',
+                                                        fontStyle: isItalic ? 'italic' : 'normal',
+                                                    }}
+                                                >
+                                                    {font.name}
+                                                </span>
                                             </SelectItem>
                                         ))}
                                     </SelectContent>