From cbde9297ea47b64709007b376bf534a57ff45669 Mon Sep 17 00:00:00 2001
From: Jeffrey C <990135+JeffreyBytes@users.noreply.github.com>
Date: Mon, 12 Jan 2026 12:03:14 -0600
Subject: [PATCH] Fix StreamsTable Group column header overflow and align with
 ChannelsTable

The Group column header was overflowing vertically when multiple groups were selected in the MultiSelect filter. Initial attempts to preserve sorting functionality while fixing the overflow were unsuccessful due to how Mantine's MultiSelect rightSection positioning works.

Final solution removes the sorting icon from the Group column to match ChannelsTable's implementation, where channel_group also uses a MultiSelect filter without sorting. This allows the header to properly expand vertically to accommodate selected filter values without overflow.

Resolves #613
---
 .../src/components/tables/StreamsTable.jsx    | 36 +++++++------------
 1 file changed, 12 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/tables/StreamsTable.jsx b/frontend/src/components/tables/StreamsTable.jsx
index 8c931a65..25b7e330 100644
--- a/frontend/src/components/tables/StreamsTable.jsx
+++ b/frontend/src/components/tables/StreamsTable.jsx
@@ -856,30 +856,18 @@ const StreamsTable = ({ onReady }) => {
 
       case 'group':
         return (
-          <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' },
-              })}
-            />
-          </Flex>
+          <MultiSelect
+            placeholder="Group"
+            className="table-input-header"
+            variant="unstyled"
+            data={groupOptions}
+            size="xs"
+            searchable
+            clearable
+            onClick={handleSelectClick}
+            onChange={handleGroupChange}
+            style={{ width: '100%' }}
+          />
         );
 
       case 'm3u':