From 50eda695ab01191d2bc0f7a668248a0440dcd65c Mon Sep 17 00:00:00 2001
From: janderedev <me@janderedev.xyz>
Date: Wed, 16 Mar 2022 20:58:48 +0100
Subject: [PATCH] make antispam rule channel list align properly

---
 .../pages/ServerDashboard/ServerDashboard.tsx | 90 ++++++++++---------
 1 file changed, 46 insertions(+), 44 deletions(-)

diff --git a/web/src/pages/ServerDashboard/ServerDashboard.tsx b/web/src/pages/ServerDashboard/ServerDashboard.tsx
index 38b63cb..14a9bc6 100644
--- a/web/src/pages/ServerDashboard/ServerDashboard.tsx
+++ b/web/src/pages/ServerDashboard/ServerDashboard.tsx
@@ -595,53 +595,55 @@ const ServerDashboard: FunctionComponent = () => {
                             If left empty, it will run in all channels.
                         </H4>
                         <UserListTypeContainer>
-                            {
-                                channels.map(cid => {
-                                    const channel: Channel = serverInfo.channels.find(c => c.id == cid && c.type == 'TEXT')
-                                        || { id: cid, name: 'Unknown channel', nsfw: false, type: 'TEXT' };
-                                    return (
-                                        <div
-                                            key={cid}
-                                            style={{
-                                                display: 'block',
-                                                margin: '4px 6px',
-                                                padding: '4px',
-                                                backgroundColor: 'var(--tertiary-background)',
-                                                borderRadius: '5px',
-                                            }}
-                                        >
-                                            <img
-                                                src={channel.icon ?? defaultChannelIcon}
+                            <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+                                {
+                                    channels.map(cid => {
+                                        const channel: Channel = serverInfo.channels.find(c => c.id == cid && c.type == 'TEXT')
+                                            || { id: cid, name: 'Unknown channel', nsfw: false, type: 'TEXT' };
+                                        return (
+                                            <div
+                                                key={cid}
                                                 style={{
-                                                    width: '32px',
-                                                    height: '32px',
-                                                    objectFit: 'cover',
-                                                    borderRadius: '10%',
-                                                    verticalAlign: 'middle',
-                                                    display: 'inline-block',
+                                                    display: 'block',
+                                                    margin: '4px 6px',
+                                                    padding: '4px',
+                                                    backgroundColor: 'var(--tertiary-background)',
+                                                    borderRadius: '5px',
                                                 }}
-                                            />
-                                            <span
-                                                style={{
-                                                    fontSize: '20px',
-                                                    verticalAlign: 'middle',
-                                                    marginLeft: '4px',
-                                                }}
-                                            >{channel.name}</span>
-                                            <RemoveButton onClick={() => {
-                                                setChannels(channels.filter(c => c != cid));
-                                                setChannelsChanged(true);
-                                            }} />
-                                        </div>
-                                    )
-                                })
-                            }
-                            <ChannelListAddField onInput={channel => {
-                                if (!channels.includes(channel.id)) {
-                                    setChannels([ ...channels, channel.id ]);
-                                    setChannelsChanged(true);
+                                            >
+                                                <img
+                                                    src={channel.icon ?? defaultChannelIcon}
+                                                    style={{
+                                                        width: '32px',
+                                                        height: '32px',
+                                                        objectFit: 'cover',
+                                                        borderRadius: '10%',
+                                                        verticalAlign: 'middle',
+                                                        display: 'inline-block',
+                                                    }}
+                                                />
+                                                <span
+                                                    style={{
+                                                        fontSize: '20px',
+                                                        verticalAlign: 'middle',
+                                                        marginLeft: '4px',
+                                                    }}
+                                                >{channel.name}</span>
+                                                <RemoveButton onClick={() => {
+                                                    setChannels(channels.filter(c => c != cid));
+                                                    setChannelsChanged(true);
+                                                }} />
+                                            </div>
+                                        )
+                                    })
                                 }
-                            }} />
+                                <ChannelListAddField onInput={channel => {
+                                    if (!channels.includes(channel.id)) {
+                                        setChannels([ ...channels, channel.id ]);
+                                        setChannelsChanged(true);
+                                    }
+                                }} />
+                            </div>
                         </UserListTypeContainer>
                     </div>
                 </span>