fix(settings): Align contents of profile picture heading

Signed-off-by: Christopher Ng <chrng8@gmail.com>

Author: Pytal

apps/settings/src/components/PersonalInfo/AvatarSection.vue

@@ -259,7 +259,7 @@ section {
 }
 .avatar {
 	&__container {
-		margin: 0 auto;
+		margin: calc(var(--default-grid-baseline) * 2) auto 0 auto;
 		display: flex;
 		flex-direction: column;
 		justify-content: center;

apps/settings/src/components/PersonalInfo/shared/HeaderBar.vue

@@ -5,7 +5,7 @@
 
 <template>
 	<div class="headerbar-label" :class="{ 'setting-property': isSettingProperty, 'profile-property': isProfileProperty }">
-		<h3 v-if="isHeading">
+		<h3 v-if="isHeading" class="headerbar__heading">
 			<!-- Already translated as required by prop validator -->
 			{{ readable }}
 		</h3>
@@ -138,6 +138,10 @@ export default {
 		}
 	}
 
+	.headerbar__heading {
+		margin: 0;
+	}
+
 	.federation-control {
 		margin: 0;
 	}