From edacc7efa0f8a9320da0e5b163826a02a0ba46ce Mon Sep 17 00:00:00 2001
From: thororen1234 <78185467+thororen1234@users.noreply.github.com>
Date: Sat, 15 Mar 2025 20:27:22 -0400
Subject: [PATCH] Fix WhosWatching Spacing FINALLY

---
 src/equicordplugins/whosWatching/index.tsx | 62 +++++++++++-----------
 1 file changed, 32 insertions(+), 30 deletions(-)

diff --git a/src/equicordplugins/whosWatching/index.tsx b/src/equicordplugins/whosWatching/index.tsx
index 33a13a11..07c7fe21 100644
--- a/src/equicordplugins/whosWatching/index.tsx
+++ b/src/equicordplugins/whosWatching/index.tsx
@@ -119,36 +119,38 @@ export default definePlugin({
             <>
                 <div {...props}>{props.children}</div>
                 <div className={classes(cl("spectators_panel"), Margins.top8)}>
-                    {users.length ?
-                        <>
-                            <Forms.FormTitle tag="h3" style={{ marginTop: 8, marginBottom: 0, marginLeft: 8, textTransform: "uppercase" }}>
-                                {getIntlMessage("SPECTATORS", { numViewers: userIds.length })}
-                            </Forms.FormTitle>
-                            <UserSummaryItem
-                                users={users}
-                                count={userIds.length}
-                                renderIcon={false}
-                                max={12}
-                                showDefaultAvatarsForNullUsers
-                                renderMoreUsers={renderMoreUsers}
-                                renderUser={(user: User) => (
-                                    <Clickable
-                                        className={AvatarStyles.clickableAvatar}
-                                        onClick={() => openUserProfile(user.id)}
-                                    >
-                                        <img
-                                            className={AvatarStyles.avatar}
-                                            src={user.getAvatarURL(void 0, 80, true)}
-                                            alt={user.username}
-                                            title={user.username}
-                                            style={{ marginLeft: 8 }}
-                                        />
-                                    </Clickable>
-                                )}
-                            />
-                        </>
-                        : <Forms.FormText style={{ marginLeft: 8 }}>No spectators</Forms.FormText>
-                    }
+                    <Forms.FormTitle tag="h3" style={{ marginTop: 8, marginBottom: 0, textTransform: "uppercase" }}>
+                        {getIntlMessage("SPECTATORS", { numViewers: userIds.length })}
+                    </Forms.FormTitle>
+                    <div style={{ marginLeft: 8 }}>
+                        {users.length ?
+                            <>
+                                <UserSummaryItem
+                                    users={users}
+                                    count={userIds.length}
+                                    renderIcon={false}
+                                    max={12}
+                                    showDefaultAvatarsForNullUsers
+                                    renderMoreUsers={renderMoreUsers}
+                                    renderUser={(user: User, index: number) => (
+                                        <Clickable
+                                            key={index}
+                                            className={AvatarStyles.clickableAvatar}
+                                            onClick={() => openUserProfile(user.id)}
+                                        >
+                                            <img
+                                                className={AvatarStyles.avatar}
+                                                src={user.getAvatarURL(void 0, 80, true)}
+                                                alt={user.username}
+                                                title={user.username}
+                                            />
+                                        </Clickable>
+                                    )}
+                                />
+                            </>
+                            : <Forms.FormText>No spectators</Forms.FormText>
+                        }
+                    </div>
                 </div>
             </>
         );