Mirrors/Dispatcharr
1
0
Fork 1
mirror of https://github.com/Dispatcharr/Dispatcharr.git synced 2026-01-23 10:45:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

style: Adjust table header and input components for consistent width

Browse source
This commit is contained in:
SergeantPanda 2025-12-03 17:13:50 -06:00
parent 81b6570366
commit 5fce83fb51
2 changed files with 56 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

1
frontend/src/components/tables/CustomTable/CustomTableHeader.jsx
View file

@ -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
}}
>

102
frontend/src/components/tables/StreamsTable.jsx
View file

@ -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>
);
}