From 5fce83fb5126e9a76df5bbd12c03ef60d333b2a8 Mon Sep 17 00:00:00 2001
From: SergeantPanda <chester.cullen@gmail.com>
Date: Wed, 3 Dec 2025 17:13:50 -0600
Subject: [PATCH] style: Adjust table header and input components for
 consistent width

---
 .../tables/CustomTable/CustomTableHeader.jsx  |   1 +
 .../src/components/tables/StreamsTable.jsx    | 102 ++++++++++--------
 2 files changed, 56 insertions(+), 47 deletions(-)

diff --git a/frontend/src/components/tables/CustomTable/CustomTableHeader.jsx b/frontend/src/components/tables/CustomTable/CustomTableHeader.jsx
index 92643fc9..004687dd 100644
--- a/frontend/src/components/tables/CustomTable/CustomTableHeader.jsx
+++ b/frontend/src/components/tables/CustomTable/CustomTableHeader.jsx
@@ -105,6 +105,7 @@ const CustomTableHeader = ({
                     ...(header.column.columnDef.style &&
                       header.column.columnDef.style),
                     height: '100%',
+                    width: '100%',
                     paddingRight: header.column.getCanResize() ? '8px' : '0px', // Add padding for resize handle
                   }}
                 >
diff --git a/frontend/src/components/tables/StreamsTable.jsx b/frontend/src/components/tables/StreamsTable.jsx
index 3e497f99..f3f4dc20 100644
--- a/frontend/src/components/tables/StreamsTable.jsx
+++ b/frontend/src/components/tables/StreamsTable.jsx
@@ -736,7 +736,7 @@ const StreamsTable = () => {
     switch (header.id) {
       case 'name':
         return (
-          <Flex gap="sm">
+          <Flex align="center" style={{ width: '100%', flex: 1 }}>
             <TextInput
               name="name"
               placeholder="Name"
@@ -747,68 +747,76 @@ const StreamsTable = () => {
               variant="unstyled"
               className="table-input-header"
               leftSection={<Search size={14} opacity={0.5} />}
-            />
-            <Center>
-              {React.createElement(sortingIcon, {
-                onClick: () => onSortingChange('name'),
+              style={{ flex: 1, minWidth: 0 }}
+              rightSectionPointerEvents="auto"
+              rightSection={React.createElement(sortingIcon, {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onSortingChange('name');
+                },
                 size: 14,
+                style: { cursor: 'pointer' },
               })}
-            </Center>
+            />
           </Flex>
         );
 
       case 'group':
         return (
-          <Flex gap="sm" style={{ width: '100%' }}>
-            <Box style={{ flex: 1, minWidth: 0 }}>
-              <MultiSelect
-                placeholder="Group"
-                searchable
-                size="xs"
-                nothingFoundMessage="No options"
-                onClick={handleSelectClick}
-                onChange={handleGroupChange}
-                data={groupOptions}
-                variant="unstyled"
-                className="table-input-header custom-multiselect"
-                clearable
-              />
-            </Box>
-            <Center style={{ flexShrink: 0 }}>
-              {React.createElement(sortingIcon, {
-                onClick: () => onSortingChange('group'),
+          <Flex align="center" style={{ width: '100%', flex: 1 }}>
+            <MultiSelect
+              placeholder="Group"
+              searchable
+              size="xs"
+              nothingFoundMessage="No options"
+              onClick={handleSelectClick}
+              onChange={handleGroupChange}
+              data={groupOptions}
+              variant="unstyled"
+              className="table-input-header custom-multiselect"
+              clearable
+              style={{ flex: 1, minWidth: 0 }}
+              rightSectionPointerEvents="auto"
+              rightSection={React.createElement(sortingIcon, {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onSortingChange('group');
+                },
                 size: 14,
+                style: { cursor: 'pointer' },
               })}
-            </Center>
+            />
           </Flex>
         );
 
       case 'm3u':
         return (
-          <Flex gap="sm" style={{ width: '100%' }}>
-            <Box style={{ flex: 1, minWidth: 0 }}>
-              <Select
-                placeholder="M3U"
-                searchable
-                clearable
-                size="xs"
-                nothingFoundMessage="No options"
-                onClick={handleSelectClick}
-                onChange={handleM3UChange}
-                data={playlists.map((playlist) => ({
-                  label: playlist.name,
-                  value: `${playlist.id}`,
-                }))}
-                variant="unstyled"
-                className="table-input-header"
-              />
-            </Box>
-            <Center style={{ flexShrink: 0 }}>
-              {React.createElement(sortingIcon, {
-                onClick: () => onSortingChange('m3u'),
+          <Flex align="center" style={{ width: '100%', flex: 1 }}>
+            <Select
+              placeholder="M3U"
+              searchable
+              clearable
+              size="xs"
+              nothingFoundMessage="No options"
+              onClick={handleSelectClick}
+              onChange={handleM3UChange}
+              data={playlists.map((playlist) => ({
+                label: playlist.name,
+                value: `${playlist.id}`,
+              }))}
+              variant="unstyled"
+              className="table-input-header"
+              style={{ flex: 1, minWidth: 0 }}
+              rightSectionPointerEvents="auto"
+              rightSection={React.createElement(sortingIcon, {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onSortingChange('m3u');
+                },
                 size: 14,
+                style: { cursor: 'pointer' },
               })}
-            </Center>
+            />
           </Flex>
         );
     }