From c437baa8e66ac780b0232cffca59ee127649561d Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Wed, 28 Jan 2026 11:24:05 +0100
Subject: [PATCH] refactor(NotesPageClient, MarkdownEditor): enhance layout
 responsiveness by adjusting flex properties and ensuring proper overflow
 handling

---
 src/app/notes/NotesPageClient.tsx       | 22 ++++++++++++----------
 src/components/notes/MarkdownEditor.tsx |  6 +++---
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/app/notes/NotesPageClient.tsx b/src/app/notes/NotesPageClient.tsx
index 417c07d..7b429d5 100644
--- a/src/app/notes/NotesPageClient.tsx
+++ b/src/app/notes/NotesPageClient.tsx
@@ -449,7 +449,7 @@ function NotesPageContent({
           </div>
 
           {/* Main Editor Area */}
-          <div className="flex-1 flex flex-col min-h-0">
+          <div className="flex-1 flex flex-col min-h-0 min-w-0 w-0">
             {error && (
               <div className="flex items-center gap-2 p-3 bg-[var(--destructive)]/10 border-b border-[var(--destructive)]/20 text-[var(--destructive)]">
                 <AlertCircle className="w-4 h-4" />
@@ -466,9 +466,11 @@ function NotesPageContent({
             {selectedNote ? (
               <>
                 {/* Note Header */}
-                <div className={`${glassDivider} flex items-center gap-4 p-4`}>
-                  <FileText className="w-5 h-5 text-[var(--muted-foreground)]" />
-                  <div className="flex-1">
+                <div
+                  className={`${glassDivider} flex items-center gap-4 p-4 overflow-hidden`}
+                >
+                  <FileText className="w-5 h-5 text-[var(--muted-foreground)] flex-shrink-0" />
+                  <div className="flex-1 min-w-0">
                     <h2 className="text-lg font-semibold text-[var(--foreground)] truncate">
                       {getNoteTitle(selectedNote.content)}
                     </h2>
@@ -495,13 +497,13 @@ function NotesPageContent({
                           : null;
 
                         return currentFolder ? (
-                          <div className="flex items-center gap-2 mt-1">
+                          <div className="flex items-center gap-2 mt-1 flex-wrap">
                             <span className="text-xs text-[var(--muted-foreground)]">
                               📁 {currentFolder.name}
                             </span>
                             {folderTag && (
                               <div
-                                className="flex items-center gap-1 px-2 py-0.5 rounded-full text-xs"
+                                className="flex items-center gap-1 px-2 py-0.5 rounded-full text-xs flex-shrink-0"
                                 style={{
                                   backgroundColor: `${folderTag.color}20`,
                                   color: folderTag.color,
@@ -514,13 +516,13 @@ function NotesPageContent({
                         ) : null;
                       })()}
                   </div>
-                  <div className="flex items-center gap-2 text-sm text-[var(--muted-foreground)]">
+                  <div className="flex items-center gap-2 text-sm text-[var(--muted-foreground)] flex-shrink-0">
                     {hasUnsavedChanges && (
-                      <span className="text-[var(--accent)]">
+                      <span className="text-[var(--accent)] whitespace-nowrap">
                         Non sauvegardé
                       </span>
                     )}
-                    <span>
+                    <span className="whitespace-nowrap">
                       Modifié{' '}
                       {new Date(selectedNote.updatedAt).toLocaleDateString(
                         'fr-FR'
@@ -530,7 +532,7 @@ function NotesPageContent({
                 </div>
 
                 {/* Editor */}
-                <div className="flex-1 min-h-0">
+                <div className="flex-1 min-h-0 min-w-0 w-0">
                   <MarkdownEditor
                     value={selectedNote.content}
                     onChange={handleContentChange}
diff --git a/src/components/notes/MarkdownEditor.tsx b/src/components/notes/MarkdownEditor.tsx
index fd51a9b..8e363be 100644
--- a/src/components/notes/MarkdownEditor.tsx
+++ b/src/components/notes/MarkdownEditor.tsx
@@ -790,7 +790,7 @@ export function MarkdownEditor({
       )}
 
       {/* Editor/Tags Area */}
-      <div className="flex-1 flex overflow-hidden">
+      <div className="flex-1 flex overflow-hidden w-0">
         {!isEditing ? (
           /* Mode Aperçu avec Tags */
           <div className="w-full flex flex-col">
@@ -879,7 +879,7 @@ export function MarkdownEditor({
           <>
             {/* Editor */}
             <div
-              className={`flex-1 flex flex-col ${showPreview ? 'w-1/2' : 'w-full'}`}
+              className={`flex flex-col ${showPreview ? 'w-1/2 min-w-0' : 'flex-1 w-full'}`}
             >
               <div className="p-3 border-b border-[var(--border)]/60 bg-[var(--card)]/40 backdrop-blur-md relative before:absolute before:inset-0 before:bg-gradient-to-r before:from-[color-mix(in_srgb,var(--primary)_8%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_4%,transparent)] before:to-transparent before:opacity-80 before:pointer-events-none">
                 <div className="flex items-center justify-between relative z-10">
@@ -941,7 +941,7 @@ export function MarkdownEditor({
 
             {/* Preview */}
             {showPreview && (
-              <div className="w-1/2 flex flex-col border-l border-[var(--border)]/60">
+              <div className="w-1/2 min-w-0 flex flex-col border-l border-[var(--border)]/60">
                 <div className="p-3 border-b border-[var(--border)]/60 bg-[var(--card)]/40 backdrop-blur-md relative before:absolute before:inset-0 before:bg-gradient-to-r before:from-[color-mix(in_srgb,var(--primary)_8%,transparent)] before:via-[color-mix(in_srgb,var(--primary)_4%,transparent)] before:to-transparent before:opacity-80 before:pointer-events-none">
                   <span className="text-sm font-medium text-[var(--foreground)] relative z-10">
                     Aperçu