fixed channel stream tables for now, updated their styling

frontend/src/App.jsx

@@ -21,6 +21,7 @@ import { Box, AppShell, MantineProvider } from '@mantine/core';
 import '@mantine/core/styles.css'; // Ensure Mantine global styles load
 import '@mantine/notifications/styles.css';
 import 'mantine-react-table/styles.css';
+import './index.css';
 import mantineTheme from './mantineTheme';
 import API from './api';
 import { Notifications } from '@mantine/notifications';

frontend/src/components/tables/ChannelsTable.jsx

@@ -69,17 +69,46 @@ const ChannelStreams = ({ channel, isExpanded }) => {
     columns: useMemo(
       () => [
         {
+          size: 400,
           header: 'Name',
           accessorKey: 'name',
+          Cell: ({ cell }) => (
+            <div
+              style={{
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+              }}
+            >
+              {cell.getValue()}
+            </div>
+          ),
         },
         {
+          size: 100,
           header: 'M3U',
           accessorFn: (row) =>
             playlists.find((playlist) => playlist.id === row.m3u_account)?.name,
+          Cell: ({ cell }) => (
+            <div
+              style={{
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+              }}
+            >
+              {cell.getValue()}
+            </div>
+          ),
         },
       ],
       [playlists]
     ),
+    displayColumnDefOptions: {
+      'mrt-row-actions': {
+        size: 10,
+      },
+    },
     enableKeyboardShortcuts: false,
     enableColumnFilters: false,
     enableBottomToolbar: false,
@@ -94,6 +123,18 @@ const ChannelStreams = ({ channel, isExpanded }) => {
     },
     enableRowActions: true,
     enableRowOrdering: true,
+    mantineTableHeadRowProps: {
+      style: { display: 'none' },
+    },
+    mantineTableBodyCellProps: {
+      style: {
+        // py: 0,
+        padding: 4,
+        borderColor: '#444',
+        color: '#E0E0E0',
+        fontSize: '0.85rem',
+      },
+    },
     mantineRowDragHandleProps: ({ table }) => ({
       onDragEnd: async () => {
         const { draggingRow, hoveredRow } = table.getState();
@@ -132,7 +173,11 @@ const ChannelStreams = ({ channel, isExpanded }) => {
     return <></>;
   }
 
-  return <MantineReactTable table={channelStreamsTable} />;
+  return (
+    <Box style={{ width: '100%' }}>
+      <MantineReactTable table={channelStreamsTable} />
+    </Box>
+  );
 };
 
 const m3uUrl = `${window.location.protocol}//${window.location.host}/output/m3u`;

frontend/src/helpers/table.jsx

@@ -25,9 +25,8 @@ export default {
     mantineSelectCheckboxProps: {
       size: 'xs',
     },
-    mantineTableBodyRowProps: ({ isDetailPane, row }) => {
-      if (isDetailPane) {
-        console.log('here');
+    mantineTableBodyRowProps: ({ isDetailPanel, row }) => {
+      if (isDetailPanel && row.getIsSelected()) {
         return {
           style: {
             backgroundColor: '#163632',

frontend/src/index.css

@@ -29,3 +29,7 @@ code {
 ::-webkit-scrollbar-thumb:hover {
   background: #777;
 }
+
+table.mrt-table tr.mantine-Table-tr.mantine-Table-tr-detail-panel td.mantine-Table-td-detail-panel {
+  width: 100% !important;
+}