[chore] Webkit frontend fixes (#1492)

* fix webkit profile preview layout * general page layout
superseriousbusiness · Feb 14, 2023 · 700ed77 · 700ed77
1 parent 6c6f042
commit 700ed77
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 25 deletions.
diff --git a/web/source/css/base.css b/web/source/css/base.css
@@ -47,7 +47,6 @@ html, body {
 
 body {
 	line-height: 1.5em;
-	min-height: 100vh;
 	position: relative;
 }
 
@@ -56,11 +55,8 @@ body {
 }
 
 .page {
-	position: absolute;
 	display: grid;
-	min-height: 100%;
-	min-width: 100%;
-	width: 100%;
+	min-height: 100vh;
 
 	grid-template-columns: auto minmax(auto, 50rem) auto;
 	grid-template-columns: auto min(92%, 50rem) auto;

diff --git a/web/source/css/profile.css b/web/source/css/profile.css
@@ -30,7 +30,6 @@ main {
 .profile {
 	background: $bg-accent;
 	display: grid;
-	grid-template-rows: auto auto auto;
 	grid-template-columns: 100%;
 	gap: 0.5rem;
 	margin-bottom: 0.2rem;

diff --git a/web/source/settings/style.css b/web/source/settings/style.css
@@ -35,9 +35,9 @@ section {
 
 #root {
 	display: grid;
-	grid-template-columns: 1fr 90ch 1fr;
-	width: 100vw;
-	max-width: 100vw;
+	/* keep in sync with base.css .page {} */
+	grid-template-columns: auto minmax(auto, 50rem) auto;
+	grid-template-columns: auto min(92%, 50rem) auto;
 	box-sizing: border-box;
 
 	section.with-sidebar {
@@ -319,22 +319,25 @@ section.with-sidebar > div, section.with-sidebar > form {
 		display: grid;
 		grid-template-columns: 70% 30%;
 		grid-template-rows: 100%;
+		gap: 1rem;
+
+		.profile {
+			.basic {
+				margin-bottom: 0.5rem;
+				/* margin-top: 0; */
+			}
+		}
 
 		.files {
 			width: 100%;
-			margin: 1rem;
-			margin-right: 0;
 			display: flex;
 			flex-direction: column;
 			justify-content: center;
+			gap: 1rem;
 
 			h3 {
-				margin-top: 0;
-				margin-bottom: 0.5rem;
-			}
-
-			div:first-child {
-				margin-bottom: 1rem;
+				margin: 0;
+				margin-bottom: 0.3rem;
 			}
 
 			span {
@@ -456,7 +459,8 @@ span.form-info {
 	}
 }
 
-@media screen and (max-width: 100ch) {
+@media screen and (max-width: 60rem) {
+	/* vertical layout */
 	#root {
 		padding: 1rem;
 		grid-template-columns: 100%;
@@ -484,13 +488,8 @@ span.form-info {
 	}
 
 	.user-profile .overview {
-		grid-template-columns: 100%;
-		grid-template-rows: auto auto;
-
-		.files {
-			margin: 0;
-			margin-top: 1rem;
-		}
+		grid-template-columns: auto;
+		grid-template-rows: auto 1fr;
 	}
 
 	main section {