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> Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>
nextcloud · Apr 19, 2022 · d9d016d · d9d016d
1 parent b48886f
commit d9d016d
Show file tree

Hide file tree

Showing 13 changed files with 26 additions and 20 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/js/text-files.js b/js/text-files.js
diff --git a/js/text-files.js.map b/js/text-files.js.map
diff --git a/js/text-public.js b/js/text-public.js
diff --git a/js/text-public.js.map b/js/text-public.js.map
diff --git a/js/text-text.js b/js/text-text.js
diff --git a/js/text-text.js.map b/js/text-text.js.map
diff --git a/js/text-viewer.js b/js/text-viewer.js
diff --git a/js/text-viewer.js.map b/js/text-viewer.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