From 175c820f56894b57d90e644ec541d8120fc669b8 Mon Sep 17 00:00:00 2001
From: Phil Owen <19691521+PhillipsOwen@users.noreply.github.com>
Date: Fri, 9 Aug 2024 15:45:38 -0400
Subject: [PATCH] improvements to the way the resize control is configured.

---
 src/components/dialog/base-floating-dialog.js | 19 ++++++++--------
 src/components/legend/legend.js               | 22 +++++++++----------
 2 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/components/dialog/base-floating-dialog.js b/src/components/dialog/base-floating-dialog.js
index 5735b305..cbaf5a48 100644
--- a/src/components/dialog/base-floating-dialog.js
+++ b/src/components/dialog/base-floating-dialog.js
@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { ToggleButtonGroup, ToggleButton, Box, Stack } from '@mui/material';
+import { ToggleButtonGroup, ToggleButton, Box, Stack, Typography } from '@mui/material';
 import Draggable from "react-draggable";
 import PropTypes from 'prop-types';
 import { Resizable } from "react-resizable";
@@ -83,7 +83,6 @@ export default function BaseFloatingDialog({ title, index, dialogObject, dataKey
                 axis="x"
                 draggableOpts={{ handleSize: [20, 20] }}>
                 <Dialog
-                    width="100%"
                     aria-labelledby="draggable-dialog"
                     open={ true }
                     onClose={ handleClose }
@@ -93,18 +92,20 @@ export default function BaseFloatingDialog({ title, index, dialogObject, dataKey
                     style={{ pointerEvents: 'none' }}
                     PaperProps={{ sx: { pointerEvents: 'auto' } }}
                     sx={{ zIndex: 405, '.MuiBackdrop-root': { backgroundColor: 'transparent' }, left: index * 50, top: index * 75 }}>
+
                     <DialogTitle
                         id="draggable-dialog"
-                        sx={{ cursor: 'move', backgroundColor: 'lightblue', textAlign: 'left', fontSize: 14, height: 40, p: 1.3 }}>
-                        <Stack direction="row" justifyContent="space-between">
+                        sx={{ p: 1, display: 'flex', alignItems: 'center', cursor: 'move', backgroundColor: 'lightblue' }}>
+                        <Typography
+                            sx={{ wordWrap: 'break-word', width: newWidth, minWidth: minWidth, flexWrap: "wrap", fontSize: 12}}>
                             { title }
-                            <IconButton size="small" onClick={ handleClose } sx={{ marginTop: -.9, marginRight: -1 }}>
-                                <CloseOutlinedIcon color={"primary"}/>
-                            </IconButton>
-                        </Stack>
+                        </Typography>
                     </DialogTitle>
+                    <IconButton size="small" onClick={ handleClose } sx={{ position: 'absolute', right: 2, top: 1 }}>
+                        <CloseOutlinedIcon color={"primary"}/>
+                    </IconButton>
 
-                    <DialogContent sx={{fontSize: 10, p: "5px"}}>
+                    <DialogContent sx={{ fontSize: 10, p: "5px" }}>
                         <Stack direction="column" spacing={ '5px' } alignItems="center" >
                             <ToggleButtonGroup variant="text" onChange={(event, newValue) => { toggleLineView(newValue); }}>
                                 <Stack display="wrap" sx={{ width: newWidth, minWidth: minWidth, flexWrap: "wrap"}} direction="row" spacing={'px'}  alignItems="center">
diff --git a/src/components/legend/legend.js b/src/components/legend/legend.js
index 4ccb1fc1..610921d5 100644
--- a/src/components/legend/legend.js
+++ b/src/components/legend/legend.js
@@ -58,17 +58,17 @@ export const MapLegend = () => {
     }
 
     // define the starting size of the card
-    const [newWidth, setNewWidth] = React.useState(75);
-    const [newHeight, setNewHeight] = React.useState(600);
+    const [newWidth, setNewWidth] = React.useState(60);
+    const [newHeight, setNewHeight] = React.useState(400);
 
     // create a reference to avoid the findDOMNode deprecation issue
     const nodeRef = React.useRef(null);
 
     // declare the mins/maxes for the dialog content area
     const minWidth = 40;
-    const minHeight = 450;
-    const maxWidth = 100;
-    const maxHeight = 700;
+    const minHeight = 400;
+    const maxWidth = 110;
+    const maxHeight = 600;
 
     return (
         <Fragment>
@@ -101,22 +101,20 @@ export const MapLegend = () => {
                             zIndex: 410,
                             borderRadius: 'sm',
                             visibility: legendVisibilty,
-                            height: newHeight+60, width: newWidth,
-                            minWidth: minWidth, minHeight: minHeight+70, maxWidth: maxWidth, maxHeight: maxHeight+70
-                        }}
-                    >
+                            width: newWidth, height: newHeight+70,
+                            minWidth: minWidth, minHeight: minHeight+70, maxWidth: maxWidth, maxHeight: maxHeight+65
+                        }}>
                         <Stack
                             direciton="column"
                             gap={ 1 }
-                            alignItems="center"
-                        >
+                            alignItems="center">
                             <Avatar variant="outlined" id="draggable-card"  sx={{ m: 0, p: 0, height: 40, cursor: 'move' }}>
                                 <LegendIcon size="lg" color="primary" />
                             </Avatar>
 
                             <Box component="img" alt="Legend" src={ legendUrl }
                                  sx={{ height: newHeight, width: newWidth,
-                                 minWidth: minWidth, minHeight: minHeight, maxWidth: maxWidth, maxHeight: maxHeight }}
+                                 minWidth: minWidth, minHeight: minHeight, maxWidth: maxWidth-10, maxHeight: maxHeight-10 }}
                             />
                         </Stack>
                     </Card>