fix(css): Fix maximum editor/page width on mobile

Maximum width should be the smaller value of either text editor width or screen width. Fixes: #1577 Signed-off-by: Jonas <[email protected]>
nextcloud · Nov 18, 2024 · 0ef4670 · 0ef4670
1 parent 2388d36
commit 0ef4670
Showing 1 changed file with 7 additions and 7 deletions.
diff --git a/src/css/editor.scss b/src/css/editor.scss
@@ -34,13 +34,13 @@
 	.landing-page-widgets,
 	.page-heading-skeleton,
 	.page-content-skeleton {
-		width: var(--text-editor-max-width);
-		max-width: var(--text-editor-max-width);
+		width: min(var(--text-editor-max-width), 100%);
+		max-width: min(var(--text-editor-max-width), 100%);
 		margin-inline: auto;
 	}
 
 	.text-container-heading {
-		max-width: var(--text-editor-max-width);
+		max-width: min(var(--text-editor-max-width), 100%);
 		margin-inline: auto;
 	}
 
@@ -51,19 +51,19 @@
 
 	// Editor document status bar
 	.document-status {
-		max-width: var(--text-editor-max-width);
+		max-width: min(var(--text-editor-max-width), 100%);
 		padding: 0 2px;
 		margin: auto;
 	}
 
 	[data-collectives-el='editor'],
 	[data-collectives-el='reader'] {
 		max-width: unset;
-		min-width: var(--text-editor-max-width);
+		width: min(var(--text-editor-max-width), 100%);
 		margin: auto;
 
 		.text-menubar {
-			max-width: var(--text-editor-max-width);
+			max-width: min(var(--text-editor-max-width), 100%);
 			margin: auto;
 		}
 	}
@@ -85,6 +85,6 @@
 	.page-title, .document-status, .editor__content {
 		margin: unset !important;
 		max-width: unset !important;
-		min-width: var(--text-editor-max-width);
+		width: var(--text-editor-max-width);
 	}
 }