From 34374045a8d1e211fec0e766082c375bdbe25068 Mon Sep 17 00:00:00 2001
From: SergeantPanda <chester.cullen@gmail.com>
Date: Wed, 21 May 2025 09:02:10 -0500
Subject: [PATCH] Improved channel cards formatting for different screen
 resolutions.

---
 frontend/src/pages/Stats.jsx | 53 +++++++++++++++++++++++-------------
 1 file changed, 34 insertions(+), 19 deletions(-)

diff --git a/frontend/src/pages/Stats.jsx b/frontend/src/pages/Stats.jsx
index fc6705b0..fa3250ef 100644
--- a/frontend/src/pages/Stats.jsx
+++ b/frontend/src/pages/Stats.jsx
@@ -692,25 +692,40 @@ const ChannelsPage = () => {
   }, [channelStats, channels, channelsByUUID, streamProfiles]);
 
   return (
-    <SimpleGrid cols={3} spacing="md" style={{ padding: 10 }}>
-      {Object.keys(activeChannels).length === 0 ? (
-        <Box style={{ gridColumn: '1 / -1', textAlign: 'center', padding: '40px' }}>
-          <Text size="xl" color="dimmed">No active channels currently streaming</Text>
-        </Box>
-      ) : (
-        Object.values(activeChannels).map((channel) => (
-          <ChannelCard
-            key={channel.channel_id}
-            channel={channel}
-            clients={clients}
-            stopClient={stopClient}
-            stopChannel={stopChannel}
-            logos={logos} // Pass logos to the component
-            channelsByUUID={channelsByUUID} // Pass channelsByUUID to fix the error
-          />
-        ))
-      )}
-    </SimpleGrid>
+    <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"
+      >
+        {Object.keys(activeChannels).length === 0 ? (
+          <Box style={{ gridColumn: '1 / -1', textAlign: 'center', padding: '40px' }}>
+            <Text size="xl" color="dimmed">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>
+          ))
+        )}
+      </SimpleGrid>
+    </Box>
   );
 };