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,63 +5,12 @@
   >
     <div :class="onClose ? '' : 'panel-heading -flexible-height'" class="user-card-inner">
       <div class="user-info">
-        <div class="other-actions">
-          <button
-            v-if="!isOtherUser && user.is_local"
-            class="button-unstyled edit-profile-button"
-            @click.stop="openProfileTab"
-          >
-            <FAIcon
-              fixed-width
-              class="icon"
-              icon="edit"
-              :title="$t('user_card.edit_profile')"
-            />
-          </button>
-          <a
-            v-if="isOtherUser && !user.is_local"
-            :href="user.statusnet_profile_url"
-            target="_blank"
-            class="button-unstyled external-link-button"
-          >
-            <FAIcon
-              class="icon"
-              icon="external-link-alt"
-            />
-          </a>
-          <AccountActions
-            v-if="isOtherUser && loggedIn"
-            :user="user"
-            :relationship="relationship"
-          />
-          <router-link
-            v-if="onClose"
-            :to="userProfileLink(user)"
-            class="button-unstyled external-link-button"
-            @click="onClose"
-          >
-            <FAIcon
-              class="icon"
-              icon="expand-alt"
-            />
-          </router-link>
-          <button
-            v-if="onClose"
-            class="button-unstyled external-link-button"
-            @click="onClose"
-          >
-            <FAIcon
-              class="icon"
-              icon="times"
-            />
-          </button>
-        </div>
-        <div
-          :class="{ 'hide-bio': hideBio }"
-          :style="style"
-          class="background-image"
-        />
         <div class="user-identity">
+          <div
+            :class="{ 'hide-bio': hideBio }"
+            :style="style"
+            class="background-image"
+          />
           <a
             v-if="avatarAction === 'zoom'"
             class="user-info-avatar -link"
@@ -100,6 +49,57 @@
                   :emoji="user.emoji"
                 />
               </router-link>
+              <div class="other-actions">
+                <button
+                  v-if="!isOtherUser && user.is_local"
+                  class="button-unstyled edit-profile-button"
+                  @click.stop="openProfileTab"
+                >
+                  <FAIcon
+                    fixed-width
+                    class="icon"
+                    icon="edit"
+                    :title="$t('user_card.edit_profile')"
+                  />
+                </button>
+                <a
+                  v-if="isOtherUser && !user.is_local"
+                  :href="user.statusnet_profile_url"
+                  target="_blank"
+                  class="button-unstyled external-link-button"
+                >
+                  <FAIcon
+                    class="icon"
+                    icon="external-link-alt"
+                  />
+                </a>
+                <AccountActions
+                  v-if="isOtherUser && loggedIn"
+                  :user="user"
+                  :relationship="relationship"
+                />
+                <router-link
+                  v-if="onClose"
+                  :to="userProfileLink(user)"
+                  class="button-unstyled external-link-button"
+                  @click="onClose"
+                >
+                  <FAIcon
+                    class="icon"
+                    icon="expand-alt"
+                  />
+                </router-link>
+                <button
+                  v-if="onClose"
+                  class="button-unstyled external-link-button"
+                  @click="onClose"
+                >
+                  <FAIcon
+                    class="icon"
+                    icon="times"
+                  />
+                </button>
+              </div>
             </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 */