From 457b80ece6f3350603011fc6732b127b1c8a99c3 Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Thu, 6 Nov 2025 12:13:25 -0500
Subject: [PATCH] user_groups: Prepare properly sized group icon.

This removes kludgy font-size adjustments on the group
icon, whose path was previously smaller than the 16x16
viewbox.

By adjusting the icon to take up the full width, it is
no longer necessary to fiddle with the icon's size, in
keeping with the app-wide move to 16x16 icons.

That simplifies some headache-inducing sizing and
calculations on the typeahead as well.
---
 web/shared/icons/user-group.svg |  5 +++--
 web/styles/input_pill.css       |  9 ++++++++-
 web/styles/typeahead.css        | 31 +++++++++++++------------------
 3 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/web/shared/icons/user-group.svg b/web/shared/icons/user-group.svg
index 09a3dc56d2..c6d3e493aa 100644
--- a/web/shared/icons/user-group.svg
+++ b/web/shared/icons/user-group.svg
@@ -1,3 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path d="M10 1.335a3.332 3.332 0 1 1 0 6.663 3.332 3.332 0 0 1 0-6.663Zm2.002 3.332a2.002 2.002 0 1 0-4.004 0 2.002 2.002 0 0 0 4.004 0ZM12 9.335a3.332 3.332 0 0 1 3.332 3.332V14a.665.665 0 0 1-1.33 0v-1.333A2.002 2.002 0 0 0 12 10.665H8a2.002 2.002 0 0 0-2.002 2.002V14a.665.665 0 0 1-1.33 0v-1.333A3.332 3.332 0 0 1 8 9.335h4Zm-8.023.585a.665.665 0 0 1-.477.81 2.002 2.002 0 0 0-1.502 1.937V14a.665.665 0 1 1-1.33 0v-1.334a3.332 3.332 0 0 1 2.5-3.223.665.665 0 0 1 .81.477Zm1.191-8.478a.665.665 0 1 1 .33 1.289 2.002 2.002 0 0 0 0 3.878.665.665 0 0 1-.33 1.288 3.332 3.332 0 0 1 0-6.455Z"/>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path
+     d="m 10.182226,0.72803666 a 3.6355726,3.6355726 0 1 1 0,7.27005394 3.6355726,3.6355726 0 0 1 0,-7.27005394 z m 2.184399,3.63557244 a 2.1843994,2.1843994 0 1 0 -4.3687987,0 2.1843994,2.1843994 0 0 0 4.3687987,0 z m -0.0022,5.0932932 a 3.6355726,3.6355726 0 0 1 3.635572,3.6355717 v 1.454448 a 0.725587,0.725587 0 0 1 -1.451174,0 V 13.092474 A 2.1843987,2.1843987 0 0 0 12.364442,10.908076 H 8.0000085 a 2.1843987,2.1843987 0 0 0 -2.1843986,2.184398 v 1.454448 a 0.725587,0.725587 0 0 1 -1.451174,0 V 13.092474 A 3.6355726,3.6355726 0 0 1 8.0000085,9.4569023 Z M 3.6104801,10.095201 A 0.72558695,0.72558695 0 0 1 3.0900216,10.978998 2.1843987,2.1843987 0 0 0 1.451177,13.092474 v 1.454448 a 0.725587,0.725587 0 1 1 -1.451174,0 V 13.091383 A 3.6355726,3.6355726 0 0 1 2.7277736,9.5747419 0.72558695,0.72558695 0 0 1 3.6115712,10.095201 Z M 4.90999,0.84478524 a 0.72589886,0.72589886 0 1 1 0.3600658,1.40643846 2.1843987,2.1843987 0 0 0 0,4.2313176 0.72558695,0.72558695 0 0 1 -0.3600658,1.4053474 3.6355726,3.6355726 0 0 1 0,-7.04310346 z"/>
 </svg>
diff --git a/web/styles/input_pill.css b/web/styles/input_pill.css
index f66c31c3e9..babea30558 100644
--- a/web/styles/input_pill.css
+++ b/web/styles/input_pill.css
@@ -385,7 +385,14 @@
 }
 
 .display_only_group_pill .zulip-icon-user-group {
-    font-size: 1.3571em; /* 19px at 14px / em */
+    /* Reserve the same square box for the user-group
+       icon as on pill images. */
+    height: var(--height-input-pill);
+    width: var(--height-input-pill);
+    /* Center the icon in the box using flex. */
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 @keyframes shake {
diff --git a/web/styles/typeahead.css b/web/styles/typeahead.css
index de401d6677..68cd2adb2e 100644
--- a/web/styles/typeahead.css
+++ b/web/styles/typeahead.css
@@ -195,27 +195,22 @@
 
 /* For FontAwesome icons and zulip icons used in place of images for some users. */
 .typeahead-image {
-    font-size: 1.3571em; /* 19px at 14px em */
-    display: inline-block;
-    height: 1.1052em; /* 21px at 19px/1em */
-    width: 1.1052em; /* 21px at 19px/1em */
+    flex: 0 0 auto;
+    height: 1.3125em; /* 21px at 16px/1em */
+    width: 1.3125em; /* 21px at 16px/1em */
     border-radius: 4px;
 
-    text-align: center;
-
-    &.zulip-icon-user-group {
-        font-size: 1.3571em; /* 19px at 14px em */
-    }
-
     &.no-presence-circle {
-        /* 0.6875 * var(--base-font-size) is the width of presence
-        circle, no margin (-2px left margin + 2px right margin = 0px)
-        of the presence circle and 0.3571 * var(--base-font-size-px)
-        is gap between the presence circle and avatar.
-        Cannot directly use 0.6875em or 0.3571em
-        since font-size for user group icon is different from the
-        font size used to calculate presence circle width and gap. */
-        margin-left: calc((0.6875 + 0.3571) * var(--base-font-size-px));
+        /* 0.6875em at 16px/1em is the width of presence circle,
+           no margin (-2px left margin + 2px right margin = 0px),
+           and 0.3571  is the gap between the presence circle and
+           image avatars. */
+        margin-left: calc(0.6875em + 0.3571em);
+        /* To properly align icons within the 21px square box
+           defined on .typeahead-image, we establish a flexbox: */
+        display: flex;
+        align-items: center;
+        justify-content: center;
     }
 }