[Bug][FixedLayout] Сломана центровка внутри `View` > `Panel` на устройствах с бровкой в `landscape` режиме

[inomdzhon]

Описание

На устройствах с бровкой aka notch aka cutout в landscape режиме FixedLayout смещается влево.

Версия библиотеки

4.28.1

Шаги воспроизведения

Код для воспроизведения (обновил)

// @ts-nocheck
import React from "react";
import ReactDOM from "react-dom";
import { View, Panel, PanelHeader, AppRoot, AdaptivityProvider, ConfigProvider, SplitLayout, SplitCol, Group, Search, Div, FixedLayout, Separator } from "@vkontakte/vkui";
import "@vkontakte/vkui/dist/vkui.css";

function App() {
  return (
      <View activePanel="fixedLayout">
        <Panel id="fixedLayout">
          <PanelHeader>Fixed layout</PanelHeader>
          <Group>
            <FixedLayout vertical="top">
              <Search />
            </FixedLayout>
            <Div style={{ paddingTop: 60, paddingBottom: 60, color: "gray" }}>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a
              sollicitudin lectus, a commodo sapien. Vivamus a urna leo. Integer
              iaculis dignissim urna, sit amet vestibulum diam bibendum a. Donec
              eu arcu ut augue porttitor faucibus. Vestibulum nec pretium
              tortor, sit amet congue nunc. Aenean ullamcorper ex sem, sed
              interdum quam consequat et. Vestibulum a ex non diam fringilla
              feugiat. Nunc eu tellus sed leo elementum cursus. Mauris blandit
              porta egestas. Curabitur eget justo elementum, malesuada lacus ut,
              congue mauris. Integer orci nisi, convallis vitae dapibus sit
              amet, molestie a risus. Aenean ultricies lacus eros, sit amet
              condimentum urna malesuada et. Sed quis dolor tempus orci
              fringilla volutpat in sed velit. Aenean aliquet bibendum pretium.
            </Div>
            <FixedLayout filled vertical="bottom">
              <Separator wide />
              <Div>Fixed layout (bottom)</Div>
            </FixedLayout>
          </Group>
        </Panel>
      </View>
  );
}

ReactDOM.render(
  <ConfigProvider>
    <AdaptivityProvider>
      <AppRoot>
        <App />
      </AppRoot>
    </AdaptivityProvider>
  </ConfigProvider>,
  document.getElementById("root")
);

Также в <meta name="viewport> должен быть параметр viewport-fit=cover

Пример: <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, viewport-fit=cover" />

Для примера возьму iPhone 12 Pro

1. Переходим на страницу в Safari
2. Перворачиваем телефон в режим landscape

Ожидаемое поведение

FixedLayout отцентрован.

Скриншоты

---

Вроде правится вот так

[inomdzhon]

Тут информация почему именно на landscape https://github.com/VKCOM/VKUI/pull/2414#issuecomment-1103771690

[inomdzhon]

переоткрыл

читай подробности тут https://github.com/VKCOM/VKUI/pull/2472

[eolme]

Если просто отрицательный margin сделать с safe-area-inset-left/right проблема не уйдет?

[inomdzhon]

Если просто отрицательный margin сделать с safe-area-inset-left/right проблема не уйдет?

Годно 👍

Но, к сожалению, не всё так просто

FixedLayout может быть вложен не только в Panel, но и в другой компонент, который использует свои отступы

Вот скриншоты на примере Group

Рис. 1. Panel -> FixedLayout (⚠️ на скриншоте ошибочно подписал PanelHeader вместо Panel)

Рис. 2. Panel -> Group -> FixedLayout (⚠️ на скриншоте ошибочно подписал PanelHeader вместо Panel)

нужно аккумулировать все отступы получается

---

Возможно пришло время рассмотреть position: sticky, как в #2414 предлагали

Нашёл ещё одно предложение по решению https://github.com/VKCOM/VKUI/issues/1064