From a35350903830ca24df0a2a9dbef8786971ab6567 Mon Sep 17 00:00:00 2001 From: lucaronin Date: Thu, 2 Apr 2026 02:29:05 +0200 Subject: [PATCH] fix: reduce editor minimum width and padding at narrow sizes Halve the editor min-width from 800px to 400px so the window can be resized narrower. Add a container query that reduces horizontal padding from 40px to 16px when the editor panel is under 600px wide, keeping content readable without wasting space on padding. Co-Authored-By: Claude Opus 4.6 (1M context) --- src/App.css | 4 +++- src/components/Editor.css | 10 ++++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/App.css b/src/App.css index b13703fe..cc1d6de4 100644 --- a/src/App.css +++ b/src/App.css @@ -39,11 +39,13 @@ .app__editor { flex: 1; - min-width: 800px; + min-width: 400px; min-height: 0; overflow: hidden; display: flex; flex-direction: column; + container-type: inline-size; + container-name: editor; } .app__editor > * { diff --git a/src/components/Editor.css b/src/components/Editor.css index 2652a10c..32404fcb 100644 --- a/src/components/Editor.css +++ b/src/components/Editor.css @@ -359,3 +359,13 @@ .editor__blocknote-container [data-node-type="blockContainer"]:first-child:has([data-content-type="heading"][data-level="1"]) { display: none; } + +/* Reduce padding at narrow editor widths so content isn't cramped */ +@container editor (max-width: 600px) { + .editor__blocknote-container .bn-editor { + padding: 12px 16px; + } + .title-section { + padding: 0 16px; + } +}