fix(VDataTableVirtual): avoid scroll glitches with expanded rows

[J-Sek]

Description

fixes #20457

TODO:

• discussion around PoC approach
• are we missing some code that would reset sizes[index] when collapsed?
• minor cleanup

Markup:

<template>
  <v-app>
    <v-data-table-virtual
      :headers="headers"
      :items="items"
      height="400"
      item-value="id"
      show-expand
    >
      <template #expanded-row="{ itemRef }">
        <tr :ref="itemRef">
          <td :colspan="headers.length + 1">
            <div v-for="subItem in subItems" :key="subItem.id">
              {{ subItem.name }}
            </div>
          </td>
        </tr>
      </template>
    </v-data-table-virtual>
  </v-app>
</template>

<script setup>
  const subItems = Array.from({ length: 20 })
    .map((_, index) => ({
      id: index + 1,
      name: `ID ${index + 1}`,
    }))

  const items = [
    ...Array.from({ length: 200 }, (_, index) => ({
      id: index + 1,
      name: `Version ${index + 1}`,
      status: 'Active',
      date: '2024-03-20',
    })),
  ]

  const headers = [
    { title: 'Name', key: 'name' },
    { title: 'Status', key: 'status' },
    { title: 'Date', key: 'date' },
  ]
</script>