feat: Enhance note dialog layouts, improve text wrapping, and refine component styling.

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
                 ),
             },

k-notes-frontend/src/components/note-card.tsx

@@ -165,21 +165,23 @@ export function NoteCard({ note }: NoteCardProps) {
       </Card>
 
       <Dialog open={editing} onOpenChange={setEditing}>
-        <DialogContent>
+        <DialogContent className="max-w-3xl max-h-[85vh] flex flex-col p-6 gap-0 overflow-hidden">
-          <DialogHeader>
+          <DialogHeader className="pb-4 shrink-0">
             <DialogTitle>{t("Edit Note")}</DialogTitle>
           </DialogHeader>
-          <NoteForm
+          <div className="flex-1 min-h-0 overflow-y-auto -mx-6 px-6">
-            defaultValues={{
+            <NoteForm
-              title: note.title,
+              defaultValues={{
-              content: note.content,
+                title: note.title,
-              is_pinned: note.is_pinned,
+                content: note.content,
-              color: note.color,
+                is_pinned: note.is_pinned,
-              tags: note.tags.map(t => t.name).join(", "),
+                color: note.color,
-            }}
+                tags: note.tags.map(t => t.name).join(", "),
-            onSubmit={handleEdit}
+              }}
-            submitLabel={t("Update")}
+              onSubmit={handleEdit}
-          />
+              submitLabel={t("Update")}
+            />
+          </div>
         </DialogContent>
       </Dialog>
 

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"

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>
 

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) => (