From 333be1996dc89b0500e8000d1a509ff959fa2b62 Mon Sep 17 00:00:00 2001 From: Melroy van den Berg Date: Mon, 27 Apr 2026 15:17:56 +0200 Subject: [PATCH 1/4] Add a small light border around the text editor --- frontend/src/components/input/editor/TipTap.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/components/input/editor/TipTap.vue b/frontend/src/components/input/editor/TipTap.vue index d233b3e1a..3262c7917 100644 --- a/frontend/src/components/input/editor/TipTap.vue +++ b/frontend/src/components/input/editor/TipTap.vue @@ -894,6 +894,7 @@ watch( &.tiptap__editor-is-edit-enabled { min-block-size: 10rem; + border: 1px solid var(--grey-200); .ProseMirror { padding: .5rem; From b333a8ad78f034213e19acb7d6dcf80dabd501be Mon Sep 17 00:00:00 2001 From: Melroy van den Berg Date: Sat, 2 May 2026 22:46:09 +0200 Subject: [PATCH 2/4] Add a small margin between toolbar and text area --- frontend/src/components/input/editor/EditorToolbar.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/components/input/editor/EditorToolbar.vue b/frontend/src/components/input/editor/EditorToolbar.vue index b4d7bcbbe..563d24648 100644 --- a/frontend/src/components/input/editor/EditorToolbar.vue +++ b/frontend/src/components/input/editor/EditorToolbar.vue @@ -395,6 +395,7 @@ function setLink(event: MouseEvent) { border-radius: $radius; display: flex; flex-wrap: wrap; + margin-block-end: 2px; > * + * { border-inline-start: 1px solid var(--grey-200); From c54fa4f5e0fb2c3c9f5bfc263e2bee02bd3301e2 Mon Sep 17 00:00:00 2001 From: Melroy van den Berg Date: Sat, 2 May 2026 22:50:29 +0200 Subject: [PATCH 3/4] Increase margin to 4px --- frontend/src/components/input/editor/EditorToolbar.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/input/editor/EditorToolbar.vue b/frontend/src/components/input/editor/EditorToolbar.vue index 563d24648..b6a702013 100644 --- a/frontend/src/components/input/editor/EditorToolbar.vue +++ b/frontend/src/components/input/editor/EditorToolbar.vue @@ -395,7 +395,7 @@ function setLink(event: MouseEvent) { border-radius: $radius; display: flex; flex-wrap: wrap; - margin-block-end: 2px; + margin-block-end: 4px; > * + * { border-inline-start: 1px solid var(--grey-200); From 091785f88ea73c85a4fd726ad9075092e765b9ea Mon Sep 17 00:00:00 2001 From: Melroy van den Berg Date: Sat, 2 May 2026 22:51:11 +0200 Subject: [PATCH 4/4] Use a 3px margin, sweet spot --- frontend/src/components/input/editor/EditorToolbar.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/input/editor/EditorToolbar.vue b/frontend/src/components/input/editor/EditorToolbar.vue index b6a702013..0ef26c752 100644 --- a/frontend/src/components/input/editor/EditorToolbar.vue +++ b/frontend/src/components/input/editor/EditorToolbar.vue @@ -395,7 +395,7 @@ function setLink(event: MouseEvent) { border-radius: $radius; display: flex; flex-wrap: wrap; - margin-block-end: 4px; + margin-block-end: 3px; > * + * { border-inline-start: 1px solid var(--grey-200);