From 68a11ea55179fbd49574244c06e2bdd7d7319e06 Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Mon, 29 Dec 2025 14:23:19 +0100
Subject: [PATCH] feat: Enhance note dialog layouts, improve text wrapping, and
 refine component styling.

---
 .../src/components/editor/editor.tsx          |  2 +-
 k-notes-frontend/src/components/note-card.tsx | 28 ++++++++++---------
 k-notes-frontend/src/components/note-form.tsx |  2 +-
 .../src/components/note-view-dialog.tsx       |  7 ++---
 k-notes-frontend/src/pages/dashboard.tsx      |  2 +-
 5 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/k-notes-frontend/src/components/editor/editor.tsx b/k-notes-frontend/src/components/editor/editor.tsx
index c06c026..a06422c 100644
--- a/k-notes-frontend/src/components/editor/editor.tsx
+++ b/k-notes-frontend/src/components/editor/editor.tsx
@@ -49,7 +49,7 @@ export function Editor({ value, onChange, placeholder, className }: EditorProps)
         editorProps: {
             attributes: {
                 class: cn(
-                    "min-h-[100px] max-h-[400px] overflow-y-auto w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 prose dark:prose-invert max-w-none",
+                    "min-h-[100px] max-h-[400px] overflow-y-auto w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 prose dark:prose-invert max-w-none break-all min-w-0",
                     className
                 ),
             },
diff --git a/k-notes-frontend/src/components/note-card.tsx b/k-notes-frontend/src/components/note-card.tsx
index babc6a3..4f5d609 100644
--- a/k-notes-frontend/src/components/note-card.tsx
+++ b/k-notes-frontend/src/components/note-card.tsx
@@ -165,21 +165,23 @@ export function NoteCard({ note }: NoteCardProps) {
       </Card>
 
       <Dialog open={editing} onOpenChange={setEditing}>
-        <DialogContent>
-          <DialogHeader>
+        <DialogContent className="max-w-3xl max-h-[85vh] flex flex-col p-6 gap-0 overflow-hidden">
+          <DialogHeader className="pb-4 shrink-0">
             <DialogTitle>{t("Edit Note")}</DialogTitle>
           </DialogHeader>
-          <NoteForm
-            defaultValues={{
-              title: note.title,
-              content: note.content,
-              is_pinned: note.is_pinned,
-              color: note.color,
-              tags: note.tags.map(t => t.name).join(", "),
-            }}
-            onSubmit={handleEdit}
-            submitLabel={t("Update")}
-          />
+          <div className="flex-1 min-h-0 overflow-y-auto -mx-6 px-6">
+            <NoteForm
+              defaultValues={{
+                title: note.title,
+                content: note.content,
+                is_pinned: note.is_pinned,
+                color: note.color,
+                tags: note.tags.map(t => t.name).join(", "),
+              }}
+              onSubmit={handleEdit}
+              submitLabel={t("Update")}
+            />
+          </div>
         </DialogContent>
       </Dialog>
 
diff --git a/k-notes-frontend/src/components/note-form.tsx b/k-notes-frontend/src/components/note-form.tsx
index db7c03b..2069eea 100644
--- a/k-notes-frontend/src/components/note-form.tsx
+++ b/k-notes-frontend/src/components/note-form.tsx
@@ -43,7 +43,7 @@ export function NoteForm({ defaultValues, onSubmit, isLoading, submitLabel = "Sa
 
   return (
     <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit as any)} className="space-y-4">
+      <form onSubmit={form.handleSubmit(onSubmit as any)} className="w-full flex flex-col gap-4">
         <FormField
           control={form.control as any}
           name="title"
diff --git a/k-notes-frontend/src/components/note-view-dialog.tsx b/k-notes-frontend/src/components/note-view-dialog.tsx
index 8408b74..ea49a70 100644
--- a/k-notes-frontend/src/components/note-view-dialog.tsx
+++ b/k-notes-frontend/src/components/note-view-dialog.tsx
@@ -27,12 +27,9 @@ export function NoteViewDialog({ note, open, onOpenChange, onEdit, onSelectNote
             <DialogContent className={clsx("max-w-3xl max-h-[85vh] flex flex-col p-6 gap-0 overflow-hidden", colorClass)}>
                 <DialogHeader className="pb-4 shrink-0">
                     <div className="flex justify-between items-start gap-4">
-                        <DialogTitle className="text-2xl font-bold leading-tight break-words">
+                        <DialogTitle className="text-2xl font-bold leading-tight wrap-break-word">
                             {note.title}
                         </DialogTitle>
-                        {note.is_pinned && (
-                            <Pin className="h-5 w-5 text-primary rotate-45 shrink-0" />
-                        )}
                     </div>
                     <div className="flex items-center text-sm text-muted-foreground gap-2 mt-1">
                         <Calendar className="h-3.5 w-3.5" />
@@ -41,7 +38,7 @@ export function NoteViewDialog({ note, open, onOpenChange, onEdit, onSelectNote
                 </DialogHeader>
 
                 <div className="flex-1 min-h-0 overflow-y-auto -mx-6 px-6">
-                    <div className="prose dark:prose-invert max-w-none text-base leading-relaxed break-words pb-6">
+                    <div className="prose dark:prose-invert max-w-none text-base leading-relaxed wrap-break-word pb-6">
                         <ReactMarkdown remarkPlugins={[remarkGfm]}>{note.content}</ReactMarkdown>
                     </div>
 
diff --git a/k-notes-frontend/src/pages/dashboard.tsx b/k-notes-frontend/src/pages/dashboard.tsx
index 9c2adb8..70cf712 100644
--- a/k-notes-frontend/src/pages/dashboard.tsx
+++ b/k-notes-frontend/src/pages/dashboard.tsx
@@ -81,7 +81,7 @@ export default function DashboardPage() {
         return (
             <Masonry
                 breakpointCols={masonryBreakpoints}
-                className="flex -ml-4 w-auto"
+                className="flex w-auto"
                 columnClassName="pl-4 bg-clip-padding"
             >
                 {notesList.map((note: Note) => (