From 4f1fb0f6971e3cd2ea679a58ff1e8bea88f29198 Mon Sep 17 00:00:00 2001
From: Eekle <96976531+Eekle@users.noreply.github.com>
Date: Fri, 10 Jun 2022 12:06:34 +0100
Subject: [PATCH] Make user profile image show full image on mobile (#19840)

* Make user profile image show full image on mobile
---
 templates/user/profile.tmpl |  6 ++++--
 web_src/less/_user.less     | 15 ++++-----------
 2 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/templates/user/profile.tmpl b/templates/user/profile.tmpl
index abcc227bec..8f67f1cee1 100644
--- a/templates/user/profile.tmpl
+++ b/templates/user/profile.tmpl
@@ -4,15 +4,17 @@
 		<div class="ui stackable grid">
 			<div class="ui five wide column">
 				<div class="ui card">
+					<div id="profile-avatar" class="content df"/>
 					{{if eq .SignedUserName .Owner.Name}}
-						<a class="image tooltip" href="{{AppSubUrl}}/user/settings" id="profile-avatar" data-content="{{.i18n.Tr "user.change_avatar"}}" data-position="bottom center">
+						<a class="image tooltip" href="{{AppSubUrl}}/user/settings" data-content="{{.i18n.Tr "user.change_avatar"}}" data-position="bottom center">
 							{{avatar .Owner 290}}
 						</a>
 					{{else}}
-						<span class="image" id="profile-avatar">
+						<span class="image">
 							{{avatar .Owner 290}}
 						</span>
 					{{end}}
+					</div>
 					<div class="content word-break profile-avatar-name">
 						{{if .Owner.FullName}}<span class="header text center">{{.Owner.FullName}}</span>{{end}}
 						<span class="username text center">{{.Owner.Name}}</span>
diff --git a/web_src/less/_user.less b/web_src/less/_user.less
index e192986819..4576d1c9e7 100644
--- a/web_src/less/_user.less
+++ b/web_src/less/_user.less
@@ -44,27 +44,20 @@
           }
         }
       }
-
       #profile-avatar {
         background: none;
         padding: 1rem 1rem .25rem;
-
+        justify-content: center;
         img {
           width: 100%;
           height: auto;
           object-fit: contain;
           margin: 0;
-        }
-
-        @media @mediaSm {
-          height: 250px;
-          overflow: hidden;
-
-          img {
-            max-height: 767px;
-            max-width: 767px;
+          @media @mediaSm {
+            width: 30vw;
           }
         }
+
       }
 
       @media @mediaSm {