Merge pull request #6983 from nextcloud/fix/6936-Place-menubar-at-the-bottom-on-mobile

fix(files): Place menubar at the bottom on mobile

Author: JuliaKirschenheuter

cypress/snapshots/base/cypress/e2e/print.spec.js/print view in single-file share.png

@@ -44,9 +44,13 @@ export default {
 <style scoped lang="scss">
 	.editor__content {
 		max-width: min(var(--text-editor-max-width), calc(100vw - 16px));
-		margin: auto;
+		margin: 0 auto;
 		position: relative;
 		width: 100%;
+		:deep([contenteditable]) {
+			// drop off obsolete server styles
+			margin: 0 !important;
+		}
 	}
 
 	.ie {
@@ -59,6 +63,8 @@ export default {
 		--side-width: calc((100% - var(--text-editor-max-width)) / 2);
 		display: grid;
 		grid-template-columns: 1fr auto;
+		overflow: auto;
+		flex: 1;
 		&.--show-outline {
 			grid-template-columns: var(--side-width) auto var(--side-width);
 		}

cypress/snapshots/base/cypress/e2e/print.spec.js/print view in viewer.png

@@ -6,7 +6,7 @@
 <template>
 	<div class="editor editor-media-handler"
 		data-text-el="editor-media-handler"
-		:class="{ draggedOver }"
+		:class="{ draggedOver, 'editor--mobile': isMobile }"
 		@image-paste="onPaste"
 		@dragover.prevent.stop="setDraggedOver(true)"
 		@dragleave.prevent.stop="setDraggedOver(false)"
@@ -28,6 +28,7 @@ import { getCurrentUser } from '@nextcloud/auth'
 import { showError } from '@nextcloud/dialogs'
 import { emit } from '@nextcloud/event-bus'
 import { logger } from '../../helpers/logger.js'
+import { useIsMobile } from '@nextcloud/vue/composables/useIsMobile'
 
 import {
 	useEditorMixin,
@@ -63,6 +64,12 @@ export default {
 
 		return val
 	},
+	setup() {
+		const isMobile = useIsMobile()
+		return {
+			isMobile,
+		}
+	},
 	data() {
 		return {
 			lastFilePath: null,
@@ -199,3 +206,14 @@ export default {
 	},
 }
 </script>
+
+<style scoped lang="scss">
+
+.editor--mobile {
+	display: flex;
+	flex-direction: column-reverse;
+	height: 100%;
+	overflow: auto;
+}
+
+</style>

src/components/Editor/ContentContainer.vue

@@ -12,7 +12,7 @@
 		:class="{
 			'text-menubar--ready': isReady,
 			'text-menubar--hide': isHidden,
-			'text-menubar--is-workspace': $isRichWorkspace
+			'text-menubar--is-workspace': $isRichWorkspace,
 		}">
 		<HelpModal v-if="displayHelp" @close="hideHelp" />
 

src/components/Editor/MediaHandler.vue

@@ -190,7 +190,6 @@ export default {
 
 .container-suggestions {
 	display: flex;
-	flex-grow: 1;
 	margin-left: max(0px, (100% - var(--text-editor-max-width)) / 2);
 }