fix(style): no padding between menu buttons on mobile

Also fix the computation of the number of slots available

Signed-off-by: Max <[email protected]>

src/components/Menu/ActionEntry.scss

@@ -45,6 +45,12 @@
 		margin-right: 2px;
 	}
 
+	@media only screen and (max-width: 767px) {
+		.button-vue {
+			margin-right: 0;
+		}
+	}
+
 	.action-item__menutoggle.action-item__menutoggle--with-icon-slot {
 		opacity: 1;
 	}

src/components/Menu/MenuBar.vue

@@ -99,6 +99,7 @@ import { MENU_ID } from './MenuBar.provider.js'
 import { DotsHorizontal, TranslateVariant } from '../icons.js'
 import {
 	useEditorMixin,
+	useIsMobileMixin,
 	useIsRichEditorMixin,
 	useIsRichWorkspaceMixin,
 } from '../Editor.provider.js'
@@ -119,6 +120,7 @@ export default {
 	extends: ToolBarLogic,
 	mixins: [
 		useEditorMixin,
+		useIsMobileMixin,
 		useIsRichEditorMixin,
 		useIsRichWorkspaceMixin,
 	],
@@ -204,7 +206,8 @@ export default {
 
 			// leave some buffer - this is necessary so the bar does not wrap during resizing
 			const spaceToFill = width - 4
-			const slots = Math.floor(spaceToFill / 44)
+			const spacePerSlot = this.$isMobile ? 44 : 46
+			const slots = Math.floor(spaceToFill / spacePerSlot)
 
 			// Leave one slot empty for the three dot menu
 			this.iconsLimit = slots - 1