1 files changed, 20 insertions, 57 deletions
diff --git a/apps/settings/css/settings.scss b/apps/settings/css/settings.scss
index 7ce414878fd..7968e3b4971 100644
--- a/apps/settings/css/settings.scss
+++ b/apps/settings/css/settings.scss
@@ -45,8 +45,7 @@ input {
 
 .profile-settings-container {
 	display: inline-grid;
-	grid-template-columns: 1fr;
-	grid-template-rows: 1fr 1fr 1fr 2fr;
+	grid-template-columns: 1fr 1fr 1fr;
 }
 
 .personal-show-container {
@@ -67,6 +66,17 @@ input {
 			}
 		}
 	}
+
+	&-profile {
+		grid-row: 3/5;
+	}
+
+	&-detail {
+		grid-row: 5;
+	}
+	&-detail--without-profile {
+		grid-row: 3;
+	}
 }
 
 select {
@@ -78,8 +88,8 @@ select {
 #personal-settings {
 	display: grid;
 	padding: 20px;
-	max-width: 1500px;
-	grid-template-columns: 1fr 2fr 1fr;
+	max-width: 1700px;
+	grid-template-columns: 1fr 1fr 1fr 1fr;
 
 	.section {
 		padding: 10px 10px;
@@ -139,77 +149,30 @@ select {
 	}
 }
 
-
-
-@media (min-width: 1200px) and (max-width: 1400px) {
+@media (min-width: 1400px) and (max-width: 1700px) {
 	#personal-settings {
 		display: grid;
-		grid-template-columns: 1fr 2fr;
-
-		#personal-settings-avatar-container {
-			grid-template-columns: 1fr;
-			grid-template-rows: 1fr;
-		}
-
-		.personal-settings-container {
-			grid-template-columns: 1fr 1fr;
-			grid-template-rows: 1fr 1fr 1fr 1fr;
-		}
-
-		.profile-settings-container {
-			grid-template-columns: 1fr 1fr;
-			grid-template-rows: 1fr;
-			grid-column: 2;
-		}
+		grid-template-columns: 1fr 1fr 1fr;
 	}
 }
 
-@media (max-width: 1200px) {
+@media (min-width: 800px) and (max-width: 1400px) {
 	#personal-settings {
 		display: grid;
-		grid-template-columns: 1fr;
-
-		#personal-settings-avatar-container {
-			grid-template-rows: 1fr;
-		}
-
-		.personal-settings-container {
-			grid-template-columns: 1fr 1fr;
-			grid-template-rows: 1fr 1fr 1fr 1fr;
-		}
-
-		.profile-settings-container {
-			grid-template-columns: 1fr 1fr;
-			grid-template-rows: 1fr;
-		}
+		grid-template-columns: 1fr 1fr;
 	}
 }
 
-@media (max-width: 560px) {
+@media (max-width: 800px) {
 	#personal-settings {
 		display: grid;
 		grid-template-columns: 1fr;
-
-		#personal-settings-avatar-container {
-			grid-template-rows: 1fr;
-		}
-
-		.personal-settings-container {
-			grid-template-columns: 1fr;
-			grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
-		}
-
-		.profile-settings-container {
-			grid-template-columns: 1fr;
-			grid-template-rows: 1fr 1fr;
-		}
 	}
 }
 
 .personal-settings-container {
 	display: inline-grid;
-	grid-template-columns: 1fr 1fr;
-	grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
+	grid-template-columns: 1fr 1fr 1fr;
 
 	&:after {
 		clear: both;