From eb03efba3efd71fccab067131c89af981de6f249 Mon Sep 17 00:00:00 2001
From: Daniel <danielglezalbo@gmail.com>
Date: Sun, 12 Jan 2025 23:19:26 +0100
Subject: [PATCH] FIX: Layout and spacing adjustments

---
 .../NameManagerDialog/NameManagerDialog.tsx        | 14 +++++++++-----
 .../NameManagerDialog/NamedRangeActive.tsx         | 10 +++++++---
 .../NameManagerDialog/NamedRangeInactive.tsx       | 10 ++++++----
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/webapp/src/components/NameManagerDialog/NameManagerDialog.tsx b/webapp/src/components/NameManagerDialog/NameManagerDialog.tsx
index 16532d8..bf27ed7 100644
--- a/webapp/src/components/NameManagerDialog/NameManagerDialog.tsx
+++ b/webapp/src/components/NameManagerDialog/NameManagerDialog.tsx
@@ -196,27 +196,31 @@ const StyledDialogTitle = styled(DialogTitle)`
 
 const NameListWrapper = styled(Stack)`
   overflow-y: auto;
-  gap: 12px;
 `;
 
 const StyledBox = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   width: 161.67px;
 `;
 
 const StyledDialogContent = styled(DialogContent)`
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  padding: 20px 12px 20px 20px;
+  padding: 0px;
 `;
 
 const StyledRangesHeader = styled(Stack)(({ theme }) => ({
   flexDirection: "row",
-  padding: "0 8px",
-  gap: "12px",
+  minHeight: "32px",
+  padding: "0px 84px 0px 12px",
+  gap: "8px",
   fontFamily: theme.typography.fontFamily,
   fontSize: "12px",
   fontWeight: "700",
+  borderBottom: `1px solid ${theme.palette.info.light}`,
+  backgroundColor: theme.palette.grey["50"],
   color: theme.palette.info.main,
 }));
 
diff --git a/webapp/src/components/NameManagerDialog/NamedRangeActive.tsx b/webapp/src/components/NameManagerDialog/NamedRangeActive.tsx
index 0f7a98f..9185522 100644
--- a/webapp/src/components/NameManagerDialog/NamedRangeActive.tsx
+++ b/webapp/src/components/NameManagerDialog/NamedRangeActive.tsx
@@ -92,10 +92,10 @@ function NamedRangeActive(properties: NamedRangeProperties) {
               }
             }}
           >
-            <StyledCheck size={12} />
+            <StyledCheck size={16} />
           </IconButton>
           <StyledIconButton onClick={onCancel}>
-            <X size={12} />
+            <X size={16} />
           </StyledIconButton>
         </IconsWrapper>
       </StyledBox>
@@ -118,8 +118,12 @@ const MenuSpanGrey = styled("span")`
 
 const StyledBox = styled(Box)`
   display: flex;
+  flex-direction: row;
+  align-items: center;
   gap: 12px;
-  width: 577px;
+  width: auto;
+  padding: 12px 20px 12px 4px;
+  box-shadow: 0 -1px 0 ${theme.palette.grey[300]};
 `;
 
 const StyledTextField = styled(TextField)(() => ({
diff --git a/webapp/src/components/NameManagerDialog/NamedRangeInactive.tsx b/webapp/src/components/NameManagerDialog/NamedRangeInactive.tsx
index 2f664fa..638fdf9 100644
--- a/webapp/src/components/NameManagerDialog/NamedRangeInactive.tsx
+++ b/webapp/src/components/NameManagerDialog/NamedRangeInactive.tsx
@@ -29,10 +29,10 @@ function NamedRangeInactive(properties: NamedRangeInactiveProperties) {
         <StyledDiv>{formula}</StyledDiv>
         <IconsWrapper>
           <StyledIconButtonBlack onClick={onEdit} disabled={!showOptions}>
-            <PencilLine size={12} />
+            <PencilLine size={16} />
           </StyledIconButtonBlack>
           <StyledIconButtonRed onClick={onDelete} disabled={!showOptions}>
-            <Trash2 size={12} />
+            <Trash2 size={16} />
           </StyledIconButtonRed>
         </IconsWrapper>
       </WrappedLine>
@@ -55,9 +55,11 @@ const StyledIconButtonRed = styled(IconButton)(({ theme }) => ({
 
 const WrappedLine = styled(Box)({
   display: "flex",
-  height: "28px",
+  flexDirection: "row",
+  maxHeight: "52px",
   alignItems: "center",
   gap: "12px",
+  padding: "12px 20px 12px 4px",
 });
 
 const StyledDiv = styled("div")(({ theme }) => ({
@@ -65,7 +67,7 @@ const StyledDiv = styled("div")(({ theme }) => ({
   fontSize: "12px",
   fontWeight: "400",
   color: theme.palette.common.black,
-  width: "153.67px",
+  width: "100%",
   paddingLeft: "8px",
 }));