From 388daddb29617bb213d9145ba060075dd1e77f88 Mon Sep 17 00:00:00 2001
From: Ahmed Mostafa <ahmed.mostafa1198@gmail.com>
Date: Fri, 15 Nov 2024 15:05:37 +0200
Subject: [PATCH] Update the sfx/ui menu by applying auto width and removing
 the overflow: visible

---
 .../src/components/AssemblyPoint/globalStyles.js            | 3 ---
 .../common/AnnotationOptions/AnnotationOptions.styled.js    | 6 ++++++
 .../src/components/common/AnnotationOptions/index.jsx       | 6 +++---
 .../src/components/tools/Crop/Crop.styled.js                | 1 -
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/react-filerobot-image-editor/src/components/AssemblyPoint/globalStyles.js b/packages/react-filerobot-image-editor/src/components/AssemblyPoint/globalStyles.js
index c8ac4153..cef6d624 100644
--- a/packages/react-filerobot-image-editor/src/components/AssemblyPoint/globalStyles.js
+++ b/packages/react-filerobot-image-editor/src/components/AssemblyPoint/globalStyles.js
@@ -19,9 +19,6 @@ const OverrideDefaultStyles = createGlobalStyle`
     box-sizing: border-box;
 
     .SfxPopper-root .SfxMenu-root {
-      overflow: visible;
-      width: max-content;
-
       .SfxMenuItem-prefix {
         margin-right: 6px;
       }
diff --git a/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/AnnotationOptions.styled.js b/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/AnnotationOptions.styled.js
index 1c7ad675..0c89e0fd 100644
--- a/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/AnnotationOptions.styled.js
+++ b/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/AnnotationOptions.styled.js
@@ -2,6 +2,7 @@
 import styled from 'styled-components';
 import Label from '@scaleflex/ui/core/label';
 import { Color as PC } from '@scaleflex/ui/utils/types/palette';
+import Menu from '@scaleflex/ui/core/menu';
 
 const StyledOptions = styled.div`
   display: flex;
@@ -139,6 +140,10 @@ const StyledIconLabel = styled(Label)`
   color: ${({ theme: { palette } }) => palette[PC.TextPrimary]};
 `;
 
+const StyledOptionsPopUp = styled(Menu)`
+  width: auto;
+`;
+
 export {
   StyledTwoColumnsContainer,
   StyledColumn,
@@ -148,4 +153,5 @@ export {
   StyledOptionsWrapper,
   StyledOptionPopupContent,
   StyledIconLabel,
+  StyledOptionsPopUp,
 };
diff --git a/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/index.jsx b/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/index.jsx
index 8534a3a3..f1980d81 100644
--- a/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/index.jsx
+++ b/packages/react-filerobot-image-editor/src/components/common/AnnotationOptions/index.jsx
@@ -3,7 +3,6 @@ import React, { useCallback, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { usePhoneScreen, useStore } from 'hooks';
 import { Label } from '@scaleflex/ui/core';
-import Menu from '@scaleflex/ui/core/menu';
 import Transparency from '@scaleflex/icons/transparency';
 import Shadow from '@scaleflex/icons/shadow';
 import Stroke from '@scaleflex/icons/stroke';
@@ -19,6 +18,7 @@ import {
   StyledOptions,
   StyledOptionsWrapper,
   StyledIconWrapper,
+  StyledOptionsPopUp,
 } from './AnnotationOptions.styled';
 import { POPPABLE_OPTIONS } from './AnnotationOptions.constants';
 import ColorInput from '../ColorInput';
@@ -145,7 +145,7 @@ const AnnotationOptions = ({
       </StyledOptionsWrapper>
 
       {OptionPopupComponent && (
-        <Menu
+        <StyledOptionsPopUp
           className="FIE_annotation-option-popup"
           anchorEl={anchorEl}
           open={Boolean(anchorEl)}
@@ -163,7 +163,7 @@ const AnnotationOptions = ({
               />
             )}
           </StyledOptionPopupContent>
-        </Menu>
+        </StyledOptionsPopUp>
       )}
     </StyledOptions>
   );
diff --git a/packages/react-filerobot-image-editor/src/components/tools/Crop/Crop.styled.js b/packages/react-filerobot-image-editor/src/components/tools/Crop/Crop.styled.js
index 80f2a629..49c83347 100644
--- a/packages/react-filerobot-image-editor/src/components/tools/Crop/Crop.styled.js
+++ b/packages/react-filerobot-image-editor/src/components/tools/Crop/Crop.styled.js
@@ -28,7 +28,6 @@ const StyledRatioDescription = styled(Label)`
 `;
 
 const StyledMenu = styled.div`
-  min-width: 270px;
   border-radius: 4px;
   overflow: hidden;
   background-color: ${({ theme: { palette } }) =>