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: [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/template/profile.tmpl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'web/template/profile.tmpl')

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">
-- 
cgit v1.3