From dcaa2cf07b23267a4098dd896b4c033edc240025 Mon Sep 17 00:00:00 2001
From: Dries Cruyskens <dries.cruyskens@gmail.com>
Date: Tue, 23 Jun 2020 17:22:44 +0200
Subject: [PATCH] A profile header now has a max height of 250px (instead of
 fixed) and shrinks vertically when the profile picture is not tall enough to
 fill 250px. Changed css class to be more specific.

---
 .../generic/UserProfileHeader/UserProfileHeader.vue    | 10 ++++------
 webapp/pages/profile/_id/_slug.vue                     |  6 +++---
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/webapp/components/_new/generic/UserProfileHeader/UserProfileHeader.vue b/webapp/components/_new/generic/UserProfileHeader/UserProfileHeader.vue
index e6f8be41f..b352da0a2 100644
--- a/webapp/components/_new/generic/UserProfileHeader/UserProfileHeader.vue
+++ b/webapp/components/_new/generic/UserProfileHeader/UserProfileHeader.vue
@@ -123,15 +123,10 @@ export default {
 <style lang="scss">
 .profile-header {
   height: 100%;
-  position: relative;
   background-color: DarkGrey; /* Fallback color */
 }
 
 .profile-header-image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
   width: 100%;
 }
 
@@ -169,7 +164,10 @@ export default {
 
 .profileHeader-attachments-upload-area {
   height: 100%;
-  position: relative;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index c292f7315..9e72bfe03 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -2,7 +2,7 @@
   <div>
     <ds-flex v-if="user" :width="{ base: '100%' }" gutter="base">
       <ds-flex-item width="100%">
-        <base-card class="profile-header">
+        <base-card class="profile-header-card">
           <user-profile-header :user="user" :editable="myProfile"></user-profile-header>
         </base-card>
       </ds-flex-item>
@@ -550,8 +550,8 @@ export default {
   }
 }
 
-.profile-header {
+.profile-header-card {
   padding: 0px; /* Overwrite default card padding to 0. */
-  height: 250px;
+  max-height: 250px;
 }
 </style>