From 58123f6e79281fbc5f01ece7dc3931b6fc72b090 Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Mon, 6 Oct 2025 15:26:20 +0200
Subject: [PATCH] fix(editor): restore default editor width while not breaking
 drag handle

This way the drag handle overflows the editor width just like all the
other action buttons left and right of the editor already did before.

To make sure the drag handle stays when leaving the editor container with
the pointer while trying to reach the drag handle, the latter gets an
extra `padding-right` to close the gap.

Since the link preview options three-dot menu is in that gap, it needs
a higher z-index to stay accessible.

Fixes: #7649
Fixes: nextcloud/collectives#2020

Signed-off-by: Jonas <jonas@freesources.org>
---
 cypress/e2e/MenuBar.spec.js                | 5 +----
 src/components/Editor/ContentContainer.vue | 1 +
 src/components/Editor/PreviewOptions.vue   | 2 ++
 src/composables/useEditorWidth.ts          | 6 +-----
 src/css/prosemirror.scss                   | 2 +-
 5 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/cypress/e2e/MenuBar.spec.js b/cypress/e2e/MenuBar.spec.js
index 8d4a4bde18b..76c885a9be4 100644
--- a/cypress/e2e/MenuBar.spec.js
+++ b/cypress/e2e/MenuBar.spec.js
@@ -63,10 +63,7 @@ describe('Test the rich text editor menu bar', function () {
 
 		it('applys default', function () {
 			cy.openTestFile()
-			cy.get('@maxWidth').should(
-				'equal',
-				'calc(80ch + 2 * 15 * var(--default-grid-baseline))',
-			)
+			cy.get('@maxWidth').should('equal', '80ch')
 		})
 
 		it('toggles value', function () {
diff --git a/src/components/Editor/ContentContainer.vue b/src/components/Editor/ContentContainer.vue
index 3cf92f4eaaa..f7740c4fd1c 100644
--- a/src/components/Editor/ContentContainer.vue
+++ b/src/components/Editor/ContentContainer.vue
@@ -110,5 +110,6 @@ export default {
 	position: absolute;
 	left: -60px;
 	transform: translate(0, -20%);
+	padding-right: 24px;
 }
 </style>
diff --git a/src/components/Editor/PreviewOptions.vue b/src/components/Editor/PreviewOptions.vue
index ecd48529fc7..cf58e6155ef 100644
--- a/src/components/Editor/PreviewOptions.vue
+++ b/src/components/Editor/PreviewOptions.vue
@@ -120,6 +120,8 @@ div[contenteditable='false'] {
 	left: -44px;
 	top: 50%;
 	transform: translate(0, -50%);
+	// Required to overlay the drag handler padding
+	z-index: 10000;
 }
 
 // Inside details, button needs to be shifted further
diff --git a/src/composables/useEditorWidth.ts b/src/composables/useEditorWidth.ts
index 3d580dd431e..ee0dac3a4a0 100644
--- a/src/composables/useEditorWidth.ts
+++ b/src/composables/useEditorWidth.ts
@@ -71,11 +71,7 @@ export const provideEditorWidth = () => {
 		valueSingleton = value
 		isFullWidth.value = value
 	})
-	const width = computed(() =>
-		isFullWidth.value
-			? '100%'
-			: 'calc(80ch + 2 * 15 * var(--default-grid-baseline))',
-	)
+	const width = computed(() => (isFullWidth.value ? '100%' : '80ch'))
 	const applyEditorWidth = () => {
 		document.documentElement.style.setProperty(
 			'--text-editor-max-width',
diff --git a/src/css/prosemirror.scss b/src/css/prosemirror.scss
index 2ede972a4aa..c6b5497d3c2 100644
--- a/src/css/prosemirror.scss
+++ b/src/css/prosemirror.scss
@@ -15,7 +15,7 @@ div.ProseMirror {
 	white-space: pre-wrap;
 	-webkit-font-variant-ligatures: none;
 	font-variant-ligatures: none;
-	padding: 4px calc(15 * var(--default-grid-baseline)) 50px calc(15 * var(--default-grid-baseline));
+	padding: 4px 8px 50px 14px;
 	line-height: 150%;
 	font-size: var(--default-font-size);
 	outline: none;