chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix ivans & rs text overflow in header of each entry by using ellipses

Browse Source
This commit is contained in:
vkuchenik
2026-08-11 08:37:08 -07:00
parent d9bdb17217
commit 0c79b409bd
2 changed files with 14 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Widgets/IvansAlerts.jsx
+6 -5
View File
@@ -165,16 +165,17 @@ export default function IvansAlerts({ settings, widgetID }) {
w="100%" h="100%" w="100%" h="100%"
justify="space-between" align="center" justify="space-between" align="center"
pb={1} pb={1}
gap={2}
borderTopRadius="lg" borderTopRadius="lg"
borderBottomRadius={collapsible.open ? "0" : "lg"} borderBottomRadius={collapsible.open ? "0" : "lg"}
bg="gray.700" bg="gray.700"
> >
<Flex direction="column" pl={3} textAlign="left" color="gray.100"> <Flex direction="column" minW={0} pl={3} textAlign="left" color="gray.100">
<Text>{item.volcano_name}</Text> <Text truncate>{item.volcano_name}</Text>
<Text fontSize="xs" color="gray.300/90">{item.send_time}</Text> <Text truncate fontSize="xs" color="gray.300/90">{item.send_time}</Text>
</Flex> </Flex>
<Flex pr={3}> <Flex minW={0} pr={3}>
<Text pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100">{item.report_num}</Text> <Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100">{item.report_num}</Text>
</Flex> </Flex>
</Flex> </Flex>
</Collapsible.Trigger> </Collapsible.Trigger>
client/src/components/Widgets/RemoteSensing.jsx
+8 -7
View File
@@ -9,7 +9,7 @@ export default function RemoteSensing({ settings, widgetID }) {
const isCopy = settings?.copyToClipboard === true; // acts as a fail-safe if no default setting is set const isCopy = settings?.copyToClipboard === true; // acts as a fail-safe if no default setting is set
const sorts = settings?.activeSorts; const sorts = settings?.activeSorts;
// build url once on mount // build url
const url = useMemo(() =>{ const url = useMemo(() =>{
if (settings?.startDate && settings?.endDate) if (settings?.startDate && settings?.endDate)
return '/api/v2/remote_sensing?start_date=' + settings?.startDate + '&end_date=' + settings?.endDate; return '/api/v2/remote_sensing?start_date=' + settings?.startDate + '&end_date=' + settings?.endDate;
@@ -170,21 +170,22 @@ export default function RemoteSensing({ settings, widgetID }) {
<Collapsible.Context> <Collapsible.Context>
{(collapsible) => ( {(collapsible) => (
<> <>
<Collapsible.Trigger w="100%"> <Collapsible.Trigger w="100%" overflow="hidden">
<Flex <Flex
direction="row" direction="row"
w="100%" h="100%" w="100%" h="100%"
justify="space-between" align="center" justify="space-between" align="center"
gap={2}
borderTopRadius="lg" borderTopRadius="lg"
borderBottomRadius={collapsible.open ? "0" : "lg"} borderBottomRadius={collapsible.open ? "0" : "lg"}
bg="gray.700" bg="gray.700"
> >
<Flex direction="column" pl={3} textAlign="left" color="gray.100"> <Flex direction="column" minW={0} pl={3} textAlign="left" color="gray.100">
<Text>{item?.volcano_name}</Text> <Text truncate >{item?.volcano_name}</Text>
<Text fontSize="xs" color="gray.300/90">{item?.country}</Text> <Text truncate fontSize="xs" color="gray.300/90">{item?.country}</Text>
</Flex> </Flex>
<Flex pr={3}> <Flex pr={3} minW={0}>
<Text pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100" fontSize="sm">{item?.report_time}</Text> <Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100" fontSize="sm">{item?.report_time}</Text>
</Flex> </Flex>
</Flex> </Flex>
</Collapsible.Trigger> </Collapsible.Trigger>