Merge pull request #5605 from nextcloud-libraries/backport/5514/next

[next] fix(NcSettingSection): update design and remove `limitWidth` option

src/components/NcSettingsSection/NcSettingsSection.vue

@@ -33,16 +33,15 @@ 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>
 ```
 </docs>
 
 <template>
-	<div class="settings-section" :class="{'settings-section--limit-width': limitWidth}">
+	<div class="settings-section">
 		<h2 class="settings-section__name">
 			{{ name }}
 			<a v-if="hasDocUrl"
@@ -88,16 +87,6 @@ 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() {
@@ -122,26 +111,22 @@ export default {
 
 <style lang="scss" scoped>
 $maxWidth: 900px;
+$sectionMargin: calc(var(--default-grid-baseline) * 7);
 
 .settings-section {
 	display: block;
-	margin-bottom: auto;
-	padding: 30px;
+	padding: 0 0 calc(var(--default-grid-baseline) * 5) 0;
+	margin: $sectionMargin;
+	width: min($maxWidth, 100% - calc($sectionMargin * 2));
 
 	&: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;
 	}