Vue, Vuetify, CSS. I can't scroll all the way to the left, is there a way to do it?

Question

I am working on a Vue component that displays a cinema hall. (the seats in the theater). I want the seats to be generated dynamically and for each row to be able to have a different amount of seats in it. This is the component code so far:

<template>
  <div>
    <v-container fluid class="ma-0 pa-0 justify-center" style="height: 100vh">
      <div class="overflow-x-auto mx-3" id="seats">
        <div class="screen mx-auto">
          <p class="text-center">Screen</p>
        </div>

        <div class="seats d-flex flex-column justify-center">
          <v-row
            class="justify-center flex-nowrap ma-0"
            v-for="row in hall"
            :key="row.rowNum"
          >
            <div
              class="seat available text-center"
              v-for="(seat, index) in row.seats"
              v-text="index + 1"
              :key="index"
            ></div>
          </v-row>
        </div>
      </div>
    </v-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hall: [
        { rowNum: 1, seats: 30 },
        { rowNum: 2, seats: 15 },
        { rowNum: 3, seats: 14 },
        { rowNum: 4, seats: 20 },
        { rowNum: 5, seats: 25 },
        { rowNum: 6, seats: 30 },
        { rowNum: 7, seats: 35 },
      ],
    };
  },
};
</script>

<style lang="css">
body {
  margin: 0;
  padding: 0;
  width: 100vw;
}

.screen {
  background-color: #2b6282;
  width: 63vw;
}

.screen p {
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
}

.seats {
  margin-top: 3rem;
  height: 100%;
}

.seat {
  display: block;
  background-color: #2d4d86;
  color: white;
  margin: 0.15%;
  font-weight: bold;
  width: 1.7rem !important;
}
</style>

---EDIT---

Here is the App component, which uses the Hall component:

<template>
  <v-app>
    <Hall style="z-index:999"/>
  </v-app>
</template>

<script>
import Hall from "./components/Hall.vue";

export default {
  name: "App",

  components: {
    Hall,
    NavBar,

  },
};
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300&display=swap');

html {
  overflow: hidden !important;
  background: #121212;
}

#app {
  margin: 0;
  font-family: 'Heebo';
}
</style>

---END OF EDIT---

The problem I'm facing is this: The intended use of the component is mobile. Whenever I switch to mobile view, I want to be able to scroll so that I could see all the seats instead of scaling them down. But when I try to scroll to the left, some elements are pushed out of the screen and are unreachable.

The component in normal mode (desktop view)

I can scroll all the way to the right (mobile view)

But not to the left (mobile view)

As you can see from the pictures, the last row of seats is the most obvious, as I cannot see past seat number 12.

How can I fix this?