fix(guild): fit text icon initials to the icon by measured width (#3310)

fluxer_app/src/features/guild/components/popouts/GuildIcon.tsx

@@ -3,7 +3,11 @@
 import {useHover} from '@app/features/app/hooks/useHover';
 import {useShouldAnimate} from '@app/features/app/hooks/useShouldAnimate';
 import styles from '@app/features/guild/components/popouts/GuildIcon.module.css';
-import {getGuildIconDisplayInitials, getInitialsLength} from '@app/features/guild/utils/GuildInitialsUtils';
+import {
+	getGuildIconDisplayInitials,
+	getGuildInitialsFitStyle,
+	getInitialsLength,
+} from '@app/features/guild/utils/GuildInitialsUtils';
 import {useRecoveringBackgroundImageURL} from '@app/features/messaging/hooks/useImageRecovery';
 import * as ImageCacheUtils from '@app/features/messaging/utils/ImageCacheUtils';
 import {remFromPx} from '@app/features/theme/layout/RemFromPx';
@@ -39,9 +43,8 @@ export const GuildIcon = observer(function GuildIcon({
 	sizePx,
 	containerProps,
 }: GuildIconProps) {
-	const rawInitials = useMemo(() => StringUtils.getInitialsFromName(name), [name]);
-	const initials = useMemo(() => getGuildIconDisplayInitials(rawInitials), [rawInitials]);
-	const initialsLength = useMemo(() => getInitialsLength(rawInitials), [rawInitials]);
+	const initials = useMemo(() => getGuildIconDisplayInitials(StringUtils.getInitialsFromName(name)), [name]);
+	const initialsLength = getInitialsLength(initials);
 	const [hoverRef, isHovering] = useHover();
 	const iconUrl = icon ? AvatarUtils.getGuildIconURL({id, icon}) : null;
 	const hoverIconUrl = icon ? AvatarUtils.getGuildIconURL({id, icon}, true) : null;
@@ -73,7 +76,11 @@ export const GuildIcon = observer(function GuildIcon({
 			style={styleVars}
 		>
 			{paintedUrl == null && (
-				<span className={styles.initials} data-flx="guild.guild-icon.initials">
+				<span
+					className={styles.initials}
+					style={getGuildInitialsFitStyle(initials)}
+					data-flx="guild.guild-icon.initials"
+				>
 					{initials}
 				</span>
 			)}