fix banner overflowing

src/components/user_card/user_card.scss

@@ -1,6 +1,7 @@
 .user-card {
   position: relative;
   z-index: 1;
+  overflow: hidden;
 
   // editing headers
   h4 {
@@ -161,9 +162,10 @@
 
 .user-info {
   position: relative;
-  margin: 0.6em;
-  margin-bottom: 0;
   text-align: left;
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
 
   .user-identity {
     position: relative;
@@ -171,7 +173,6 @@
     min-height: 6em;
     display: flex;
     align-items: flex-end;
-    margin-bottom: 1em;
     container: user-card / inline-size;
 
     > * {

src/components/user_panel/user_panel.vue

@@ -29,6 +29,8 @@
   }
 
   .user-info {
+    margin: 0.6em;
+
     .Avatar {
       width: 5em;
       width: calc(min(5em, 20cqw));

src/components/user_popover/user_popover.vue

@@ -27,7 +27,11 @@
 /* popover styles load on-demand, so we need to override */
 /* stylelint-disable block-no-empty */
 .user-popover {
-  margin-bottom: 0.6em;
+  margin: 0;
+
+  .user-info {
+    margin: 1.2em;
+  }
 
   .user-identity {
     aspect-ratio: unset;
@@ -40,7 +44,6 @@
 
   &.popover {
     overflow: hidden;
-    padding: 0.6em;
   }
 }
 /* stylelint-enable block-no-empty */

src/components/user_profile/user_profile.vue

@@ -140,6 +140,10 @@
     align-items: center;
     padding: 2em;
   }
+
+  .user-info {
+    margin: 0.6em;
+  }
 }
 
 .user-profile-placeholder {