A11Y: usercard resizing for high zoom levels (#27846)

app/assets/stylesheets/common/components/user-card.scss

@@ -1,5 +1,13 @@
 @use "sass:math";
 
+.fk-d-menu[data-identifier="card"] {
+  max-width: calc(100vw - 2em);
+  width: auto;
+  .fk-d-menu__inner-content {
+    min-width: 0;
+  }
+}
+
 .user-card {
   --card-width: 39em;
   --avatar-width: 8em;

app/assets/stylesheets/desktop/components/user-card.scss

@@ -24,6 +24,33 @@
   h3 {
     font-size: var(--font-0);
   }
+
+  @include breakpoint("mobile-extra-large") {
+    // important for keeping the usercard uncropped
+    // at 200% - 400% zoom levels
+    --avatar-width: 4em;
+    --avatar-margin: 0;
+    .names h1 {
+      font-size: var(--font-up-2);
+    }
+    .first-row {
+      gap: 0.5em 0;
+      flex-wrap: wrap;
+      .usercard-controls {
+        max-width: unset;
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0 0.5em;
+      }
+      li {
+        flex: 1 1 0;
+        &:empty {
+          display: none;
+        }
+      }
+    }
+  }
 }
 
 // styles for user cards only

plugins/chat/assets/stylesheets/desktop/base-desktop.scss

@@ -1,9 +1,5 @@
 .fk-d-menu[data-identifier="card"] {
   z-index: z("usercard");
-  max-width: calc(100vw - 2em);
-  .fk-d-menu__inner-content {
-    min-width: 0;
-  }
 }
 
 .full-page-chat {