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
<table id="seat-table"><tbody> {#each ['A', 'B', 'C', 'D'] as rowLetter}<tr> {#each [1, 2, 3] as rowSeat}<!-- content here --><Seat bind:seats seatPosition={`${rowLetter}${rowSeat}`} /> {/each}<div class="block"></div> {#each [4, 5, 6] as rowSeat}<!-- content here --><Seat bind:seats seatPosition={`${rowLetter}${rowSeat}`} /> {/each}<div class="block"></div> {#each [7, 8, 9] as rowSeat}<!-- content here --><Seat bind:seats seatPosition={`${rowLetter}${rowSeat}`} /> {/each}</tr> {/each}</tbody></table><style lang="scss"> #seat-table { width: 100%; } .block { width: 50px; height: 50px; }</style>And this is for the individual seat
<td><button class="seat" on:click={() => addOrRemove(seatPosition)}> {#if seats.includes(seatPosition)}<img src="/icons/selectedCheck.svg" alt="Seat {seatPosition} Selected" /> {:else}<img src="/icons/seatIcon.png" alt="Seat {seatPosition}" /> {/if}</button></td><style lang="scss"> .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); } } button { all: unset; }</style>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