FIX: Replace inline styles with StyledMenu component for improved readability

webapp/src/components/formatMenu.tsx

@@ -34,7 +34,7 @@ const FormatMenu = (properties: FormatMenuProps) => {
       >
         {properties.children}
       </ChildrenWrapper>
-      <Menu
+      <StyledMenu
         open={isMenuOpen}
         onClose={(): void => setMenuOpen(false)}
         anchorEl={anchorElement.current}
@@ -46,14 +46,6 @@ const FormatMenu = (properties: FormatMenuProps) => {
           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>
@@ -122,7 +114,7 @@ const FormatMenu = (properties: FormatMenuProps) => {
         <MenuItemWrapper onClick={(): void => setPickerOpen(true)}>
           <MenuItemText>{t("toolbar.format_menu.custom")}</MenuItemText>
         </MenuItemWrapper>
-      </Menu>
+      </StyledMenu>
       <FormatPicker
         numFmt={properties.numFmt}
         onChange={onSelect}
@@ -134,6 +126,17 @@ const FormatMenu = (properties: FormatMenuProps) => {
   );
 };
 
+const StyledMenu = styled(Menu)`
+  & .MuiPaper-root {
+    border-radius: 8px;
+    padding: 4px 0px;
+    margin-left: -4px; // Starting with a small offset
+  }
+  & .MuiList-root {
+    padding: 0;
+  }
+`;
+
 const MenuItemWrapper = styled(MenuItem)`
   display: flex;
   justify-content: space-between;