Mirrors/Dispatcharr
1
0
Fork 1
mirror of https://github.com/Dispatcharr/Dispatcharr.git synced 2026-07-29 04:50:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Changed sizing to not overflow text in to other rows.

Browse source
This commit is contained in:
SergeantPanda 2025-05-05 09:08:01 -05:00
parent 82cee02962
commit 3a68a66e70
2 changed files with 16 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/components/tables/EPGsTable.jsx
View file

@ -94,9 +94,9 @@ const EPGsTable = () => {
}
return (
<Stack spacing={5}>
<Stack spacing={2}>
<Text size="xs">{label}: {parseInt(progress.progress)}%</Text>
<Progress value={parseInt(progress.progress)} size="xs" />
<Progress value={parseInt(progress.progress)} size="xs" style={{ margin: '2px 0' }} />
{progress.speed && <Text size="xs">Speed: {parseInt(progress.speed)} KB/s</Text>}
</Stack>
);
@ -179,7 +179,7 @@ const EPGsTable = () => {
if (data.status === 'error' && data.last_message) {
return (
<Tooltip label={data.last_message} multiline width={300}>
<Text c="dimmed" size="xs" lineClamp={2} style={{ color: theme.colors.red[6] }}>
<Text c="dimmed" size="xs" lineClamp={2} style={{ color: theme.colors.red[6], lineHeight: 1.3 }}>
{data.last_message}
</Text>
</Tooltip>
@ -189,7 +189,7 @@ const EPGsTable = () => {
// Show success message for successful sources
if (data.status === 'success') {
return (
<Text c="dimmed" size="xs" style={{ color: theme.colors.green[6] }}>
<Text c="dimmed" size="xs" style={{ color: theme.colors.green[6], lineHeight: 1.3 }}>
EPG data refreshed successfully
</Text>
);

24
frontend/src/components/tables/M3UsTable.jsx
View file

@ -108,7 +108,7 @@ const M3UTable = () => {
return (
<Box>
<Flex direction="column" gap={4}>
<Flex direction="column" gap={2}>
<Flex justify="space-between" align="center">
<Text size="xs" fw={500}>Downloading:</Text>
<Text size="xs">{parseInt(data.progress)}%</Text>
@ -142,7 +142,7 @@ const M3UTable = () => {
return (
<Box>
<Flex direction="column" gap={4}>
<Flex direction="column" gap={2}>
<Flex justify="space-between" align="center">
<Text size="xs" fw={500}>Processing groups:</Text>
<Text size="xs">{parseInt(data.progress)}%</Text>
@ -167,11 +167,11 @@ const M3UTable = () => {
const buildErrorStats = (data) => {
return (
<Box>
<Flex direction="column" gap={4}>
<Flex direction="column" gap={2}>
<Flex align="center">
<Text size="xs" fw={500} color="red">Error:</Text>
</Flex>
<Text size="xs" color="red">{data.error || "Unknown error occurred"}</Text>
<Text size="xs" color="red" style={{ lineHeight: 1.3 }}>{data.error || "Unknown error occurred"}</Text>
</Flex>
</Box>
);
@ -197,7 +197,7 @@ const M3UTable = () => {
return (
<Box>
<Flex direction="column" gap={4}>
<Flex direction="column" gap={2}>
<Flex justify="space-between" align="center">
<Text size="xs" fw={500}>Parsing:</Text>
<Text size="xs">{parseInt(data.progress)}%</Text>
@ -228,7 +228,7 @@ const M3UTable = () => {
const buildInitializingStats = () => {
return (
<Box>
<Flex direction="column" gap={4}>
<Flex direction="column" gap={2}>
<Flex align="center">
<Text size="xs" fw={500}>Initializing refresh...</Text>
</Flex>
@ -340,9 +340,9 @@ const M3UTable = () => {
const value = cell.getValue();
if (!value) return null;
// Match EPG table styling with Text component
// Match EPG table styling with Text component - always use xs size
return (
<Text size={tableSize === 'compact' ? 'xs' : 'sm'} c={getStatusColor(value)}>
<Text size="xs" c={getStatusColor(value)}>
{formatStatusText(value)}
</Text>
);
@ -387,7 +387,7 @@ const M3UTable = () => {
if (data.status === 'error') {
return (
<Tooltip label={value} multiline width={300}>
<Text c="dimmed" size={tableSize === 'compact' ? 'xs' : 'sm'} lineClamp={2} style={{ color: theme.colors.red[6] }}>
<Text c="dimmed" size="xs" lineClamp={2} style={{ color: theme.colors.red[6], lineHeight: 1.3 }}>
{value}
</Text>
</Tooltip>
@ -398,7 +398,7 @@ const M3UTable = () => {
if (data.status === 'success') {
return (
<Tooltip label={value} multiline width={300}>
<Text c="dimmed" size={tableSize === 'compact' ? 'xs' : 'sm'} style={{ color: theme.colors.green[6] }}>
<Text c="dimmed" size="xs" style={{ color: theme.colors.green[6], lineHeight: 1.3 }}>
{value}
</Text>
</Tooltip>
@ -408,7 +408,7 @@ const M3UTable = () => {
// For all other status values, just use dimmed text
return (
<Tooltip label={value} multiline width={300}>
<Text c="dimmed" size={tableSize === 'compact' ? 'xs' : 'sm'} lineClamp={2}>
<Text c="dimmed" size="xs" lineClamp={2} style={{ lineHeight: 1.3 }}>
{value}
</Text>
</Tooltip>
@ -421,7 +421,7 @@ const M3UTable = () => {
size: 120,
Cell: ({ cell }) => {
const value = cell.getValue();
return value ? new Date(value).toLocaleString() : 'Never';
return value ? <Text size="xs">{new Date(value).toLocaleString()}</Text> : <Text size="xs">Never</Text>;
},
},
{