fix: leave some buffer so menubar does not wrap

When resizing the browser make sure the three dot menu stays on the same line. Without a buffer it would sometimes wrap even though theoretical there was enough space in the menu bar. No idea what is going on there - but a 4px buffer seems to prevent just that. Signed-off-by: Max <max@nextcloud.com>
nextcloud · Apr 19, 2022 · 4e9ac95 · 4e9ac95
1 parent b48886f
commit 4e9ac95
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 8 deletions.
diff --git a/js/editor-rich.js b/js/editor-rich.js
diff --git a/js/editor-rich.js.map b/js/editor-rich.js.map
diff --git a/js/editor.js b/js/editor.js
diff --git a/js/editor.js.map b/js/editor.js.map
diff --git a/src/components/MenuBar.vue b/src/components/MenuBar.vue
@@ -255,8 +255,14 @@ export default {
 		iconCount() {
 			this.forceRecompute // eslint-disable-line
 			this.windowWidth // eslint-disable-line
-			const menuBarWidth = this.$refs.menubar && this.$refs.menubar.clientWidth > 200 ? this.$refs.menubar.clientWidth : 200
-			return Math.max((Math.floor(menuBarWidth / 44) - 1), 0)
+			const menuBarWidth = this.$refs.menubar && this.$refs.menubar.clientWidth > 200
+				? this.$refs.menubar.clientWidth
+				: 200
+			// leave some buffer - this is necessary so the bar does not wrap during resizing
+			const spaceToFill = menuBarWidth - 4
+			const slots = Math.floor(spaceToFill / 44)
+			// Leave one slot empty for the three dot menu
+			return slots - 1
 		},
 		imagePath() {
 			return this.lastImagePath