julienfroidefond/towercontrol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(NotesPageClient, MarkdownEditor): enhance layout responsiveness by adjusting flex properties and ensuring proper overflow handling

Browse Source
This commit is contained in:
Julien Froidefond
2026-01-28 11:24:05 +01:00
parent 69f8dcb7bf
commit c437baa8e6
2 changed files with 15 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/app/notes/NotesPageClient.tsx
View File

@@ -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}

6
src/components/notes/MarkdownEditor.tsx
View File

@@ -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