updated element sizing in ivans widget

client/src/components/Widgets/IvansAlerts.jsx

@@ -144,13 +144,14 @@ export default function IvansAlerts({ settings, widgetID }) {
           pos="relative"
           justify="top" align="center"
           p={2} gap={2}
-          overflowY="auto"
+          overflow="auto"
           borderRadius="xl"
           bg="gray.800"
     >
       {data.map((item, index) => {
         return (
           <Collapsible.Root key={index} w="100%">
+            {/* Using context to dynamically change the border radii of the triggers */}
             <Collapsible.Context>
               {(collapsible) => (
                 <>
@@ -172,14 +173,15 @@ export default function IvansAlerts({ settings, widgetID }) {
                       </Flex>
                     </Flex>
                   </Collapsible.Trigger>
-                  <Collapsible.Content w="100%" h="100%">
+                  <Collapsible.Content w="100%" h="auto">
-                    <Box p={1} pl={2} borderBottomRadius="lg" bg="gray.700/45">
+                    {/* This box needs to be at h="100%" for the pdf toolbar to appear */}
-                      <Text textAlign="left" color="gray.100">{item?.summary}</Text>
+                    <Box w="100%" h="100%" p={1} pl={2} borderBottomRadius="lg" bg="gray.700/45">
+                      <Text fontSize="sm" textAlign="left" color="gray.100">{item?.summary}</Text>
                       <br />
                       {item?.files?.map((file, index) => {
                         return (
-                          <>
+                          <Box w="100%" h="100%" key={index} p={1}>
-                            <object key={index}
+                            <object
                               data={`${file?.url}#view=FitH&toolbar=1`}
                               type="application/pdf"
                               style={{ width: '100%', height: '100%', display: 'block' }}
@@ -194,7 +196,7 @@ export default function IvansAlerts({ settings, widgetID }) {
                               </Flex>
                             </object>
                             <br />
-                          </>
+                          </Box>
                         )})}
                     </Box>
                   </Collapsible.Content>