【Mantine】Modal内でAccordionを使った時、iOS Safari 15.4以上でハマった話

iOS Safari 15.4よりアドレスバーがタブバーへ変わりました。  
これにより`vh`で描画される範囲が変わり、困ったことがある方はいるのではないでしょうか。

今回ハマったのも`vh`が使用されていることによるハマりポイントだったので、解消方法を残しておきます。
## 再現コンテンツ
再現にはModal内でAccordionを使いつつ、コンテンツ量を多くしてスクロールを出す必要があるので、下記のような感じでカテゴリー > サブカテゴリーを選択する様なUIがあるとします。
![スクリーンショット 2023-05-17 15.02.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359978/d10ac2f5-9664-d412-9fd2-c2fded6f5d50.png)
Accordionを展開したときに、上記のようにPCだと問題なくすべて表示されますが、スマホだと下記のようにModalを一番下までスクロールしても、下の方が見切れてしまいます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359978/9494aec4-03bc-e150-d115-a1df2c4ff510.png" width="384">

**長いけどコード全体**
```jsx
import { Accordion, Button, List, Modal } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';

const NUM = 10;
const content = [...Array(NUM).keys()].map((i) => {
  const id = i + 1;

  return {
    id,
    name: `カテゴリー${id}`,
    subCategories: [...Array(NUM).keys()].map((j) => {
      const idx = j + i * NUM + 1;

      return {
        id: idx,
        name: `サブカテゴリー${idx}`,
      };
    }),
  };
});

export function Demo() {
  const [opened, { open, close }] = useDisclosure(false);

  return (
    <>
      <Button onClick={open}>Open Modal</Button>
      <Modal opened={opened} onClose={close} title="カテゴリーを選択">
        <Accordion>
          {content.map((i) => (
            <Accordion.Item key={i.id} value={String(i.id)}>
              <Accordion.Control>{i.name}</Accordion.Control>
              <Accordion.Panel>
                <List listStyleType="none">
                  {i.subCategories.map((j) => (
                    <List.Item key={j.id} p={5}>
                      {j.name}
                    </List.Item>
                  ))}
                </List>
              </Accordion.Panel>
            </Accordion.Item>
          ))}
        </Accordion>
      </Modal>
    </>
  );
}
```

### 原因
最初にも書いた様に、Modalのmax-heightが`vh`で指定されていることが原因でした。
![スクリーンショット 2023-05-17 15.03.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359978/df6ac816-0787-7935-2a13-68c85556396b.png)

```css
.mantine-Modal-content {
  max-height: calc(100vh - (5vh * 2));
}
```

### 解決方法
疑惑の箇所を`dvh`で指定することで解決しました。（スクロールが微妙につっかかる感じがあり、もっとよい解決方法はあるかと思いますが。。。）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/359978/583a4fa7-9702-c5f0-dd93-800a1b1d0655.png" width="384">
```tsx
<Modal
  opened={opened}
  onClose={close}
  title="カテゴリーを選択"
  styles={() => ({
    inner: {
      padding: '5dvh 5dvw !important',
    },
    content: {
      maxHeight: 'calc(100dvh - 5vh * 2) !important',
    },
  })}
>
```
挙動の確認は[こちら](https://mantine-modal.vercel.app/)から確認できるので、iPhoneで確認してみてください。
※ Android端末では未検証です。


厳密には下記あたりを修正もらう必要がありそうですが、[公式でサポートしてるブラウザ](https://mantine.dev/pages/about/#browser-support)では、iOS Safari 14.5以降となっており、[dvhが使えない](https://caniuse.com/?search=dvh)ため変更できない？と勝手に思っています🤔  
次期バージョンでの修正に期待します。

https://github.com/mantinedev/mantine/blob/master/src/mantine-core/src/Modal/ModalContent/ModalContent.tsx

https://github.com/mantinedev/mantine/blob/master/src/mantine-core/src/Modal/ModalRoot/ModalRoot.styles.ts

## 参考
https://webty.jp/staffblog/production/post-4651/

https://github.com/mantinedev/mantine/tree/master/src/mantine-core/src/Modal

## 最後に
### GoQSystemでは一緒に働いてくれる仲間を募集中です！
ご興味がある方は以下リンクよりご確認ください。

https://goqsystem.recruit.site/?qiita=ab3f791ba7156a58beb4