I’m having a table with multiple rows and columns on Svelte. It can resize fine on desktop using the devtool, but when I try it on my phone and tablet the rows get very tall.

this is the code for the table

#seat-table {
    width: 100%;
}

.seat {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;

    aspect-ratio: 1/1;
    border-radius: 0.3rem;
    cursor: pointer;

    img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    &:hover {
        transform: scale(1.1);
    }
}

and this is for the parent container

.main-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;

    width: 100%;
    max-width: 800px;
}

This resizes fine

iPhone 7

iPad Air 5

The site is live on https://seatbox.vercel.app and the full code is on https://github.com/PatatoBit/seatbox