simpligy gradient style and improve other-actions layout

src/components/user_card/user_card.scss

@@ -64,40 +64,20 @@
   }
 
   .background-image {
-    width: calc(100% + 2.4em);
+    position: absolute;
-    margin-left: -1.2em;
-    margin-right: -1.2em;
-    margin-top: -3.4em;
-    margin-bottom: -4.5em;
-    aspect-ratio: 3;
-    padding: 0;
     inset: 0;
-    mask:
+    right: -1.2em;
-      linear-gradient(to top, white 0%, transparent 20%) bottom no-repeat,
+    left: -1.2em;
-      linear-gradient(to top, white 0%, white 100%);
+    top: -1.4em;
-    // Autoprefixer seem to ignore this one, and also syntax is different
+    padding: 0;
-    /* stylelint-disable mask-composite */
+    mask: linear-gradient(to top, transparent 1em, white 5em) bottom no-repeat;
-    /* stylelint-disable declaration-property-value-no-unknown */
-    /* stylelint-disable scss/declaration-property-value-no-unknown */
-
-    /* TODO check if this is still needed */
-    mask-composite: xor;
-    /* stylelint-enable scss/declaration-property-value-no-unknown */
-    /* stylelint-enable declaration-property-value-no-unknown */
-    /* stylelint-enable mask-composite */
-    mask-composite: exclude;
     background-size: cover;
-    mask-size: 100%;
     border-top-left-radius: calc(var(--__roundnessTop, --panelRadius) - 1px);
     border-top-right-radius: calc(var(--__roundnessTop, --panelRadius) - 1px);
     border-bottom-left-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px);
     border-bottom-right-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px);
     background-color: var(--profileBg);
     z-index: -2;
-
-    &.hide-bio {
-      mask-size: 100% 40px;
-    }
   }
 
   &-bio {
@@ -152,6 +132,7 @@
   text-align: right;
 
   .user-identity {
+    aspect-ratio: 3;
     min-width: 0;
     display: flex;
     align-items: flex-end;
@@ -187,6 +168,7 @@
     grid-gap: 0.6em;
     font-size: 110%;
     z-index: 2;
+    align-self: start;
 
     a, button, div {
       text-align: center;
@@ -235,7 +217,9 @@
   }
 
   .user-summary {
-    display: block;
+    align-self: stretch;
+    display: flex;
+    flex-direction: column;
     margin-left: 0.6em;
     text-align: left;
     text-overflow: ellipsis;
@@ -255,6 +239,7 @@
 
     .top-line {
       display: flex;
+      flex: 1;
       // these two normalize position and height when custom emoji are used
       line-height: 2;
       margin-bottom: -0.2em;
@@ -289,6 +274,7 @@
   }
 
   .user-name {
+    align-self: end;
     text-overflow: ellipsis;
     overflow: hidden;
     flex: 1 1 auto;

src/components/user_card/user_card.vue

@@ -5,6 +5,50 @@
   >
     <div :class="onClose ? '' : 'panel-heading -flexible-height'" class="user-card-inner">
       <div class="user-info">
+        <div class="user-identity">
+          <div
+            :class="{ 'hide-bio': hideBio }"
+            :style="style"
+            class="background-image"
+          />
+          <a
+            v-if="avatarAction === 'zoom'"
+            class="user-info-avatar -link"
+            @click="zoomAvatar"
+          >
+            <UserAvatar :user="user" />
+            <div class="user-info-avatar -link -overlay">
+              <FAIcon
+                class="fa-scale-110 fa-old-padding"
+                icon="search-plus"
+              />
+            </div>
+          </a>
+          <UserAvatar
+            v-else-if="typeof avatarAction === 'function'"
+            class="user-info-avatar"
+            :user="user"
+            @click="avatarAction"
+          />
+          <router-link
+            v-else
+            class="user-info-avatar"
+            :to="userProfileLink(user)"
+          >
+            <UserAvatar :user="user" />
+          </router-link>
+          <div class="user-summary">
+            <div class="top-line">
+              <router-link
+                :to="userProfileLink(user)"
+                class="user-name"
+              >
+                <RichContent
+                  :title="user.name"
+                  :html="user.name"
+                  :emoji="user.emoji"
+                />
+              </router-link>
               <div class="other-actions">
                 <button
                   v-if="!isOtherUser && user.is_local"
@@ -56,50 +100,6 @@
                   />
                 </button>
               </div>
-        <div
-          :class="{ 'hide-bio': hideBio }"
-          :style="style"
-          class="background-image"
-        />
-        <div class="user-identity">
-          <a
-            v-if="avatarAction === 'zoom'"
-            class="user-info-avatar -link"
-            @click="zoomAvatar"
-          >
-            <UserAvatar :user="user" />
-            <div class="user-info-avatar -link -overlay">
-              <FAIcon
-                class="fa-scale-110 fa-old-padding"
-                icon="search-plus"
-              />
-            </div>
-          </a>
-          <UserAvatar
-            v-else-if="typeof avatarAction === 'function'"
-            class="user-info-avatar"
-            :user="user"
-            @click="avatarAction"
-          />
-          <router-link
-            v-else
-            class="user-info-avatar"
-            :to="userProfileLink(user)"
-          >
-            <UserAvatar :user="user" />
-          </router-link>
-          <div class="user-summary">
-            <div class="top-line">
-              <router-link
-                :to="userProfileLink(user)"
-                class="user-name"
-              >
-                <RichContent
-                  :title="user.name"
-                  :html="user.name"
-                  :emoji="user.emoji"
-                />
-              </router-link>
             </div>
             <div class="bottom-line">
               <div class="user-screen-name">

src/components/user_panel/user_panel.vue

@@ -28,24 +28,7 @@
     backdrop-filter: var(--backdrop-filter);
   }
 
-  .other-actions {
-    top: -0.6em;
-    right: -0.6em;
-
-    a, button, div {
-      width: 2em;
-      height: 2em;
-      line-height: 2em;
-    }
-  }
-
   .user-info {
-    margin-bottom: -1em;
-
-    .background-image {
-      max-height: 5.6em;
-      margin-bottom: -4.6em;
-    }
 
     .Avatar {
       width: 5em;

src/components/user_popover/user_popover.vue

@@ -36,11 +36,6 @@
   &.popover {
     overflow: hidden;
     padding: 0.6em;
-
-    .background-image {
-      max-height: 6em;
-      margin-bottom: -4.5em;
-    }
   }
 }
 /* stylelint-enable block-no-empty */