From d8d694dd4ac0c4f2c2b8b1b28660667652346a9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Gonz=C3=A1lez-Albo?=
 <94169588+dg-ac@users.noreply.github.com>
Date: Thu, 12 Dec 2024 05:13:07 +0100
Subject: [PATCH] FIX: Makes styling in Format Menu consistent with Figmas
 (#179)

---
 webapp/src/components/formatMenu.tsx | 32 +++++++++++++++++++++++++---
 1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/webapp/src/components/formatMenu.tsx b/webapp/src/components/formatMenu.tsx
index c83a7cd..9afe38a 100644
--- a/webapp/src/components/formatMenu.tsx
+++ b/webapp/src/components/formatMenu.tsx
@@ -38,7 +38,22 @@ const FormatMenu = (properties: FormatMenuProps) => {
         open={isMenuOpen}
         onClose={(): void => setMenuOpen(false)}
         anchorEl={anchorElement.current}
-        anchorOrigin={properties.anchorOrigin}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "left",
+        }}
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "left",
+        }}
+        sx={{
+          "& .MuiPaper-root": {
+            borderRadius: "8px",
+            padding: "4px 0px",
+            marginLeft: "-4px", // Starting with a small offset
+          },
+          "& .MuiList-root": { padding: "0" },
+        }}
       >
         <MenuItemWrapper onClick={(): void => onSelect(NumberFormats.AUTO)}>
           <MenuItemText>{t("toolbar.format_menu.auto")}</MenuItemText>
@@ -123,14 +138,25 @@ const MenuItemWrapper = styled(MenuItem)`
   display: flex;
   justify-content: space-between;
   font-size: 12px;
-  width: 100%;
+  width: calc(100% - 8px);
+  min-width: 172px;
+  margin: 0px 4px;
+  border-radius: 4px;
+  padding: 8px;
+  height: 32px;
 `;
 
 const ChildrenWrapper = styled("div")`
   display: flex;
 `;
 
-const MenuDivider = styled("div")``;
+const MenuDivider = styled("div")`
+  width: 100%;
+  margin: auto;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  border-top: 1px solid #eeeeee;
+`;
 
 const MenuItemText = styled("div")`
   color: #000;