From 3a231d41d6f7bc3f0e0af334cf93e22b597cba14 Mon Sep 17 00:00:00 2001
From: Christopher Phelefu <cphelefu@gmail.com>
Date: Tue, 16 Jul 2024 09:08:27 -0400
Subject: [PATCH] scaling image and fixing custom navbar panels

---
 .../src/core/components/legend/legend-layer.tsx      | 12 ++++++++----
 .../core/components/nav-bar/nav-bar-panel-button.tsx |  6 +-----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/geoview-core/src/core/components/legend/legend-layer.tsx b/packages/geoview-core/src/core/components/legend/legend-layer.tsx
index c28cabf2d6f..386a0352d7b 100644
--- a/packages/geoview-core/src/core/components/legend/legend-layer.tsx
+++ b/packages/geoview-core/src/core/components/legend/legend-layer.tsx
@@ -50,19 +50,23 @@ export function LegendLayerImage(props: LegendLayerImageProps): JSX.Element {
     top: '50%',
     left: '50%',
     transform: 'translate(-50%, -50%)',
-    bgcolor: 'background.paper',
+    bgcolor: 'background.paper'
+  };
+
+  const imgStyle = {
+    width: '100%', 
+    transform: 'scale(2)',
     border: '2px solid #ccc',
     boxShadow: 24,
     borderRadius: 1,
-    p: 4,
-  };
+  }
 
   return (
     <>
       <Box component="img" alt="icon" src={imgSrc} sx={{ maxWidth: '100%', cursor: 'pointer' }} onClick={handleOpen} />
       <Modal open={open} onClose={handleClose} container={mapElem}>
         <Box sx={style}>
-          <Box component="img" alt="icon" src={imgSrc} sx={{ maxWidth: '100%', cursor: 'pointer' }} onClick={handleOpen} />
+          <Box component="img" alt="icon" src={imgSrc} sx={imgStyle} onClick={handleOpen} />
         </Box>
       </Modal>
     </>
diff --git a/packages/geoview-core/src/core/components/nav-bar/nav-bar-panel-button.tsx b/packages/geoview-core/src/core/components/nav-bar/nav-bar-panel-button.tsx
index e7e97805a2b..a6d6ee23c70 100644
--- a/packages/geoview-core/src/core/components/nav-bar/nav-bar-panel-button.tsx
+++ b/packages/geoview-core/src/core/components/nav-bar/nav-bar-panel-button.tsx
@@ -74,11 +74,7 @@ export default function NavbarPanelButton({ buttonPanel }: NavbarPanelButtonType
           placement="left-end"
           onClose={handleClickAway}
           container={shellContainer}
-          sx={{
-            '& .MuiPopover-paper': {
-              transform: 'translateX(-8px) !important', // Adjust the value for desired spacing
-            },
-          }}
+          sx={{ marginRight: '5px !important'}}
         >
           <Paper sx={{ width: `${buttonPanel.panel?.width ?? 300}px`, maxHeight: '500px' }}>
             <DialogTitle sx={sxClasses.popoverTitle}>{(buttonPanel.panel?.title as string) ?? ''}</DialogTitle>