Q-table with Grid mode not scrolling

[CWoodman]

I have a q-table that takes up the entire page. In normal mode it scrolls fine, but on small screens when it switches to grid mode, it does not scroll.

Here’s my code:

<div class="q-pa-none col">
      <!-- 'non-selectable' class prevents selecting text. Can still select a row -->
      <q-table class="sticky-header full-width full-height non-selectable"
        ref="table"
        dense
        flat
        square
        :grid="$q.screen.lt.sm"
        virtual-scroll
        :virtual-scroll-sticky-size-start="30"
        :virtual-scroll-sticky-size-end="30"
        :rows-per-page-options="[0]"
        :pagination.sync="pagination"
        :data="tableItems"
        :columns="columns"
        row-key="name"
        selection="single"
        :selected.sync="selectedRow"
        :sort-method="customSort"
        :filter="searchTerm"
        no-data-label="No items match filter and category setting"
      >
        <template v-slot:header="props">
        <q-tr :props="props">
          <q-th></q-th> <!-- leave space for icon -->
          <q-th v-for="col in props.cols" :key="col.name" :props="props">
            {{ col.label }}
          </q-th>
        </q-tr>
      </template>
        <template v-slot:body="props">
          <q-tr class="cursor-pointer" :props="props"
          @click.native="selectRow(props.row, $event)">
            <q-td auto-width>
              <q-icon size="xs" :name="props.row.icon.name" :color="props.row.icon.color" />
            </q-td>
            <q-td auto-width v-for="col in props.cols" :key="col.name" :props="props">
              {{ col.value }}
            </q-td>
          </q-tr>
        </template>
        <template v-slot:bottom>
          <div class="row" style="width: 100%">
            <div class="col-8">
              <div v-if="searchTerm">
                <div v-if="inCategoryName === allCategories">
                  Showing search result {{ stockStatus }} in all categories
                </div>
                <div v-else>
                  Showing search result {{ stockStatus }} in category: <b>{{ inCategoryName }}</b>
                </div>
              </div>
              <div v-else>
                <div v-if="inCategoryName === allCategories">
                  Showing {{  tableItems.length }} items {{ stockStatus }} in all categories
                </div>
                <div v-else>
                  Showing {{  tableItems.length }} items {{ stockStatus }} in category: <b>{{ inCategoryName }}</b>
                </div>
              </div>
            </div>
            <div class="col">
              <div>
                Total value: {{ totalValueDisplay }}
              </div>
            </div>
          </div>
        </template>
      </q-table>
    </div>

Any help will be appreciated.

[CWoodman]

OK, found the solution - I just enclosed the table in a q-scroll-area when in mobile.