tailwindcss(headlessui)でModal表示するとfixedの中の中央揃え要素が右にずれる

Question

React x tailwindcssをベースにしたUIコンポーネントであるheadlessUIのDialog（Modal）コンポーネントを使って開発しています。Modalが開くと背景のスクロールを防ぐためにhtmlタグにoverflow: hidden; padding-right: 15px;が付与されます（padding-rightは消えたスクロールバーのズレを防ぐため）。

しかしfixedで上部固定しているヘッダーが中央揃え(mx-auto）のため、このpadding-rightにより中央位置がずれ、中の要素が右にずれます。

margin-leftを固定値にしてしまえば影響をうけないのですが、なるべく画面幅によらず綺麗に中央揃えにしたく。。良い解決方法はありませんでしょうか‥？

コード

// Layout.tsx
import { Popover, Transition } from '@headlessui/react';
import { InformationCircleIcon, MenuIcon, XIcon } from '@heroicons/react/outline';
import Image from 'next/image';
import Link from 'next/link';
import { Fragment, useState } from 'react';

export default function Layout() => {
  const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);

  function openLoginModal() {
    setIsLoginModalOpen(true)
  }

  return (
  <Popover className='fixed left-0 right-0 bg-white z-10'> <!-- ここがfiexdでwindow基準なので -->
        <div className='mx-auto max-w-7xl px-2 lg:px-4'> <!-- このmx-autoによる中心位置がずれる -->
          <div className='flex flex-col lg:flex-row lg:justify-end lg:items-center lg:h-24 lg:space-x-10'>
            <div className="flex justify-end lg:justify-start items-center h-14">
                <div className='flex flex-grow'>
                  <Link href='/' passHref>
                    <a className='flex items-center'>
                      <Image
                        className='w-auto h-8 sm:h-10 cursor-pointer'
                        src={logo}
                        alt=''
                        width='164'
                        height='48'
                      />
                    </a>
                  </Link>
                </div>
            </div>
            
            <div className="flex flex-row items-center justify-end space-x-10">
              <Popover.Group as='nav' className='hidden lg:flex space-x-10'>
                <a
                  href='https://example.com/about'
                  className='text-base font-medium text-gray-500 hover:text-gray-900'
                >
                  About
                </a>
              </Popover.Group>

              <div className='hidden lg:flex lg:flex-1 items-center'>
                  <LoginModal isOpen={isLoginModalOpen} setIsOpen={setIsLoginModalOpen}>
                    <button
                      className='mx-auto justify-center py-2 px-4 text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 rounded-md border border-transparent'
                      onClick={openLoginModal}
                    >
                      Sign in with Twitter
                    </button>
                  </LoginModal>
              </div>
            </div>
          </div>
        </div>
      </Popover>
    )
  }

LoginModal.tsxの中身はほぼそのままで、htmlにoverflow, padding-rightが付与されるのはheadlessuiの仕様です。

// LoginModal.tsx
import { Dialog, Transition } from '@headlessui/react'
import { Fragment } from 'react'
import TwitterSigninButton from './TwitterSigninButton'

export default function LoginModal({ isOpen, setIsOpen, children }) { 

  return (
    <>
      {children}
      <Transition.Root show={isOpen} as={Fragment}>
        <Dialog
          as="div"
          auto-reopen="true"
          className="fixed z-50 inset-0 overflow-y-auto"
          onClose={setIsOpen}
        >
          <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <Transition.Child
              as={Fragment}
              enter="ease-out duration-300"
              enterFrom="opacity-0"
              enterTo="opacity-100"
              leave="ease-in duration-200"
              leaveFrom="opacity-100"
              leaveTo="opacity-0"
            >
              <Dialog.Overlay className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
            </Transition.Child>

            {/* This element is to trick the browser into centering the modal contents. */}
            <span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">
              &#8203;
            </span>
            <Transition.Child
              as={Fragment}
              enter="ease-out duration-300"
              enterFrom="opacity-0 scale-95"
              enterTo="opacity-100 scale-100"
              leave="ease-in duration-200"
              leaveFrom="opacity-100 scale-100"
              leaveTo="opacity-0 scale-95"
            >
              <div className="inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white shadow-xl rounded-2xl">
                <Dialog.Title
                  as="h3"
                  className="text-lg font-medium leading-6 text-gray-900 mb-3"
                >
                  アカウント登録・ログイン
                </Dialog.Title>
                <div className="mt-2">
                  <p className="text-sm text-gray-500 mb-4">
                    アカウント登録、もしくはログインすると<a href="https://example.com/terms" target="_blank" rel="noreferrer" className="text-blue-400">利用規約</a>、<a href="https://example.com/privacy" target="_blank" rel="noreferrer" className="text-blue-400">プライバシーポリシー</a>に同意したものとみなされます。
                  </p>
                  <TwitterSigninButton />
                </div>
              </div>
            </Transition.Child>
          </div>
        </Dialog>
      </Transition.Root>
    </>
  )
}

環境

"next": "11.0.1",
"react": "17.0.2",
"@headlessui/react": "^1.4.0",
"tailwindcss": "^2.2.7",

試したこと

###htmlにoverflow: scroll; !importantを追加
常にスクロールバーを表示する方法ですが、fixed部分は確かに解消するものの、Modalの背面スクロールが可能になってしまうので本末転倒なのと、今度は今まで大丈夫だったfixed以外の要素がpadding-right: 15px;により左にずれます。

isLoginModalOpenによりcssクラスを出し分け

.scrollbar-padding {
  padding-right: 15px;
}

      <Popover className={isLoginModalOpen
        ? 'fixed left-0 right-0 bg-white z-10 scrollbar-padding'
        : 'fixed left-0 right-0 bg-white z-10'}>

このようにしてModalが出た時だけfixed要素に独自クラスを追加する方法。うまくいく場合はある（fixedの中の要素が微動だにしない）ものの、基本的にはスクロールバーの表示やhtmlへのpadding-right付与のタイミングとずれてより左右にガクガクなります。

isScrollbarShownステートを使って判定

上記を応用してスクロールバーの有無を判定してやろうと思いましたが、下記のコードでは常にfalseになり上手く行かず、、また中央揃えのためにわざわざ不安定なstateを増やすのもナンセンスと思い途中でやめました。。

const [isScrollbarShown, setIsScrollbarShown] = useState(null);

useEffect(() => {
  if( window.innerHeight >= document.documentElement.clientHeight ){
    //スクロールバー無し
    setIsScrollbarShown(false);
  } else {
    setIsScrollbarShown(true);
}, [isLoginModal])

調べたこと

headlessui github issue
https://github.com/tailwindlabs/headlessui/search?q=padding-right&type=issues
解決策はありませんでした。

Answer 1

htmlのスクロールバーを表示しない設定にすることで防ぎました。UX的にベストとは言えないですが。

Next.jsで<html>タグにクラスを当てるには_document.jsを用意します。
https://nextjs.org/docs/advanced-features/custom-document

またtailwindcssにはtailwind-scrollbar-hideライブラリがありますので、これを入れて_document.jsで<Html className='scrollbar-hide'>としてやるだけです。
https://www.npmjs.com/package/tailwind-scrollbar-hide

注意点として、_document.jsを追加したら一度サーバーを再起動しないと反映されません。