From 7d1ac4f793a132a79b6d68d225af7b101e3d2b34 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Fri, 17 May 2024 10:27:30 +0200
Subject: [PATCH 1/2] fix: Revert "Update NcAppSettingSection design"

This reverts commit fea8d49484a93278fb33d4027a140627b2e837f6.
The change was breaking and is breaking all server versions.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 .../NcSettingsSection/NcSettingsSection.vue   | 27 ++++++++++++++-----
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/components/NcSettingsSection/NcSettingsSection.vue b/src/components/NcSettingsSection/NcSettingsSection.vue
index deb4c26266..6d164e9766 100644
--- a/src/components/NcSettingsSection/NcSettingsSection.vue
+++ b/src/components/NcSettingsSection/NcSettingsSection.vue
@@ -33,7 +33,8 @@ This component is to be used in the settings section of nextcloud.
 	<NcSettingsSection
 		name="Two-Factor Authentication"
 		description="Two-factor authentication can be enforced for all users and specific groups."
-		doc-url="https://docs.nextcloud.com/server/19/go.php?to=admin-2fa">
+		doc-url="https://docs.nextcloud.com/server/19/go.php?to=admin-2fa"
+		:limit-width="true">
 		<p>Your settings here</p>
 	</NcSettingsSection>
 </template>
@@ -41,7 +42,7 @@ This component is to be used in the settings section of nextcloud.
 </docs>
 
 <template>
-	<div class="settings-section">
+	<div class="settings-section" :class="{'settings-section--limit-width': limitWidth}">
 		<h2 class="settings-section__name">
 			{{ name }}
 			<a v-if="hasDocUrl"
@@ -87,6 +88,16 @@ export default {
 			type: String,
 			default: '',
 		},
+		/**
+		 * Limit the width of the setting's content
+		 *
+		 * By default only the name and description have a limit, use this
+		 * property to also apply this to the rest of the content.
+		 */
+		limitWidth: {
+			type: Boolean,
+			default: true,
+		},
 	},
 
 	data() {
@@ -111,22 +122,26 @@ export default {
 
 <style lang="scss" scoped>
 $maxWidth: 900px;
-$sectionMargin: calc(var(--default-grid-baseline) * 7);
 
 .settings-section {
 	display: block;
-	padding: 0 0 calc(var(--default-grid-baseline) * 5) 0;
-	margin: $sectionMargin;
-	width: min($maxWidth, 100% - calc($sectionMargin * 2));
+	margin-bottom: auto;
+	padding: 30px;
 
 	&:not(:last-child) {
 		border-bottom: 1px solid var(--color-border);
 	}
 
+	&--limit-width > * {
+		max-width: $maxWidth;
+	}
+
 	&__name {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
+		font-size: 20px;
+		font-weight: bold;
 		max-width: $maxWidth;
 	}
 

From 1627a5c25c1ae4c587e09600ca901c12eafdcc4f Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Fri, 17 May 2024 10:41:33 +0200
Subject: [PATCH 2/2] fix(NcSettingsSection): Force limit width on Nextcloud
 30+

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 .../NcSettingsSection/NcSettingsSection.vue   | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/NcSettingsSection/NcSettingsSection.vue b/src/components/NcSettingsSection/NcSettingsSection.vue
index 6d164e9766..7741df0ff5 100644
--- a/src/components/NcSettingsSection/NcSettingsSection.vue
+++ b/src/components/NcSettingsSection/NcSettingsSection.vue
@@ -33,8 +33,7 @@ This component is to be used in the settings section of nextcloud.
 	<NcSettingsSection
 		name="Two-Factor Authentication"
 		description="Two-factor authentication can be enforced for all users and specific groups."
-		doc-url="https://docs.nextcloud.com/server/19/go.php?to=admin-2fa"
-		:limit-width="true">
+		doc-url="https://docs.nextcloud.com/server/19/go.php?to=admin-2fa">
 		<p>Your settings here</p>
 	</NcSettingsSection>
 </template>
@@ -42,7 +41,7 @@ This component is to be used in the settings section of nextcloud.
 </docs>
 
 <template>
-	<div class="settings-section" :class="{'settings-section--limit-width': limitWidth}">
+	<div class="settings-section" :class="{'settings-section--limit-width': forceLimitWidth}">
 		<h2 class="settings-section__name">
 			{{ name }}
 			<a v-if="hasDocUrl"
@@ -91,8 +90,9 @@ export default {
 		/**
 		 * Limit the width of the setting's content
 		 *
-		 * By default only the name and description have a limit, use this
-		 * property to also apply this to the rest of the content.
+		 * Setting this to false allows unrestricted (width) settings content.
+		 * Note that the name and description have always a width limit.
+		 * @deprecated Will be removed with next version and will not be used on Nextcloud 30+ (always forced to true)
 		 */
 		limitWidth: {
 			type: Boolean,
@@ -109,6 +109,15 @@ export default {
 	},
 
 	computed: {
+		forceLimitWidth() {
+			if (this.limitWidth) {
+				return true
+			}
+			// Overwrite this on Nextcloud 30+ to always limit the width
+			const [major] = window._oc_config?.version.split('.', 2) ?? []
+			return major && Number.parseInt(major) >= 30
+		},
+
 		hasDescription() {
 			return this.description.length > 0
 		},