From c780e764d06f5e8dbe81d47ff7bf345136ca6777 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Wed, 10 Jul 2024 14:51:56 -0400
Subject: [PATCH] A11Y: usercard resizing for high zoom levels (#27846)

---
 .../common/components/user-card.scss          |  8 ++++++
 .../desktop/components/user-card.scss         | 27 +++++++++++++++++++
 .../stylesheets/desktop/base-desktop.scss     |  4 ---
 3 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/common/components/user-card.scss b/app/assets/stylesheets/common/components/user-card.scss
index 5018bb13153..fd4a843fcc2 100644
--- a/app/assets/stylesheets/common/components/user-card.scss
+++ b/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;
diff --git a/app/assets/stylesheets/desktop/components/user-card.scss b/app/assets/stylesheets/desktop/components/user-card.scss
index fca587b11bb..8415e09055e 100644
--- a/app/assets/stylesheets/desktop/components/user-card.scss
+++ b/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
diff --git a/plugins/chat/assets/stylesheets/desktop/base-desktop.scss b/plugins/chat/assets/stylesheets/desktop/base-desktop.scss
index ba17345c09d..bea4f86e45f 100644
--- a/plugins/chat/assets/stylesheets/desktop/base-desktop.scss
+++ b/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 {