From 90696a24462000ead3e54b8f1dd785305158eee5 Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Sun, 15 Sep 2024 12:14:37 +0200
Subject: [PATCH] Add bottom border line to menubar

Better visual separation of menubar and editor content, especially when
scrolling long content.

Signed-off-by: Jonas <jonas@freesources.org>
---
 src/components/Menu/MenuBar.vue     | 1 +
 src/components/Menu/ReadonlyBar.vue | 3 +++
 2 files changed, 4 insertions(+)

diff --git a/src/components/Menu/MenuBar.vue b/src/components/Menu/MenuBar.vue
index 584e1547e56..93720d43883 100644
--- a/src/components/Menu/MenuBar.vue
+++ b/src/components/Menu/MenuBar.vue
@@ -227,6 +227,7 @@ export default {
 		background-color: var(--color-main-background-translucent);
 		backdrop-filter: var(--background-blur);
 		max-height: var(--default-clickable-area); // important for mobile so that the buttons are always inside the container
+		border-bottom: 1px solid var(--color-border);
 		padding-top:3px;
 		padding-bottom: 3px;
 
diff --git a/src/components/Menu/ReadonlyBar.vue b/src/components/Menu/ReadonlyBar.vue
index 775919d7d18..a6de3e60727 100644
--- a/src/components/Menu/ReadonlyBar.vue
+++ b/src/components/Menu/ReadonlyBar.vue
@@ -49,6 +49,9 @@ export default defineComponent({
 <style scoped>
 .text-readonly-bar {
 	display: flex;
+	border-bottom: 1px solid var(--color-border);
+	padding-top: 3px;
+	padding-bottom: 3px;
 }
 .text-readonly-bar__entries {
 	display: flex;