fix overflows and small screens

src/components/user_card/user_card.scss

@@ -67,7 +67,7 @@
     width: calc(100% + 2.4em);
     margin-left: -1.2em;
     margin-right: -1.2em;
-    margin-top: -1.2em;
+    margin-top: -3.2em;
     margin-bottom: -4.5em;
     aspect-ratio: 3;
     padding: 0;
@@ -149,6 +149,7 @@
   position: relative;
   margin: 0.6em;
   margin-bottom: 0;
+  text-align: right;
 
   .user-identity {
     min-width: 0;
@@ -180,13 +181,12 @@
   }
 
   .other-actions {
-    position: absolute;
-    top: 0;
-    right: 0;
-    display: grid;
+    position: relative;
+    display: inline-grid;
     grid-auto-flow: column;
     grid-gap: 0.6em;
     font-size: 110%;
+    z-index: 2;
 
     a, button, div {
       text-align: center;
@@ -350,8 +350,9 @@
   .user-interactions {
     position: relative;
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(17%, min-content));
+    grid-template-columns: repeat(auto-fit, minmax(7.5em, 20%));
     grid-gap: 0.6em;
+    max-width: 98vw;
 
     .popover-trigger-button, .moderation-tools-button {
       width: 100%;

src/components/user_card/user_card.vue

@@ -5,11 +5,6 @@
   >
     <div :class="onClose ? '' : 'panel-heading -flexible-height'" class="user-card-inner">
       <div class="user-info">
-        <div
-          :class="{ 'hide-bio': hideBio }"
-          :style="style"
-          class="background-image"
-        />
         <div class="other-actions">
           <button
             v-if="!isOtherUser && user.is_local"
@@ -61,6 +56,11 @@
             />
           </button>
         </div>
+        <div
+          :class="{ 'hide-bio': hideBio }"
+          :style="style"
+          class="background-image"
+        />
         <div class="user-identity">
           <a
             v-if="avatarAction === 'zoom'"
@@ -106,7 +106,7 @@
                 class="user-screen-name"
                 :user="user"
               />
-              <template v-if="!hideBio">
+              <div class="tags" v-if="!hideBio">
                 <span
                   v-if="user.deactivated"
                   class="alert neutral user-role"
@@ -131,7 +131,7 @@
                 >
                   {{ $t('user_card.group') }}
                 </span>
-              </template>
+              </div>
               <span v-if="user.locked">
                 <FAIcon
                   class="lock-icon"

src/components/user_popover/user_popover.vue

@@ -37,10 +37,6 @@
     overflow: hidden;
     padding: 0.6em;
 
-    .user-info {
-      width: 30em;
-    }
-
     .background-image {
       max-height: 6em;
       margin-bottom: -4.5em;