Размер строки HTML-таблицы не изменяется на мобильном устройстве ⇐ CSS

[Anonymous]

У меня есть таблица с несколькими строками и столбцами в Svelte. Его размер можно легко изменить на рабочем столе с помощью инструмента разработчика, но когда я пробую это на своем телефоне и планшете, строки становятся очень высокими.
это код для таблицы

Код: Выделить всё

#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);
}
}

и это для родительского контейнера

Код: Выделить всё

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

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

Размер меняется нормально


iPhone 7


iPad Air 5


Сайт доступен по адресу https://seatbox.vercel.app, а полный код — по адресу https://github.com/PatatoBit/seatbox

Подробнее здесь: https://stackoverflow.com/questions/786 ... -on-mobile