table showing white space instead of actual content on scrolling horizontally (only in mobile)

Question

when the page is rendered the first time the table is showing a part of the content then the rest of the width is white space and no content showing, if I use the pagination and go to page 2 then back to page 1, the table is all shown but then if I scroll to the right then back to the left it goes white again

here you can see the white space I'm talking about

and here's what should be there (and as I said I got this when I paginated to page 2 then back to 1)

I'm using Vuejs and BootstrapVue table. I don't know what other info would be useful here.

I don't even know where to start, because when I use chrome devtools to open mobile view, this problem doesn't occur.. I'm really clueless!

-- UPDATE --

here's the live link: https://business-abdal-dev.code95.info/ar/invoices/salary-invoices/details/ec599492-a622-ed11-8131-00224899ee26

and this is the code of the table:

            <b-table :items="paginatedData" :fields="fields">
              <template #cell()="data" v-if="invoice.details.status.key == 2">
                <div
                  class="edit-cell cursor-pointer"
                  v-if="data.field.editable"
                  @click="
                    data.item.startEdit = true;
                    inEditField = data.field.key;
                  "
                >
                  <input
                    class="form-control"
                    type="number"
                    min="0"
                    required
                    v-model="tableData[data.index][data.field.key]"
                    v-validate="'required|decimal|min:0'"
                    v-show="data.item.startEdit && inEditField == data.field.key"
                    :name="`${data.field.key}__${data.index}`"
                    :data-vv-as="data.field.label"
                    @blur="
                      setEditedValue(
                        data.item,
                        data.index,
                        data.field.key,
                        $event,
                        data.item.InvoiceDetailsId
                      )
                    "
                    @keydown.enter.prevent="
                      setEditedValue(
                        data.item,
                        data.index,
                        data.field.key,
                        $event,
                        data.item.InvoiceDetailsId,
                        data.field.equation
                      )
                    "
                  />

                  <span v-show="!data.item.startEdit || inEditField !== data.field.key">
                    {{ data.value }}
                  </span>
                  <template v-if="data.field.validate.length">
                    <div v-for="(rule, i) in data.field.validate" :key="i">
                      <span
                        v-if="
                          equationValues(data.item, rule.criteria, data.index)
                        "
                        class="text-danger font-12 bold"
                      >
                        {{ rule.errorMessage }}
                        {{
                          SetValidate(
                            data.index,
                            data.field.key,
                            equationValues(data.item, rule.criteria, data.index)
                          )
                        }}
                      </span>
                      <span v-else>
                        {{
                          SetValidate(
                            data.index,
                            data.field.key,
                            equationValues(data.item, rule.criteria, data.index)
                          )
                        }}
                      </span>
                    </div>
                  </template>
                  <span
                    v-if="errors.first(`${data.field.key}__${data.index}`)"
                    class="d-block text-danger font-12"
                  >
                    {{ errors.first(`${data.field.key}__${data.index}`) }}
                  </span>
                </div>
                <div class="has-equation" v-else-if="data.field.equation">
                  {{
                    (tableData[data.index][data.field.key] = equationValues(
                      data.item,
                      data.field.equation,
                      data.index
                    ))
                  }}
                  <div></div>
                </div>

                <div class="default-value" v-else>{{ data.value }}</div>
              </template>
            </b-table>