How to Make Ant Design Modal Full-Screen for iPad?

Question

I'm working on a React project using Ant Design and I need to make a modal full-screen when viewed on an iPad. I've tried several approaches to achieve this, but I'm still facing issues with getting the modal to properly scale to full-screen on iPad devices.

// ... imports

const StyledModal = styled(Modal)`
  .ant-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
  }
`;

function CustomListTable({ dataList, query, itemId }: { dataList: DataType[]; query: string; itemId: string }) {
  const [data, setData] = useState<DataType[]>([]);
  const [isModalVisible, setModalVisible] = useState(false);
  const [selectedItem, setSelectedItem] = useState<DataType | null>(null);
  const router = useRouter();

  useEffect(() => {
    // Filtering logic
    if (itemId) {
   ...
    }
  }, [dataList, query, itemId]);

  const handleItemClick = (item: DataType) => {
...
  };

  const handleCloseModal = () => {
  ...
  };

  // Columns setup for CustomTable
  const columns = [
    // ... column definitions
  ];

  return (
    <>
      <CustomTable data={data} columns={columns} />
      <StyledModal open={isModalVisible} onCancel={handleCloseModal} footer={null}>
        {selectedItem && <FullScreenComponent item={selectedItem} />}
      </StyledModal>
    </>
  );
}

export default CustomListTable;

Answer 1

Try this

const StyledModal = styled(Modal)`
  height: 100vh;
  max-width: 100vw !important;
  top: 0;
  padding: 0;
  margin: 0 !important;
  .ant-modal-content {
    height: 100%;
    border-radius: 0;
  }
`;

You can use the useBreakpoint to make modal fullscreen in iPad only

https://ant.design/components/grid#components-grid-demo-usebreakpoint

https://ant.design/components/layout#breakpoint-width

{
  xs: '480px',
  sm: '576px',
  md: '768px',
  lg: '992px',
  xl: '1200px',
  xxl: '1600px',
}

import { Grid } from "antd";
const { useBreakpoint } = Grid;

const App = () => {
   const screens = useBreakpoint();
   const { xl } = screens;

   
   if(xl === false) {
      // This case occur when width < xl (1200px)
      // return the fullscreen Modal
   }

   // return normal Modal
}

Full code:

https://codesandbox.io/p/sandbox/customize-footer-buttons-props-antd-5-13-3-forked-jqpfjz?file=%2Fdemo.tsx%3A20%2C1-20%2C11

Preview: https://jqpfjz.csb.app/