misc

src/components/user_card/user_card.scss

@@ -200,7 +200,8 @@
       padding: 0.6em;
       margin: -0.6em;
 
-      &.save-profile-button {
+      &.save-profile-button,
+      &.edit-banner-button {
         width: auto;
       }
 
@@ -224,7 +225,6 @@
       inset: -0.6em;
       left: -0.6em;
       right: -1.2em;
-      background-color: rgb(0 0 0 / 30%);
       display: flex;
       justify-content: center;
       align-items: center;
@@ -234,11 +234,21 @@
 
       svg {
         color: #fff;
+        margin: 0.5em;
       }
     }
 
     &:hover &.-overlay {
       opacity: 1;
+      background-color: rgb(0 0 0 / 30%);
+    }
+  }
+
+  .user-info-avatar.-editable {
+    .-overlay {
+      opacity: 1;
+      place-items: start end;
+      justify-content: end;
     }
   }
 
@@ -455,11 +465,15 @@
   .user-profile-field-add,
   .user-profile-field {
     display: flex;
-    align-items: baseline;
+    align-items: center;
     margin: 0.25em;
     border: 1px solid var(--border);
     border-radius: var(--roundness);
     line-height: 2em;
+
+    .label {
+      margin-left: 0.5em;
+    }
   }
 
   .user-profile-field-add {
@@ -468,10 +482,14 @@
   }
 
   .user-profile-field {
+
+    /* stylelint-disable no-descending-specificity */
+    // input is a generic class
     .input {
       text-align: inherit;
       flex: 1;
     }
+    /* stylelint-enable no-descending-specificity */
 
     .delete-field {
       display: inline-block;