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 = ({ {OptionPopupComponent && ( - )} - + )} ); 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 } }) =>