From f80b06a265de37ff92161ad50484971bceb5ab07 Mon Sep 17 00:00:00 2001
From: Marco <marcoambrosini@icloud.com>
Date: Mon, 11 Mar 2024 17:14:18 +0100
Subject: [PATCH] Improve personal settings layout

Signed-off-by: Marco <marcoambrosini@icloud.com>
---
 apps/settings/css/settings.scss               |  15 ++-
 .../ProfileSection/EditProfileAnchorLink.vue  |   2 -
 .../ProfileSection/ProfilePreviewCard.vue     |   1 -
 .../ProfileSection/ProfileSection.vue         |  12 ++-
 .../ProfileVisibilitySection.vue              |  11 +-
 .../PersonalInfo/shared/HeaderBar.vue         |   2 +-
 .../settings/personal/personal.info.php       | 101 +++++++++---------
 7 files changed, 77 insertions(+), 67 deletions(-)

diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss
index c77a420e8d440..8c617d42426cb 100644
--- a/apps/settings/css/settings.scss
+++ b/apps/settings/css/settings.scss
@@ -86,11 +86,17 @@ select {
 }
 
 #personal-settings {
-	display: grid;
+	display: flex;
 	padding: 20px;
-	max-width: 1700px;
-	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
-	grid-column-gap: 10px;
+	max-width: 1600px;
+	margin: auto;
+	flex-wrap: wrap-reverse;
+	justify-content: center;
+	gap: 16px;
+
+	label {
+		font-weight: bold;
+	}
 
 	.section {
 		padding: 10px 10px;
@@ -101,6 +107,7 @@ select {
 		}
 
 		h3 {
+			font-weight: bold;
 			> label {
 				font-weight: bold;
 			}
diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue
index a47936ba7aeb4..c0bc0ccf3810e 100644
--- a/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue
+++ b/apps/settings/src/components/PersonalInfo/ProfileSection/EditProfileAnchorLink.vue
@@ -69,12 +69,10 @@ html {
 a {
 	display: block;
 	height: 44px;
-	width: min(100%, 290px);
 	overflow: hidden;
 	text-overflow: ellipsis;
 	line-height: 44px;
 	padding: 0 16px;
-	margin: 14px auto;
 	border-radius: var(--border-radius-pill);
 	color: var(--color-text-maxcontrast);
 	background-color: transparent;
diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue
index 5ef6a00b1f2b9..2f2d8118508e2 100644
--- a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue
+++ b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfilePreviewCard.vue
@@ -95,7 +95,6 @@ export default {
 	display: flex;
 	flex-direction: column;
 	position: relative;
-	width: min(100%, 290px);
 	height: 116px;
 	margin: 14px auto;
 	border-radius: var(--border-radius-large);
diff --git a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileSection.vue b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileSection.vue
index 6b775092c6c84..c61a7dd1e6c14 100644
--- a/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileSection.vue
+++ b/apps/settings/src/components/PersonalInfo/ProfileSection/ProfileSection.vue
@@ -24,14 +24,15 @@
 	<section>
 		<HeaderBar :is-heading="true" :readable="propertyReadable" />
 
-		<ProfileCheckbox :profile-enabled.sync="profileEnabled" />
+		<div class="profile-section_controls-wrapper">
+			<ProfileCheckbox :profile-enabled.sync="profileEnabled" />
+			<EditProfileAnchorLink :profile-enabled="profileEnabled" />
+		</div>
 
 		<ProfilePreviewCard :organisation="organisation"
 			:display-name="displayName"
 			:profile-enabled="profileEnabled"
 			:user-id="userId" />
-
-		<EditProfileAnchorLink :profile-enabled="profileEnabled" />
 	</section>
 </template>
 
@@ -103,4 +104,9 @@ section {
 		cursor: default;
 	}
 }
+
+.profile-section_controls-wrapper {
+	display: flex;
+	align-items: center;
+}
 </style>
diff --git a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue
index af45359d5a544..5ba5050e3d44f 100644
--- a/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue
+++ b/apps/settings/src/components/PersonalInfo/ProfileVisibilitySection/ProfileVisibilitySection.vue
@@ -21,9 +21,7 @@
 -->
 
 <template>
-	<!-- TODO remove this inline margin placeholder once the settings layout is updated -->
-	<section id="profile-visibility"
-		:style="{ marginLeft }">
+	<section id="profile-visibility">
 		<HeaderBar :is-heading="true" :readable="heading" />
 
 		<em :class="{ disabled }">
@@ -79,10 +77,6 @@ export default {
 			visibilityParams: Object.entries(profileConfig)
 				.map(([paramId, { appId, displayId, visibility }]) => ({ id: paramId, appId, displayId, visibility }))
 				.sort(compareParams),
-			// TODO remove this when not used once the settings layout is updated
-			marginLeft: window.matchMedia('(min-width: 1600px)').matches
-				? window.getComputedStyle(document.getElementById('vue-avatar-section')).getPropertyValue('width').trim()
-				: '0px',
 		}
 	},
 
@@ -121,8 +115,9 @@ export default {
 <style lang="scss" scoped>
 section {
 	padding: 30px;
-	max-width: 900px;
+	max-width: 800px;
 	width: 100%;
+	margin: auto;
 
 	em {
 		display: block;
diff --git a/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue b/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
index 18ae30e1dd587..d31b331acfcb1 100644
--- a/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
+++ b/apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue
@@ -133,7 +133,7 @@ export default {
 
 <style lang="scss" scoped>
 	.headerbar-label {
-		font-weight: normal;
+		font-weight: bold;
 		display: inline-flex;
 		width: 100%;
 		margin: 12px 0 0 0;
diff --git a/apps/settings/templates/settings/personal/personal.info.php b/apps/settings/templates/settings/personal/personal.info.php
index 4dae3921645df..fc30e8190cef8 100644
--- a/apps/settings/templates/settings/personal/personal.info.php
+++ b/apps/settings/templates/settings/personal/personal.info.php
@@ -44,64 +44,69 @@
 <?php endif; ?>
 
 <div id="personal-settings">
-	<h2 class="hidden-visually"><?php p($l->t('Personal info')); ?></h2>
-	<div id="vue-avatar-section"></div>
-	<?php if ($_['profileEnabledGlobally']) : ?>
-		<div class="personal-settings-setting-box personal-settings-setting-box-profile">
-			<div id="vue-profile-section"></div>
-		</div>
-		<div class="personal-settings-setting-box personal-settings-setting-box-detail">
-			<div id="vue-details-section"></div>
+	<div class-"personal-settings__left-column">
+		<div class="personal-settings-setting-box"></div>
+		<div id="vue-displayname-section"></div>
+		
+		<div class="personal-settings-setting-box">
+			<div id="vue-email-section"></div>
 		</div>
-	<?php else: ?>
-		<div class="personal-settings-setting-box personal-settings-setting-box-detail--without-profile">
-			<div id="vue-details-section"></div>
+		<div class="personal-settings-setting-box">
+			<div id="vue-phone-section"></div>
 		</div>
-	<?php endif; ?>
-	<div class="personal-settings-setting-box">
-		<div id="vue-displayname-section"></div>
-	</div>
-	<div class="personal-settings-setting-box">
-		<div id="vue-email-section"></div>
-	</div>
-	<div class="personal-settings-setting-box">
-		<div id="vue-phone-section"></div>
-	</div>
-	<div class="personal-settings-setting-box">
-		<div id="vue-location-section"></div>
-	</div>
-	<div class="personal-settings-setting-box personal-settings-language-box">
-		<div id="vue-language-section"></div>
-	</div>
-	<div class="personal-settings-setting-box personal-settings-locale-box">
-		<div id="vue-locale-section"></div>
-	</div>
-	<div class="personal-settings-setting-box">
-		<div id="vue-website-section"></div>
-	</div>
-	<div class="personal-settings-setting-box">
-		<div id="vue-twitter-section"></div>
-	</div>
-	<div class="personal-settings-setting-box">
-		<div id="vue-fediverse-section"></div>
-	</div>
-	<?php if ($_['profileEnabledGlobally']) : ?>
 		<div class="personal-settings-setting-box">
-			<div id="vue-organisation-section"></div>
+			<div id="vue-location-section"></div>
 		</div>
 		<div class="personal-settings-setting-box">
-			<div id="vue-role-section"></div>
+			<div id="vue-website-section"></div>
 		</div>
 		<div class="personal-settings-setting-box">
-			<div id="vue-headline-section"></div>
+			<div id="vue-twitter-section"></div>
 		</div>
 		<div class="personal-settings-setting-box">
-			<div id="vue-biography-section"></div>
+			<div id="vue-fediverse-section"></div>
 		</div>
-	<?php endif; ?>
-	<span class="msg"></span>
-
-	<div id="personal-settings-group-container"></div>
+		<?php if ($_['profileEnabledGlobally']) : ?>
+			<div class="personal-settings-setting-box">
+				<div id="vue-organisation-section"></div>
+			</div>
+			<div class="personal-settings-setting-box">
+				<div id="vue-role-section"></div>
+			</div>
+			<div class="personal-settings-setting-box">
+				<div id="vue-headline-section"></div>
+			</div>
+			<div class="personal-settings-setting-box">
+				<div id="vue-biography-section"></div>
+			</div>
+		<?php endif; ?>
+		<span class="msg"></span>
+		<div id="personal-settings-group-container"></div>
+	</div>
+	<div class="personal-settings__right-column">
+		<h2 class="hidden-visually"><?php p($l->t('Personal info')); ?></h2>
+		<div id="vue-avatar-section"></div>
+		<?php if ($_['profileEnabledGlobally']) : ?>
+			<div class="personal-settings-setting-box personal-settings-setting-box-profile">
+				<div id="vue-profile-section"></div>
+			</div>
+			<div class="personal-settings-setting-box personal-settings-setting-box-detail">
+				<div id="vue-details-section"></div>
+			</div>
+		<?php else: ?>
+			<div class="personal-settings-setting-box personal-settings-setting-box-detail--without-profile">
+				<div id="vue-details-section"></div>
+			</div>
+		<?php endif; ?>
+		<div class="personal-settings-setting-box personal-settings-language-box">
+				<div id="vue-language-section"></div>
+			</div>
+		<div class="personal-settings-setting-box personal-settings-locale-box">
+			<div id="vue-locale-section"></div>
+		</div>
+	</div>
+	
+	
 </div>
 <?php if ($_['profileEnabledGlobally']) : ?>
 	<div class="personal-settings-section">