From 49f141d64af6ce274ae68e34e1ef6fb9aabc626a Mon Sep 17 00:00:00 2001
From: SergeantPanda <chester.cullen@gmail.com>
Date: Sun, 22 Jun 2025 13:21:34 -0500
Subject: [PATCH] Better calculation for number of cards per column. Fixes #218

---
 frontend/src/pages/Stats.jsx | 45 +++++++++++++++---------------------
 1 file changed, 18 insertions(+), 27 deletions(-)

diff --git a/frontend/src/pages/Stats.jsx b/frontend/src/pages/Stats.jsx
index ba9829fe..f6ec1392 100644
--- a/frontend/src/pages/Stats.jsx
+++ b/frontend/src/pages/Stats.jsx
@@ -854,18 +854,15 @@ const ChannelsPage = () => {
     }, []);
     setClients(clientStats);
   }, [channelStats, channels, channelsByUUID, streamProfiles]);
-
   return (
     <Box style={{ overflowX: 'auto' }}>
-      <SimpleGrid
-        cols={{ base: 1, sm: 1, md: 2, lg: 3, xl: 3 }}
-        spacing="md"
-        style={{ padding: 10 }}
-        breakpoints={[
-          { maxWidth: '72rem', cols: 2, spacing: 'md' },
-          { maxWidth: '48rem', cols: 1, spacing: 'md' },
-        ]}
-        verticalSpacing="lg"
+      <div
+        style={{
+          display: 'grid',
+          gap: '1rem',
+          padding: '10px',
+          gridTemplateColumns: 'repeat(auto-fit, minmax(500px, 1fr))',
+        }}
       >
         {Object.keys(activeChannels).length === 0 ? (
           <Box
@@ -879,24 +876,18 @@ const ChannelsPage = () => {
               No active channels currently streaming
             </Text>
           </Box>
-        ) : (
-          Object.values(activeChannels).map((channel) => (
-            <Box
-              key={channel.channel_id}
-              style={{ minWidth: '420px', width: '100%' }}
-            >
-              <ChannelCard
-                channel={channel}
-                clients={clients}
-                stopClient={stopClient}
-                stopChannel={stopChannel}
-                logos={logos}
-                channelsByUUID={channelsByUUID}
-              />
-            </Box>
-          ))
+        ) : (Object.values(activeChannels).map((channel) => (
+          <ChannelCard
+            key={channel.channel_id}
+            channel={channel}
+            clients={clients}
+            stopClient={stopClient}
+            stopChannel={stopChannel}
+            logos={logos}
+            channelsByUUID={channelsByUUID}
+          />))
         )}
-      </SimpleGrid>
+      </div>
     </Box>
   );
 };