fix(ModalPage): apply user height for desktop

VKCOM · Dec 3, 2024 · aa2c820 · aa2c820
1 parent b9c9e6c
commit aa2c820
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git 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
@@ -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={
           <ModalPageHeader