FIX: Layout and spacing adjustments

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: 0px;
-  padding: 20px 12px 20px 20px;
 `;
 
 const StyledRangesHeader = styled(Stack)(({ theme }) => ({
   flexDirection: "row",
-  padding: "0 8px",
+  minHeight: "32px",
-  gap: "12px",
+  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,
 }));
 

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)(() => ({

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",
 }));