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

client/src/components/Widgets/RemoteSensing.jsx

@@ -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 sorts = settings?.activeSorts;
 
-  // build url once on mount
+  // build url
   const url = useMemo(() =>{
     if (settings?.startDate && 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) => (
                 <>
-                  <Collapsible.Trigger w="100%">
+                  <Collapsible.Trigger w="100%" overflow="hidden">
                     <Flex
                       direction="row"
                       w="100%" h="100%"
                       justify="space-between" align="center"
+                      gap={2}
                       borderTopRadius="lg"
                       borderBottomRadius={collapsible.open ? "0" : "lg"}
                       bg="gray.700"
                     >
-                      <Flex direction="column" pl={3} textAlign="left" color="gray.100">
-                        <Text>{item?.volcano_name}</Text>
-                        <Text fontSize="xs" color="gray.300/90">{item?.country}</Text>
+                      <Flex direction="column" minW={0} pl={3} textAlign="left" color="gray.100">
+                        <Text truncate >{item?.volcano_name}</Text>
+                        <Text truncate fontSize="xs" color="gray.300/90">{item?.country}</Text>
                       </Flex>
-                      <Flex pr={3}>
-                        <Text pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100" fontSize="sm">{item?.report_time}</Text>
+                      <Flex pr={3} minW={0}>
+                        <Text truncate pl={2} pr={2} borderRadius="lg" bg="gray.800/50" color="gray.100" fontSize="sm">{item?.report_time}</Text>
                       </Flex>
                     </Flex>
                   </Collapsible.Trigger>