feat(editor): frame the plain editor and reduce side margins - #1930
feat(editor): frame the plain editor and reduce side margins#1930MiMoHo wants to merge 2 commits into
Conversation
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>
There was a problem hiding this comment.
Pull request overview
This PR updates the plain-text editor (EasyMDE) layout to feel more “framed” and balanced on large screens by adding a subtle border and expanding/centering the editor area while keeping a reasonable max line length, and removing the frame in distraction-free mode.
Changes:
- Center the editor and increase its max width (47em → 90em) while reducing excessive side margins.
- Add a border + rounded corners around the editor, and adjust padding to give the top area more space.
- Remove the frame styling (border/radius) in fullscreen (distraction-free) mode.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| padding: 1em 1.5em 0; | ||
| border: 1px solid var(--color-border); | ||
| border-radius: var(--border-radius-large); |
enjeck
left a comment
enjeck
left a comment
There was a problem hiding this comment.
@nextcloud/designers Do you approve?
kra-mo
left a comment
kra-mo
left a comment
There was a problem hiding this comment.
From the design side, I find the border unnecessary. If margins are unexpectedly large, they should just be made smaller/eliminated, no?
jancborchardt
left a comment
jancborchardt
left a comment
There was a problem hiding this comment.
I agree with @kra-mo, the border / framing is unnecessary, it’s not really an element we ourselves use (one exception is Mail where there can be multiple messages in a thread), nor others like Notion use it.
Summary
Design proposal for the plain-text editor (EasyMDE): the writing area is currently capped at 47em, left-aligned and floats without any visual boundary, which makes it feel like writing into empty space, with a disproportionately wide unused margin on larger screens.
This change:
--color-border, follows the light and dark theme),Since spacing and sizing are a matter of taste, I would appreciate a design review — screenshots of the result in light and dark mode are attached:
Testing
Verified in Chromium and WebKit, light and dark theme; production webpack build clean.
🤖 AI (if applicable)
I reviewed and tested the changes myself.