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; + } +}