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
This commit is contained in:
Jeffrey C 2026-01-12 12:03:14 -06:00
parent 6a8a94101a
commit cbde9297ea
No known key found for this signature in database
GPG key ID: A68C7782CDAC89E3

View file

@ -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':