feat(modals): modal alerta ancho mobile modal simple compacto

src/organisms/Modals/Modal/Modal.test.tsx

@@ -130,6 +130,24 @@ describe('Modal Component', () => {
       const modalContent = screen.getByRole('dialog')
       expect(modalContent).toBeInTheDocument()
     })
+
+    it('applies custom size props when provided', () => {
+      renderWithChakra(
+        <Modal
+          {...defaultProps}
+          minWidth="700px"
+          maxWidth="80vw"
+          minHeight="320px"
+          maxHeight="80vh"
+        />
+      )
+
+      const modalContent = screen.getByRole('dialog')
+      expect(modalContent).toHaveStyle('min-width: 700px')
+      expect(modalContent).toHaveStyle('max-width: 80vw')
+      expect(modalContent).toHaveStyle('min-height: 320px')
+      expect(modalContent).toHaveStyle('max-height: 80vh')
+    })
   })
 
   describe('Responsive Behavior', () => {

src/organisms/Modals/Modal/Modal.tsx

@@ -21,6 +21,10 @@ export const Modal = ({
   scrollBehavior = 'outside',
   fixedButtons = false,
   autoFocus = false,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight,
 }: IModal): JSX.Element => {
   const isInside = scrollBehavior === 'inside' || fixedButtons
 
@@ -29,6 +33,10 @@ export const Modal = ({
     scrollBehavior,
     fixedButtons,
     withoutMargin,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
   })
 
   return (

src/organisms/Modals/Modal/ModalSimple.test.tsx

@@ -4,6 +4,14 @@ import userEvent from '@testing-library/user-event'
 
 import { ModalSimple } from './ModalSimple'
 
+jest.mock('@chakra-ui/react', () => {
+  const originalModule = jest.requireActual('@chakra-ui/react')
+  return {
+    ...originalModule,
+    useMediaQuery: jest.fn(() => [false]),
+  }
+})
+
 const renderWithChakra = (ui: React.ReactElement): any => {
   return render(<ChakraProvider>{ui}</ChakraProvider>)
 }
@@ -58,4 +66,15 @@ describe('ModalSimple Component', () => {
     expect(screen.getByTestId('modal-simple-content')).toBeInTheDocument()
     expect(screen.getByText('Simple content')).toBeInTheDocument()
   })
+
+  it('renders in compact mode on mobile when mobileCompact is true', () => {
+    renderWithChakra(
+      <ModalSimple isOpen onClose={jest.fn()} mobileCompact>
+        <div>Simple content</div>
+      </ModalSimple>
+    )
+
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+    expect(screen.getByText('Simple content')).toBeInTheDocument()
+  })
 })

src/organisms/Modals/Modal/ModalSimple.tsx

@@ -17,12 +17,14 @@ export const ModalSimple = ({
   closeOnOverlayClick = true,
   closeOnEsc,
   withoutMargin = false,
+  mobileCompact = false,
 }: IModalSimple): JSX.Element => {
   const modalConfig = useModalConfig({
     closeOnOverlayClick,
     scrollBehavior: 'outside',
     fixedButtons: false,
     withoutMargin,
+    mobileCompact,
   })
 
   return (
@@ -33,6 +35,7 @@ export const ModalSimple = ({
       motionPreset="scale"
       onClose={onClose}
       scrollBehavior="outside"
+      isCentered={mobileCompact}
       blockScrollOnMount={false}
     >
       <ModalOverlay />

src/organisms/Modals/Modal/useModalConfig.ts

@@ -14,37 +14,65 @@ interface UseModalConfigParams {
   scrollBehavior: 'outside' | 'inside'
   fixedButtons: boolean
   withoutMargin: boolean
+  minWidth?: string | number
+  maxWidth?: string | number
+  minHeight?: string | number
+  maxHeight?: string | number
+  mobileCompact?: boolean
 }
 
 export const useModalConfig = ({
   closeOnOverlayClick,
   scrollBehavior,
   fixedButtons,
   withoutMargin,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight,
+  mobileCompact = false,
 }: UseModalConfigParams): ModalConfig => {
   const [isDesktop] = useMediaQuery(`(min-width: ${uiKitModalIsDesktop}px)`)
   // fixedButtons requiere scroll interno
   const isInsideScroll = scrollBehavior === 'inside'
   const shouldForceInsideScroll = fixedButtons
+  const desktopMinWidth = minWidth ?? '690px'
+  const desktopMaxWidth = maxWidth ?? '690px'
+  const desktopMinHeight = minHeight ?? '300px'
+  const insideMaxHeight = maxHeight ?? 'calc(100% - 96px)'
+  const outsideMaxHeight = maxHeight ?? 'auto'
+  const compactMobileWidth = maxWidth ?? 'calc(100vw - 32px)'
+  const compactMobileMaxWidth = maxWidth ?? '375px'
+  const compactMobileMaxHeight = maxHeight ?? 'calc(100dvh - 32px)'
   const isInside = isInsideScroll || shouldForceInsideScroll
   return {
     closeOnOverlayClick,
     closeOnEsc: closeOnOverlayClick,
     scrollBehavior: isInside ? 'inside' : 'outside',
     contentProps: {
-      maxH: isInside ? '100dvh' : 'auto',
-      minH: isDesktop ? '300px' : '100dvh',
+      maxH: isInside
+        ? maxHeight ?? '100%'
+        : mobileCompact && !isDesktop
+        ? compactMobileMaxHeight
+        : outsideMaxHeight,
+      minH: isDesktop ? desktopMinHeight : mobileCompact ? 'auto' : '100%',
       padding: 0,
-      width: '100%',
+      width: isDesktop ? 'fit-content' : mobileCompact ? compactMobileWidth : '100%',
       animation: 'none',
       sx: {
         bgColor: vars('colors-neutral-white'),
-        borderRadius: isDesktop ? '8px' : 0,
-        mt: isDesktop ? '48px' : 0,
-        mb: isDesktop ? '48px' : 0,
-        marginX: isDesktop ? 'auto' : 0,
-        maxH: isInside ? 'calc(100dvh - 96px)' : 'auto',
-        maxWidth: isDesktop ? '690px' : '100%',
+        borderRadius: isDesktop ? '8px' : mobileCompact ? '10px' : 0,
+        mt: isDesktop ? '48px' : mobileCompact ? 'auto' : 0,
+        mb: isDesktop ? '48px' : mobileCompact ? 'auto' : 0,
+        marginX: isDesktop ? 'auto' : mobileCompact ? 'auto' : 0,
+        maxH: isInside
+          ? insideMaxHeight
+          : mobileCompact && !isDesktop
+          ? compactMobileMaxHeight
+          : outsideMaxHeight,
+        minWidth: isDesktop ? desktopMinWidth : mobileCompact ? 'auto' : undefined,
+        maxWidth: isDesktop ? desktopMaxWidth : mobileCompact ? compactMobileMaxWidth : '100%',
+        overflow: mobileCompact && !isDesktop ? 'hidden' : undefined,
 
         ...(fixedButtons && {
           '.uikit-modalContent': {

src/organisms/Modals/ModalAlert/useModalAlertConfig.ts

@@ -21,7 +21,7 @@ export const useModalAlertConfig = (): ModalConfig => {
       p: 0,
       m: '10vh auto 0',
       sx: {
-        maxWidth: isDesktop ? '589px' : '343px',
+        maxWidth: isDesktop ? '589px' : 'calc(100vw - 32px)',
       },
     },
   }

src/organisms/Modals/ModalMultiple/ModalMultiple.tsx

@@ -15,6 +15,10 @@ export interface ModalDefaultProps {
   withoutMargin?: IModal['withoutMargin']
   scrollBehavior?: IModal['scrollBehavior']
   fixedButtons?: IModal['fixedButtons']
+  minWidth?: IModal['minWidth']
+  maxWidth?: IModal['maxWidth']
+  minHeight?: IModal['minHeight']
+  maxHeight?: IModal['maxHeight']
 }
 
 type BaseProps = ModalDefaultProps & {
@@ -88,6 +92,10 @@ export const ModalMultiple = (props: ModalMultipleProps): JSX.Element => {
     withoutMargin = false,
     scrollBehavior = 'outside',
     fixedButtons = false,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
   } = props
 
   const modalConfig = useModalMultipleConfig({
@@ -96,6 +104,10 @@ export const ModalMultiple = (props: ModalMultipleProps): JSX.Element => {
     scrollBehavior,
     fixedButtons,
     withoutMargin,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
   })
 
   const renderContent = (): JSX.Element | null => {

src/organisms/Modals/ModalMultiple/useModalMultipleConfig.ts

@@ -17,6 +17,10 @@ interface UseModalMultipleConfigParams {
   scrollBehavior: 'outside' | 'inside'
   fixedButtons: boolean
   withoutMargin: boolean
+  minWidth?: string | number
+  maxWidth?: string | number
+  minHeight?: string | number
+  maxHeight?: string | number
 }
 
 export const useModalMultipleConfig = ({
@@ -25,12 +29,20 @@ export const useModalMultipleConfig = ({
   scrollBehavior,
   fixedButtons,
   withoutMargin,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight,
 }: UseModalMultipleConfigParams): ModalConfig => {
   const modalConfig = useModalConfig({
     closeOnOverlayClick,
     scrollBehavior,
     fixedButtons,
     withoutMargin,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
   })
 
   const modalAlertConfig = useModalAlertConfig()

src/organisms/Modals/types.d.ts

@@ -14,6 +14,10 @@ export interface IModal {
   /** Si esta activo se fija el footer */
   fixedButtons?: boolean
   autoFocus?: boolean
+  minWidth?: string | number
+  maxWidth?: string | number
+  minHeight?: string | number
+  maxHeight?: string | number
 }
 
 export interface IModalSimple {
@@ -23,6 +27,8 @@ export interface IModalSimple {
   isOpen: boolean
   onClose: () => void
   withoutMargin?: boolean
+  /** Si está activo en mobile se comporta como una tarjeta compacta centrada */
+  mobileCompact?: boolean
 }
 
 export interface IModalCard {