From 1d5c737bbb2d9fe0624830591ce622347c84f314 Mon Sep 17 00:00:00 2001
From: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Wed, 13 Jul 2022 11:28:05 +0200
Subject: [PATCH] [bugfix] Fix profile card display issues on smaller screens
 w/responsive query (#696)

* add responsive media query to profile css

* break username on all screen sizes if necessary

* embed avatar inside header on smaller screen sizes

* align items to the left in small screen view

* more consistent profile scaling accross firefox and chrome

* simplify things a little bit

* make sure bio fits in profile

* word-break content if necessary

Co-authored-by: f0x <f0x@cthu.lu>
---
 web/source/css/base.css    |  6 ----
 web/source/css/profile.css | 66 +++++++++++++++++++++++++++++---------
 web/source/css/status.css  |  4 +++
 web/template/profile.tmpl  |  2 +-
 4 files changed, 56 insertions(+), 22 deletions(-)

diff --git a/web/source/css/base.css b/web/source/css/base.css
index 66dd8b838..0b09a9a90 100644
--- a/web/source/css/base.css
+++ b/web/source/css/base.css
@@ -50,9 +50,7 @@ body {
 	min-height: 100%;
 	min-width: 100%;
 
-	grid-template-columns: 1fr 50% 1fr;
 	grid-template-columns: auto min(92%, 90ch) auto;
-
 	grid-template-rows: auto 1fr auto;
 }
 
@@ -269,10 +267,6 @@ footer {
 }
 
 @media screen and (orientation: portrait) {
-	.page {
-		grid-template-columns: 1fr 92% 1fr;
-	}
-
 	header {
 		text-align: center;
 	}
diff --git a/web/source/css/profile.css b/web/source/css/profile.css
index d0ab7e26d..e7a422680 100644
--- a/web/source/css/profile.css
+++ b/web/source/css/profile.css
@@ -28,22 +28,20 @@ main {
 }
 
 .profile {
-	position: relative;
 	background: $bg_accent;
 	display: grid;
-	grid-template-rows: minmax(6rem, 20%) auto auto;
-	grid-template-columns: 1fr;
-	flex-wrap: wrap;
-	justify-content: space-around;
+	grid-template-rows: auto auto auto;
+	grid-template-columns: auto;
 	gap: 0.5rem;
 	margin-bottom: 0.2rem;
-	border-radius: $br;
+	overflow-x: hidden;
 
+	border-radius: $br;
 	box-shadow: $boxshadow;
 	border: $boxshadow_border;
 
 	.headerimage {
-		height: 100%;
+		width: 100%;
 		aspect-ratio: 3 / 1;
 		overflow: hidden;
 		box-shadow: $boxshadow;
@@ -62,20 +60,20 @@ main {
 
 		display: grid;
 		grid-template-columns: 1rem auto 1fr;
-		grid-template-rows: 1fr auto auto;
+		grid-template-rows: auto auto auto;
 
 		grid-template-areas:
-			". avatar ."
+			".       avatar ."
 			"filler2 avatar displayname"
-			". avatar username";
+			".       avatar username";
 
 		#profile-basic-filler2 {
 			grid-area: filler2;
 			background: $bg_trans;
-			margin-top: 0.3rem;
 		}
 
 		.avatar {
+			align-self: end;
 			box-sizing: border-box;
 			height: 8.5rem;
 			width: 8.5rem;
@@ -104,10 +102,8 @@ main {
 		.displayname {
 			grid-area: displayname;
 			padding-right: 1rem;
-			align-self: end;
 			font-weight: bold;
 			font-size: 2rem;
-			margin-top: 0.3rem;
 			line-height: 2.2rem;
 			background: $bg_trans;
 			word-break: break-all;
@@ -117,17 +113,53 @@ main {
 		}
 
 		.username {
+			display: flex;
+			flex-wrap: wrap;
+
 			grid-area: username;
 			padding-top: 0;
 			margin-top: 0.25rem;
 			padding-bottom: 0.25rem;
 			color: $fg_accent;
 			font-weight: bold;
+			word-break: break-all;
+			text-overflow: ellipsis;
+			overflow: hidden;
+		}
+	}
+
+	@media screen and (max-width: 600px) {
+		.basic {
+			max-height: initial;
+			margin-top: -7.5vh;
+
+			display: flex;
+			flex-direction: column;
+
+			#profile-basic-filler2 {
+				display: none;
+			}
+
+			.avatar {
+				align-self: flex-start;
+				margin-left: 1rem;
+				height: 22vw;
+				width: 22vw;
+			}
+
+			.displayname {
+				padding-left: 1rem;
+				font-size: 5vw;
+				align-self: stretch;
+			}
+
+			.username {
+				padding-left: 1rem;
+			}
 		}
 	}
 
 	.detailed {
-		padding: 0 1rem;
 		display: flex;
 		flex-direction: column;
 		flex: 1 1 25em;
@@ -137,7 +169,11 @@ main {
 		}
 
 		.bio {
-			margin: 0.5rem 0;
+			margin-top: 0.5rem;
+			margin-bottom: 0.5rem;
+			margin-left: 1rem;
+			margin-right: 1rem;
+			word-break: break-word;
 
 			a {
 				color: $acc1;
diff --git a/web/source/css/status.css b/web/source/css/status.css
index b0567c7ce..4badfa33c 100644
--- a/web/source/css/status.css
+++ b/web/source/css/status.css
@@ -124,6 +124,10 @@ main {
 			color: $link_fg;
 			text-decoration: underline;
 		}
+
+		.content {
+			word-break: break-word;
+		}
 	}
 
 	.media {
diff --git a/web/template/profile.tmpl b/web/template/profile.tmpl
index 458f68f52..22f192c06 100644
--- a/web/template/profile.tmpl
+++ b/web/template/profile.tmpl
@@ -13,7 +13,7 @@
             <div id="profile-basic-filler2"></div>
             <a href="{{.account.Avatar}}" class="avatar"><img src="{{.account.Avatar}}" alt="{{if .account.DisplayName}}{{.account.DisplayName}}{{else}}{{.account.Username}}{{end}}'s avatar"></a>
             <div class="displayname">{{if .account.DisplayName}}{{.account.DisplayName}}{{else}}{{.account.Username}}{{end}}</div>
-            <div class="username">@{{.account.Username}}@{{.instance.AccountDomain}}</div>
+            <div class="username"><span>@{{.account.Username}}</span><span>@{{.instance.AccountDomain}}</span></div>
         </div>
         <div class="detailed">
             <div class="bio">