From cc41731ae1a9e1c3cc41ad42e6371d277470f323 Mon Sep 17 00:00:00 2001
From: SergeantPanda <chester.cullen@gmail.com>
Date: Mon, 23 Jun 2025 19:23:16 -0500
Subject: [PATCH 1/3] Minimum widths set

---
 frontend/src/components/tables/ChannelsTable.jsx |  4 ++--
 frontend/src/components/tables/StreamsTable.jsx  | 14 +++++++-------
 frontend/src/pages/Channels.jsx                  | 14 +++++++++-----
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/tables/ChannelsTable.jsx b/frontend/src/components/tables/ChannelsTable.jsx
index 21a04bcb..352b379c 100644
--- a/frontend/src/components/tables/ChannelsTable.jsx
+++ b/frontend/src/components/tables/ChannelsTable.jsx
@@ -1096,7 +1096,7 @@ const ChannelsTable = ({ }) => {
           style={{
             display: 'flex',
             flexDirection: 'column',
-            height: 'calc(100vh - 58px)',
+            height: 'calc(100vh - 100px)',
             backgroundColor: '#27272A',
           }}
         >
@@ -1119,7 +1119,7 @@ const ChannelsTable = ({ }) => {
               style={{
                 display: 'flex',
                 flexDirection: 'column',
-                height: 'calc(100vh - 110px)',
+                height: 'calc(100vh - 152px)',
               }}
             >
               <Box
diff --git a/frontend/src/components/tables/StreamsTable.jsx b/frontend/src/components/tables/StreamsTable.jsx
index 73fee4c7..1549c52b 100644
--- a/frontend/src/components/tables/StreamsTable.jsx
+++ b/frontend/src/components/tables/StreamsTable.jsx
@@ -170,7 +170,7 @@ const StreamRowActions = ({
   );
 };
 
-const StreamsTable = ({}) => {
+const StreamsTable = ({ }) => {
   const theme = useMantineTheme();
 
   /**
@@ -653,7 +653,7 @@ const StreamsTable = ({}) => {
 
       <Paper
         style={{
-          height: 'calc(100vh - 75px)',
+          height: 'calc(100vh - 100px)',
           backgroundColor: '#27272A',
         }}
       >
@@ -678,10 +678,10 @@ const StreamsTable = ({}) => {
               style={
                 selectedStreamIds.length > 0 && selectedChannelIds.length === 1
                   ? {
-                      borderWidth: '1px',
-                      borderColor: theme.tailwind.green[5],
-                      color: 'white',
-                    }
+                    borderWidth: '1px',
+                    borderColor: theme.tailwind.green[5],
+                    color: 'white',
+                  }
                   : undefined
               }
               disabled={
@@ -801,7 +801,7 @@ const StreamsTable = ({}) => {
             style={{
               display: 'flex',
               flexDirection: 'column',
-              height: 'calc(100vh - 110px)',
+              height: 'calc(100vh - 152px)',
             }}
           >
             <Box
diff --git a/frontend/src/pages/Channels.jsx b/frontend/src/pages/Channels.jsx
index fe15e713..ca7a67c3 100644
--- a/frontend/src/pages/Channels.jsx
+++ b/frontend/src/pages/Channels.jsx
@@ -20,19 +20,23 @@ const ChannelsPage = () => {
       </Box>
     );
   }
-
   return (
     <div style={{ height: '100vh', width: '100%', display: 'flex' }}>
       <Allotment
         defaultSizes={[50, 50]}
         style={{ height: '100%', width: '100%' }}
         className="custom-allotment"
+        minSize={300}
       >
-        <div style={{ padding: 10 }}>
-          <ChannelsTable />
+        <div style={{ padding: 10, overflowX: 'auto', minWidth: '300px' }}>
+          <div style={{ minWidth: '600px' }}>
+            <ChannelsTable />
+          </div>
         </div>
-        <div style={{ padding: 10 }}>
-          <StreamsTable />
+        <div style={{ padding: 10, overflowX: 'auto', minWidth: '300px' }}>
+          <div style={{ minWidth: '600px' }}>
+            <StreamsTable />
+          </div>
         </div>
       </Allotment>
     </div>

From 587ab4afe0fbe1617da4a14e4dc4fa896d1eea0e Mon Sep 17 00:00:00 2001
From: SergeantPanda <chester.cullen@gmail.com>
Date: Tue, 24 Jun 2025 17:56:05 -0500
Subject: [PATCH 2/3] Gets rid of unneccessary blank space at the bottom.

---
 frontend/src/components/tables/ChannelsTable.jsx | 4 ++--
 frontend/src/components/tables/StreamsTable.jsx  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/tables/ChannelsTable.jsx b/frontend/src/components/tables/ChannelsTable.jsx
index 352b379c..3813916c 100644
--- a/frontend/src/components/tables/ChannelsTable.jsx
+++ b/frontend/src/components/tables/ChannelsTable.jsx
@@ -1096,7 +1096,7 @@ const ChannelsTable = ({ }) => {
           style={{
             display: 'flex',
             flexDirection: 'column',
-            height: 'calc(100vh - 100px)',
+            height: 'calc(100vh - 60px)',
             backgroundColor: '#27272A',
           }}
         >
@@ -1119,7 +1119,7 @@ const ChannelsTable = ({ }) => {
               style={{
                 display: 'flex',
                 flexDirection: 'column',
-                height: 'calc(100vh - 152px)',
+                height: 'calc(100vh - 100px)',
               }}
             >
               <Box
diff --git a/frontend/src/components/tables/StreamsTable.jsx b/frontend/src/components/tables/StreamsTable.jsx
index 1549c52b..64f9bbef 100644
--- a/frontend/src/components/tables/StreamsTable.jsx
+++ b/frontend/src/components/tables/StreamsTable.jsx
@@ -653,7 +653,7 @@ const StreamsTable = ({ }) => {
 
       <Paper
         style={{
-          height: 'calc(100vh - 100px)',
+          height: 'calc(100vh - 60px)',
           backgroundColor: '#27272A',
         }}
       >
@@ -801,7 +801,7 @@ const StreamsTable = ({ }) => {
             style={{
               display: 'flex',
               flexDirection: 'column',
-              height: 'calc(100vh - 152px)',
+              height: 'calc(100vh - 100px)',
             }}
           >
             <Box

From a307c63b0b8e3e373a0331ae6a6158e762cb90fa Mon Sep 17 00:00:00 2001
From: SergeantPanda <chester.cullen@gmail.com>
Date: Tue, 24 Jun 2025 18:13:13 -0500
Subject: [PATCH 3/3] Better sizes for mobile

---
 frontend/src/pages/Channels.jsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/Channels.jsx b/frontend/src/pages/Channels.jsx
index ca7a67c3..93300f1b 100644
--- a/frontend/src/pages/Channels.jsx
+++ b/frontend/src/pages/Channels.jsx
@@ -12,7 +12,6 @@ const ChannelsPage = () => {
   if (!authUser.id) {
     return <></>;
   }
-
   if (authUser.user_level <= USER_LEVELS.STANDARD) {
     return (
       <Box style={{ padding: 10 }}>
@@ -20,20 +19,21 @@ const ChannelsPage = () => {
       </Box>
     );
   }
+
   return (
-    <div style={{ height: '100vh', width: '100%', display: 'flex' }}>
+    <div style={{ height: '100vh', width: '100%', display: 'flex', overflowX: 'auto' }}>
       <Allotment
         defaultSizes={[50, 50]}
-        style={{ height: '100%', width: '100%' }}
+        style={{ height: '100%', width: '100%', minWidth: '600px' }}
         className="custom-allotment"
-        minSize={300}
+        minSize={100}
       >
-        <div style={{ padding: 10, overflowX: 'auto', minWidth: '300px' }}>
+        <div style={{ padding: 10, overflowX: 'auto', minWidth: '100px' }}>
           <div style={{ minWidth: '600px' }}>
             <ChannelsTable />
           </div>
         </div>
-        <div style={{ padding: 10, overflowX: 'auto', minWidth: '300px' }}>
+        <div style={{ padding: 10, overflowX: 'auto', minWidth: '100px' }}>
           <div style={{ minWidth: '600px' }}>
             <StreamsTable />
           </div>