Opening modal changes my underlying page container width

[dprothero]

I'm seeing strange behavior as illustrated in this video. When a modal is opened, the width of my page container is changing. Can anyone think of anything off the top of their head that might cause this or point me in a direction to debug?

import React, { useLayoutEffect, useState } from 'react';
import { useUID } from '@twilio-paste/core/uid-library';
import { Box } from '@twilio-paste/core/box';
import { Button } from '@twilio-paste/core/button';
import { Modal, ModalBody } from '@twilio-paste/core/modal';
import { SearchIcon } from '@twilio-paste/icons/esm/SearchIcon';

export default function PagefindSearchButton(): JSX.Element {
  const [isOpen, setIsOpen] = useState(false);
  const handleOpen = () => setIsOpen(true);
  const handleClose = () => setIsOpen(false);
  const searchElementID = `search${useUID()}`;
  const searchElementRef = React.useRef<HTMLDivElement>(null);

  const noop = (): void => {
    // Empty cleanup function
  };

  useLayoutEffect(() => {
    if (!isOpen) return noop;

    const timeoutId = setTimeout(() => {
      // eslint-disable-next-line no-new
      new PagefindUI({
        element: `#${searchElementID}`,
        showImages: false,
        resetStyles: false,
        showEmptyFilters: false,
        bundlePath: '/client-scripts/', // use our custom API wrapper
      });
    });

    return () => clearTimeout(timeoutId);
  }, [isOpen, searchElementID, searchElementRef]);

  return (
    <>
      <Box
        display="flex"
        alignItems="flex-end"
        columnGap="space50"
        marginLeft="space100"
      >
        <Button
          variant="secondary"
          disabled={false}
          onClick={handleOpen}
        >
          <SearchIcon
            decorative={true}
            title="Search"
          />
          Search...
        </Button>
      </Box>
      <Modal
        ariaLabelledby={searchElementID}
        isOpen={isOpen}
        onDismiss={handleClose}
        size="wide"
      >
        <ModalBody>
          <div
            id={searchElementID}
            ref={searchElementRef}
          />
        </ModalBody>
      </Modal>
    </>
  );
}
PagefindSearchButton.displayName = 'PagefindSearchButton';

[dprothero]

It seems to be adding padding to the body, which is what's causing the issue.

None of which seems necessary... if I remove it, everything looks the way I would expect without modifying the layout of my page.

[dprothero]

More information: I have max-width: 1600px; on my body. If my window is resized smaller than that, I don't see the shifting.

[dprothero]

I set the max-width myself. It's modeled after how the twilio.com marketing website is formatted.

The source for that page is not super intuitive to grok because it's mainly controlled by Docusaurus. I can only add custom CSS and React components. The React component for the search button is above.

[SiTaggart]

As you deploy on Netlify, maybe you can share with us the preview deployment link? Can probably debug in the browser with the compiled code to start with.

[dprothero]

@SiTaggart https://deploy-preview-355--internal-product-docs.netlify.app/ - click the Search button in the upper right.

[TheSisb]

Hi @dprothero, our Modal is based on reach/Modal which hides the scrollbar when the modal is visible. This can sometimes cause these kinds of side effects when you have your own styles on the body tag. I'd generally recommend moving some styles around to fix the issue:

• Move the max-width: 1600px into the child of the body element. In this case you can add it to #__docusaurus or even its child under that.
• Give that same element margin: 0 auto

That seems to fix the issue in my inspector. Hope this helps!

[dprothero]

That did the trick @TheSisb !

[dprothero]

Answer from @TheSisb:

Hi @dprothero , our Modal is based on reach/Modal which hides the scrollbar when the modal is visible. This can sometimes cause these kinds of side effects when you have your own styles on the body tag. I'd generally recommend moving some styles around to fix the issue:

• Move the max-width: 1600px into the child of the body element. In this case you can add it to #__docusaurus or even its child under that.
• Give that same element margin: 0 auto

That seems to fix the issue in my inspector. Hope this helps!