Fix profile visibility not appearing

And refactor how the grid works (now it's automatically using the
correct size instead of harcoding it)

Signed-off-by: Carl Schwan <carl@carlschwan.eu>

apps/settings/css/settings.css

@@ -136,7 +136,7 @@ select#timezone {
   display: grid;
   padding: 20px;
   max-width: 1700px;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 }
 #personal-settings .section {
   padding: 10px 10px;
@@ -186,24 +186,6 @@ select#timezone {
   background-position: 24px;
 }
 
-@media (min-width: 1400px) and (max-width: 1700px) {
-  #personal-settings {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-  }
-}
-@media (min-width: 800px) and (max-width: 1400px) {
-  #personal-settings {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-  }
-}
-@media (max-width: 800px) {
-  #personal-settings {
-    display: grid;
-    grid-template-columns: 1fr;
-  }
-}
 .personal-settings-container {
   display: inline-grid;
   grid-template-columns: 1fr 1fr 1fr;

apps/settings/css/settings.scss

@@ -89,7 +89,7 @@ select {
 	display: grid;
 	padding: 20px;
 	max-width: 1700px;
-	grid-template-columns: 1fr 1fr 1fr 1fr;
+	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 
 	.section {
 		padding: 10px 10px;
@@ -149,27 +149,6 @@ select {
 	}
 }
 
-@media (min-width: 1400px) and (max-width: 1700px) {
-	#personal-settings {
-		display: grid;
-		grid-template-columns: 1fr 1fr 1fr;
-	}
-}
-
-@media (min-width: 800px) and (max-width: 1400px) {
-	#personal-settings {
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-	}
-}
-
-@media (max-width: 800px) {
-	#personal-settings {
-		display: grid;
-		grid-template-columns: 1fr;
-	}
-}
-
 .personal-settings-container {
 	display: inline-grid;
 	grid-template-columns: 1fr 1fr 1fr;

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

@@ -21,7 +21,7 @@
 -->
 
 <template>
-	<section>
+	<section id="vue-avatar-section">
 		<HeaderBar :input-id="avatarChangeSupported ? inputId : null"
 			:readable="avatar.readable"
 			:scope.sync="avatar.scope" />

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

@@ -81,7 +81,7 @@ export default {
 				.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('personal-settings-avatar-container')).getPropertyValue('width').trim()
+				? window.getComputedStyle(document.getElementById('vue-avatar-section')).getPropertyValue('width').trim()
 				: '0px',
 		}
 	},
@@ -101,7 +101,7 @@ export default {
 		// TODO remove this when not used once the settings layout is updated
 		window.onresize = () => {
 			this.marginLeft = window.matchMedia('(min-width: 1600px)').matches
-				? window.getComputedStyle(document.getElementById('personal-settings-avatar-container')).getPropertyValue('width').trim()
+				? window.getComputedStyle(document.getElementById('vue-avatar-section')).getPropertyValue('width').trim()
 				: '0px'
 		}
 	},
@@ -121,7 +121,8 @@ export default {
 <style lang="scss" scoped>
 section {
 	padding: 30px;
-	max-width: 100vw;
+	max-width: 900px;
+	width: 100%;
 
 	em {
 		display: block;

apps/settings/templates/settings/personal/personal.info.php

@@ -103,7 +103,6 @@ script('settings', [
 
 	<div id="personal-settings-group-container"></div>
 </div>
-
 <?php if ($_['profileEnabledGlobally']) : ?>
 	<div class="personal-settings-section">
 		<div id="vue-profile-visibility-section"></div>