Improve profile header layout

app/javascript/styles/_variables.scss

@@ -58,7 +58,8 @@ $avatar-sizes: (
   "sm": 30px,
   "md": 40px,
   "lg": 80px,
-  "xl": 160px,
+  "xl": 120px,
+  "xxl": 160px,
 );
 
 $spacers: (

app/javascript/styles/components/_profile.scss

@@ -3,15 +3,35 @@
     display: block;
     width: map-get($avatar-sizes, "xl");
     height: map-get($avatar-sizes, "xl");
-    margin: -(map-get($avatar-sizes, "xl") / 2) auto 0;
+    margin: -(map-get($avatar-sizes, "xl") / 2.5) map-get($spacers, 4) 0;
     border-radius: $avatar-border-radius;
     box-shadow: $box-shadow;
+
+    @include media-breakpoint-up(sm) {
+      width: map-get($avatar-sizes, "xxl");
+      height: map-get($avatar-sizes, "xxl");
+      margin: -(map-get($avatar-sizes, "xxl") / 2) auto 0;
+    }
+  }
+
+  &__header-card {
+    margin-top: map-get($spacers, 3);
+    overflow: hidden;
+  }
+
+  &__name-container {
+    align-self: center;
+    max-width: 100%;
+    overflow: hidden;
+
+    @include media-breakpoint-up(sm) {
+      padding: map-get($spacers, 4);
+      padding-bottom: 0;
+    }
   }
 
   &__header-container {
-    margin-bottom: map-get($spacers, 3);
     position: relative;
-    z-index: -1;
     width: 100%;
     overflow: hidden;
     background: linear-gradient(
@@ -27,7 +47,6 @@
     width: 100%;
   }
 
-  &__name,
   &__biography,
   &__website,
   &__location {
@@ -42,6 +61,13 @@
   &__display-name {
     font-weight: bold;
     font-size: 1.1em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    @include media-breakpoint-up(sm) {
+      white-space: initial;
+    }
   }
 
   &__screen-name {
@@ -54,6 +80,16 @@
       color: RGB(var(--muted-text));
     }
   }
+
+  @include media-breakpoint-up(sm) {
+    &__name {
+      margin-bottom: map-get($spacers, 3);
+    }
+
+    & .card-body {
+      padding-top: 0;
+    }
+  }
 }
 
 .user--banned {

app/views/layouts/user/profile.haml

@@ -1,6 +1,7 @@
-.profile__header-container
-  %img.profile__header-image{ src: @user.profile_header.url(:web) }
 .container
+  .card.profile__header-card
+    .profile__header-container
+      %img.profile__header-image{ src: @user.profile_header.url(:web) }
   .row
     .col-md-3.col-xs-12.col-sm-4
       = render 'user/profile', user: @user

app/views/user/_profile.haml

@@ -1,12 +1,14 @@
-.card#profile
+.card.profile#profile
+  .d-flex.d-sm-block
     %img.profile__avatar{ src: user.profile_picture.url(:large) }
-  .card-body
+    .profile__name-container
       .profile__name
         - unless user.profile.display_name.blank?
           .profile__display-name
             = user.profile.display_name
         .profile__screen-name
           = user.screen_name
+  .card-body
     .profile__badge-container
       - if user.banned?
         %span.badge.badge-dark