Update the sfx/ui menu by applying auto width and removing the overfl…

…ow: visible
scaleflex · Dec 11, 2024 · 388dadd · 388dadd
1 parent b2b0497
commit 388dadd
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 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
@@ -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/...ilerobot-image-editor/src/components/common/AnnotationOptions/AnnotationOptions.styled.js b/...ilerobot-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
@@ -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
@@ -28,7 +28,6 @@ const StyledRatioDescription = styled(Label)`
 `;
 
 const StyledMenu = styled.div`
-  min-width: 270px;
   border-radius: 4px;
   overflow: hidden;
   background-color: ${({ theme: { palette } }) =>