From 182495e11a246abc0e0a999e1adb1c38850c6356 Mon Sep 17 00:00:00 2001
From: vkuchenik <vkuchenik@contractor.usgs.gov>
Date: Mon, 10 Aug 2026 07:53:26 -0700
Subject: [PATCH] updated element sizing in ivans widget

---
 client/src/components/Widgets/IvansAlerts.jsx | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/client/src/components/Widgets/IvansAlerts.jsx b/client/src/components/Widgets/IvansAlerts.jsx
index 1464711..cf7e67c 100644
--- a/client/src/components/Widgets/IvansAlerts.jsx
+++ b/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,17 +173,18 @@ export default function IvansAlerts({ settings, widgetID }) {
                       </Flex>
                     </Flex>
                   </Collapsible.Trigger>
-                  <Collapsible.Content w="100%" h="100%">
-                    <Box p={1} pl={2} borderBottomRadius="lg" bg="gray.700/45">
-                      <Text textAlign="left" color="gray.100">{item?.summary}</Text>
+                  <Collapsible.Content w="100%" h="auto">
+                    {/* This box needs to be at h="100%" for the pdf toolbar to appear */}
+                    <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 (
-                          <>
-                            <object key={index}
-                                    data={`${file?.url}#view=FitH&toolbar=1`}
-                                    type="application/pdf"
-                                    style={{ width: '100%', height: '100%', display: 'block' }}
+                          <Box w="100%" h="100%" key={index} p={1}>
+                            <object
+                              data={`${file?.url}#view=FitH&toolbar=1`}
+                              type="application/pdf"
+                              style={{ width: '100%', height: '100%', display: 'block' }}
                             >
                               <Flex w="100%" h="100%" p={4} color="gray.400">
                                 <Text mb={2} color="fg.muted">
@@ -194,7 +196,7 @@ export default function IvansAlerts({ settings, widgetID }) {
                               </Flex>
                             </object>
                             <br />
-                          </>
+                          </Box>
                         )})}
                     </Box>
                   </Collapsible.Content>