From 40a7de89f2864937fd19409c8ad539a1d18c6a9a Mon Sep 17 00:00:00 2001
From: MiMoHo <37556964+MiMoHo@users.noreply.github.com>
Date: Mon, 6 Jul 2026 03:42:36 +0200
Subject: [PATCH] feat(editor): frame the plain editor and reduce side margins

The editing area was capped at 47em, left aligned and floated without
any visual boundary. Let it use the available pane width up to 90em,
add a subtle border so the writing field is clearly delimited, and give
the header zone above it more breathing room. The frame is dropped in
distraction free mode.

Assisted-by: Claude Code:claude-fable-5
AI-assistant: Claude Code 2.1.187 (Claude Fable 5)
Signed-off-by: MiMoHo <37556964+MiMoHo@users.noreply.github.com>
---
 src/components/NotePlain.vue | 30 ++++++++++++++----------------
 1 file changed, 14 insertions(+), 16 deletions(-)

diff --git a/src/components/NotePlain.vue b/src/components/NotePlain.vue
index ee2938e68..4b1a2e185 100644
--- a/src/components/NotePlain.vue
+++ b/src/components/NotePlain.vue
@@ -429,25 +429,21 @@ export default {
 	min-height: 100%;
 	width: 100%;
 	background-color: var(--color-main-background);
+	display: flex;
+	flex-direction: column;
+	padding: 3em 1em 1em;
 }
 
 .note-editor {
-	max-width: 47em;
+	position: relative;
+	flex: 1;
+	width: 100%;
+	max-width: 90em;
+	margin: 0 auto;
 	font-size: 16px;
-	padding: 1em;
-	padding-bottom: 0;
-}
-
-/* center editor on large screens */
-@media (min-width: 1600px) {
-	.note-editor {
-		margin: 0 auto;
-	}
-	.note-container {
-		padding-inline-end: 250px;
-		transition-duration: var(--animation-quick);
-		transition-property: padding-inline-end;
-	}
+	padding: 1em 1.5em 0;
+	border: 1px solid var(--color-border);
+	border-radius: var(--border-radius-large);
 }
 
 /* distraction free styles */
@@ -460,12 +456,14 @@ export default {
 
 .note-container.fullscreen .note-editor {
 	margin: 0 auto;
+	border: none;
+	border-radius: 0;
 }
 
 /* placeholder */
 .placeholder {
 	position: absolute;
-	padding: 1em;
+	padding: 1em 1.5em;
 	opacity: 0.5;
 }