diff --git a/packages/vkui/src/components/ModalPage/ModalPage.module.css b/packages/vkui/src/components/ModalPage/ModalPage.module.css index b96e2738f1..aa20bcc7b8 100644 --- a/packages/vkui/src/components/ModalPage/ModalPage.module.css +++ b/packages/vkui/src/components/ModalPage/ModalPage.module.css @@ -1,7 +1,4 @@ .host { - --vkui_internal_ModalPage--userHeight: 100%; - --vkui_internal_ModalPage--desktopMaxWidth: 100%; - display: flex; inline-size: 100%; block-size: var(--vkui_internal_ModalPage--userHeight); @@ -13,6 +10,8 @@ /* Mobile */ @media (--viewWidth-smallTabletMinus) { .host { + --vkui_internal_ModalPage--userHeight: 100%; + position: absolute; inset-inline: 0; inset-block-end: 0; @@ -33,11 +32,13 @@ /* Desktop */ @media (--viewWidth-smallTabletPlus) { .host { + --vkui_internal_ModalPage--desktopMaxWidth: 100%; + --vkui_internal_ModalPage--userHeight: auto; + position: relative; margin-block: auto; max-inline-size: var(--vkui_internal_ModalPage--desktopMaxWidth); max-block-size: calc(100% - 64px); /* FIXME 64px??? */ - block-size: auto; } .hostMaxWidthS { diff --git a/packages/vkui/src/components/ModalRoot/Readme.md b/packages/vkui/src/components/ModalRoot/Readme.md index 39516c1203..9573dd87be 100644 --- a/packages/vkui/src/components/ModalRoot/Readme.md +++ b/packages/vkui/src/components/ModalRoot/Readme.md @@ -175,7 +175,7 @@ const App = () => { id={MODAL_PAGE_WITH_FIXED_HEIGHT} onClose={modalBack} settlingHeight={100} - height={isDesktop ? 250 : '70%'} + height={isDesktop ? '250px' : '70%'} hideCloseButton={platform === 'ios'} header={