fix(ModalPage): Properly calculate content height in expanded mode (#…

…6538)

- close #6242

- меняем логику определения высоты контента. 
  Раньше мы просто брали `el.offsetScroll` у контейнера контента `.ModalPage__content-in`, теперь же, учитывая, что в режиме `expandable` размер контента модального окна не получить через `el.offsetScroll` мы высчитываем высоту временно меня `height` на `height: auto`, смотрим размер, и возвращаем стиль назад.
- убрали проверку предыдущего состояния `state.expandable` при определении текущего состояния `expandable`, потому что при изменении ориентации это не верно. Верно всё же ориентироваться на высоту контента.

Проблема лишнего места при изменении ориентации экрана в том, что это происходит когда модальное окно в режиме `expandable`. В этом режиме у `.ModalPage__content-in` `height` задано `100%` (изначально добавлено [тут](#4625))
https://github.com/VKCOM/VKUI/blob/e935a7b8dfd2c9d9dbbb5937bd1decba859d45d1/packages/vkui/src/components/ModalPage/ModalPage.module.css#L121-L126

Из-за этих стилей высота контейнера контента становится равна высоте родительского элемента.
При этом, если высота контента в вертикальной ориентации экрана меньше чем высота экрана, то высота контейнера контента будет больше чем высота контента, что как раз и добавляет лишнее место снизу.

При изменении ориентации мы пересчитываем высоту, но селектор всё ещё работает и `element.scrollHeight`, дающий нам высоту контента продолжает выдавать высоту равную высоте родителя, хотя наша логика определения состояния `expandable` основывается на сравнении высоты родительского элемента и высоты контента.
В результате `ModalRoot` продолжает думать, что `ModalPage` в состоянии `expandablе` и позиционирует модальную страницу максимально высоко, хотя контент позволяет отрисовать модальное окно ниже, как если бы модальное окно было изначально открыто в такой ориентации экрана.

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

@@ -662,15 +662,16 @@ function initModal(modalState: ModalsStateEntry) {
 
 function initPageModal(modalState: ModalsStateEntry) {
   const { contentElement, bottomInset } = modalState;
-  const contentElementHeight = (contentElement?.firstElementChild as HTMLElement).scrollHeight;
+  const contentElementHeight = calculateModalContentHeight(
+    contentElement?.firstElementChild as HTMLElement,
+    modalState.expandable,
+  );
   const bottomInsetHeight = bottomInset?.offsetHeight || 0;
   const contentHeight = contentElementHeight + bottomInsetHeight;
   let prevTranslateY = modalState.translateY;
 
   modalState.expandable =
-    contentHeight > (contentElement?.clientHeight ?? 0) ||
-    modalState.settlingHeight === 100 ||
-    modalState.expanded;
+    contentHeight > (contentElement?.clientHeight ?? 0) || modalState.settlingHeight === 100;
 
   let collapsed = false;
   let expanded = false;
@@ -733,3 +734,25 @@ function initPageModal(modalState: ModalsStateEntry) {
 function initCardModal(modalState: ModalsStateEntry) {
   modalState.translateY = 0;
 }
+
+function calculateModalContentHeight(
+  element: HTMLElement,
+  isExpandable: ModalsStateEntry['expandable'],
+) {
+  if (!isExpandable) {
+    return element.scrollHeight;
+  }
+
+  /*
+   * В режиме expandable мы назначаем контейнеру контента высоту 100%, что не даёт
+   * получить реальную высоту контента.
+   * Поэтому мы пересчитываем высоту, временно устанавливая height: auto;
+   * */
+  const currentHeightStyle = element.style.height;
+  element.style.height = 'auto';
+
+  const elementHeight = element.scrollHeight;
+  element.style.height = currentHeightStyle;
+
+  return elementHeight;
+}