From 0ef4670d4b19bbb039130c0f14e25eaf78c401fc Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Tue, 12 Nov 2024 17:56:42 +0100
Subject: [PATCH] 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 <jonas@freesources.org>
---
 src/css/editor.scss | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/css/editor.scss b/src/css/editor.scss
index 5845ee23e..084cb9c71 100644
--- 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,7 +51,7 @@
 
 	// 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;
 	}
@@ -59,11 +59,11 @@
 	[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);
 	}
 }