fix(ModalPage): ограничить область контента с помощью bottom-inset

packages/vkui/src/components/ModalPage/ModalPage.module.css

@@ -123,10 +123,13 @@
   height: 100%;
 }
 
-.ModalPage__content-in::after {
-  content: '';
+/* существует для того, чтобы использовать в расчёте translateY
+ * чтобы поднять ModalPage не только на высоту контента, но и на высоту bottom-inset
+ * особенно важно для ModalPage c динамической высотой
+ */
+.ModalPage__bottom-inset {
   height: var(--vkui_internal--safe_area_inset_bottom);
-  display: block;
+  flex-shrink: 0;
 }
 
 /**

packages/vkui/src/components/ModalPage/ModalPage.tsx

@@ -142,6 +142,7 @@ export const ModalPage = ({
               >
                 <div className={styles['ModalPage__content-in']}>{children}</div>
               </div>
+              <div ref={refs.bottomInset} className={styles['ModalPage__bottom-inset']} />
             </div>
             {isCloseButtonShown && <ModalDismissButton onClick={onClose || modalContext.onClose} />}
           </div>

packages/vkui/src/components/ModalRoot/ModalRoot.tsx

@@ -642,9 +642,10 @@ function initModal(modalState: ModalsStateEntry) {
 }
 
 function initPageModal(modalState: ModalsStateEntry) {
-  const { contentElement } = modalState;
-  const contentHeight = (contentElement?.firstElementChild as HTMLElement).offsetHeight;
-
+  const { contentElement, bottomInset } = modalState;
+  const contentElementHeight = (contentElement?.firstElementChild as HTMLElement).offsetHeight;
+  const bottomInsetHeight = bottomInset?.offsetHeight || 0;
+  const contentHeight = contentElementHeight + bottomInsetHeight;
   let prevTranslateY = modalState.translateY;
 
   modalState.expandable =

packages/vkui/src/components/ModalRoot/ModalRootContext.tsx

@@ -42,6 +42,7 @@ export function useModalRegistry(id: string | undefined, type: ModalType) {
     innerElement: (e) => (elements.innerElement = e),
     headerElement: (e) => (elements.headerElement = e),
     contentElement: (e) => (elements.contentElement = e),
+    bottomInset: (e) => (elements.bottomInset = e),
   }).current;
   return { refs };
 }

packages/vkui/src/components/ModalRoot/types.ts

@@ -16,6 +16,7 @@ export interface ModalElements {
   innerElement?: HTMLElement | null;
   headerElement?: HTMLElement | null;
   contentElement?: HTMLElement | null;
+  bottomInset?: HTMLElement | null;
 }
 
 export interface ModalsStateEntry extends ModalElements {