From cdd13e98cb3e7a795fe0d2ba55c3084749c8b6e9 Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Thu, 26 Oct 2023 15:31:49 +0200
Subject: [PATCH] fix(editor): Set CSS variable `--text-editor-max-width` per
 default

Otherwise we break the layout of Text in Viewer (e.g. when opening
a linked file in the viewer).

Signed-off-by: Jonas <jonas@freesources.org>
---
 src/components/Page.vue                    |  2 +-
 src/components/Page/Editor.vue             |  2 +-
 src/components/Page/LandingPageWidgets.vue |  2 +-
 src/components/Page/PageInfoBar.vue        |  2 +-
 src/components/Page/TextEditor.vue         |  4 ++--
 src/components/Page/Version.vue            |  5 +++--
 src/components/SkeletonLoading.vue         | 10 +---------
 src/css/editor.scss                        |  5 +++++
 8 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/components/Page.vue b/src/components/Page.vue
index 75438ee5c4..1a5d2156cb 100644
--- a/src/components/Page.vue
+++ b/src/components/Page.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<h1 id="titleform" class="page-title" :class="{'sheet-view': !isFullWidthView}">
+		<h1 id="titleform" class="page-title" :class="[isFullWidthView ? 'full-width-view' : 'sheet-view']">
 			<!-- Page emoji or icon -->
 			<div class="page-title-icon"
 				:class="{ 'mobile': isMobile }">
diff --git a/src/components/Page/Editor.vue b/src/components/Page/Editor.vue
index 665a55d041..4af19edaa5 100644
--- a/src/components/Page/Editor.vue
+++ b/src/components/Page/Editor.vue
@@ -11,7 +11,7 @@
 		:show-outline-outside="showOutline"
 		mime="text/markdown"
 		class="file-view active"
-		:class="{'sheet-view': !isFullWidthView}"
+		:class="[isFullWidthView ? 'full-width-view' : 'sheet-view']"
 		@ready="ready"
 		@outline-toggled="toggleOutlineFromText"
 		@add-image-node="onAddImageNode"
diff --git a/src/components/Page/LandingPageWidgets.vue b/src/components/Page/LandingPageWidgets.vue
index 3886a71175..d3e1167c62 100644
--- a/src/components/Page/LandingPageWidgets.vue
+++ b/src/components/Page/LandingPageWidgets.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="landing-page-widgets"
-		:class="{'sheet-view': !isFullWidthView}">
+		:class="[isFullWidthView ? 'full-width-view' : 'sheet-view']">
 		<MembersWidget v-if="!isPublic" />
 		<RecentPagesWidget />
 	</div>
diff --git a/src/components/Page/PageInfoBar.vue b/src/components/Page/PageInfoBar.vue
index 225b44303e..797058c679 100644
--- a/src/components/Page/PageInfoBar.vue
+++ b/src/components/Page/PageInfoBar.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="text-menubar"
-		:class="{'sheet-view': !isFullWidthView}">
+		:class="[isFullWidthView ? 'full-width-view' : 'sheet-view']">
 		<div v-if="currentPage.lastUserId" class="infobar-item infobar-lastupdate">
 			<div class="item-text">
 				<LastUserBubble :last-user-id="currentPage.lastUserId"
diff --git a/src/components/Page/TextEditor.vue b/src/components/Page/TextEditor.vue
index e8fba96905..2107bc12db 100644
--- a/src/components/Page/TextEditor.vue
+++ b/src/components/Page/TextEditor.vue
@@ -3,11 +3,11 @@
 		<WidgetHeading v-if="isLandingPage"
 			:title="t('collectives', 'Landing page')"
 			class="text-container-heading"
-			:class="{'sheet-view': !isFullWidthView}" />
+			:class="[isFullWidthView ? 'full-width-view' : 'sheet-view']" />
 		<div v-show="showRichText"
 			id="text-container"
 			:key="'text-' + currentPage.id"
-			:class="{'sheet-view': !isFullWidthView}"
+			:class="[isFullWidthView ? 'full-width-view' : 'sheet-view']"
 			:aria-label="t('collectives', 'Page content')">
 			<RichText :key="`reader-${currentPage.id}`"
 				:current-page="currentPage"
diff --git a/src/components/Page/Version.vue b/src/components/Page/Version.vue
index e83cc8cf9e..666f60bd97 100644
--- a/src/components/Page/Version.vue
+++ b/src/components/Page/Version.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<h1 id="titleform" class="page-title" :class="{'sheet-view': !isFullWidthView}">
+		<h1 id="titleform" class="page-title" :class="[isFullWidthView ? 'full-width-view' : 'sheet-view']">
 			<input class="title"
 				:class="{ 'mobile': isMobile }"
 				type="text"
@@ -19,7 +19,8 @@
 				<NcActionButton icon="icon-menu-sidebar" :close-after-click="true" @click="closeVersions" />
 			</NcActions>
 		</h1>
-		<div id="text-container">
+		<div id="text-container"
+			:class="[isFullWidthView ? 'full-width-view' : 'sheet-view']">
 			<RichText :key="`show-${currentPage.id}-${version.timestamp}`"
 				:current-page="currentPage"
 				:page-content="pageVersionContent" />
diff --git a/src/components/SkeletonLoading.vue b/src/components/SkeletonLoading.vue
index 249bad72f2..68b73cd2fc 100644
--- a/src/components/SkeletonLoading.vue
+++ b/src/components/SkeletonLoading.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="placeholder-main"
-		:class="placeholderClasses">
+		:class="[`placeholder-main-${this.type}`, isFullWidthView ? 'full-width-view' : 'sheet-view']">
 		<!-- Placeholder animation -->
 		<template v-for="(suffix, gradientIndex) in ['-regular', '-reverse']">
 			<svg :key="'gradient' + suffix" :class="'placeholder-gradient placeholder-gradient' + suffix">
@@ -83,14 +83,6 @@ export default {
 			'isFullWidthView',
 		]),
 
-		placeholderClasses() {
-			const classes = [`placeholder-main-${this.type}`]
-			if (!this.isFullWidthView) {
-				classes.push('sheet-view')
-			}
-			return classes
-		},
-
 		placeholderData() {
 			const data = []
 			for (let i = 0; i < this.count; i++) {
diff --git a/src/css/editor.scss b/src/css/editor.scss
index 1274ed293a..1e7cd1c7ba 100644
--- a/src/css/editor.scss
+++ b/src/css/editor.scss
@@ -1,5 +1,10 @@
 :root {
+	--text-editor-max-width: 670px !important;
+}
+
+.full-width-view {
 	--text-editor-max-width: false !important;
+	max-width: unset;
 }
 
 .sheet-view {