Repository: directus/directus
File: app/src/components/v-table/v-table.vue (Vue)

Code before:
				:some-items-selected="someItemsSelected"
				:all-items-selected="allItemsSelected"
				:fixed="fixedHeader"
				:show-manual-sort="showManualSort"
				:must-sort="mustSort"
				:has-item-append-slot="hasItemAppendSlot"
				:manual-sort-key="manualSortKey"
				:allow-header-reorder="allowHeaderReorder"
				@toggle-select-all="onToggleSelectAll"
				@update:sort="updateSort"
			>
				<template v-for="header in internalHeaders" #[`header.${header.value}`]>
					<slot :header="header" :name="`header.${header.value}`" />
				</template>

				<template v-if="hasHeaderAppendSlot" #header-append>
					<slot name="header-append" />
				</template>

				<template v-if="hasHeaderContextMenuSlot" #header-context-menu="{ header }">
					<slot name="header-context-menu" v-bind="{ header }" />
				</template>
			</table-header>
			<thead v-if="loading" class="loading-indicator" :class="{ sticky: fixedHeader }">
				<tr>
					<th scope="colgroup" :style="{ gridColumn: fullColSpan }">
						<v-progress-linear v-if="loading" indeterminate />
					</th>
				</tr>
			</thead>
			<tbody v-if="loading && items.length === 0">
				<tr class="loading-text">
					<td :style="{ gridColumn: fullColSpan }">{{ loadingText }}</td>
				</tr>
			</tbody>
			<tbody v-if="!loading && items.length === 0">
				<tr class="no-items-text">
					<td :style="{ gridColumn: fullColSpan }">{{ noItemsText }}</td>
				</tr>
			</tbody>
			<draggable
				v-else
				v-model="internalItems"
				:item-key="itemKey"
				tag="tbody"
				handle=".drag-handle"
				:disabled="disabled || internalSort.by !== manualSortKey"
				:set-data="hideDragImage"
				v-bind="{ 'force-fallback': true }"
				@end="onSortChange"
			>

Review comment (suggestion):
```suggestion
				<tr :style="{ gridColumn: fullColSpan }">
					<th scope="colgroup">
```

It's the `loading-indicator` class that has the grid, so the gridColumn should be moved up to the `tr` to make sure the styling still works

Code after:
				:some-items-selected="someItemsSelected"
				:all-items-selected="allItemsSelected"
				:fixed="fixedHeader"
				:show-manual-sort="showManualSort"
				:must-sort="mustSort"
				:has-item-append-slot="hasItemAppendSlot"
				:manual-sort-key="manualSortKey"
				:allow-header-reorder="allowHeaderReorder"
				@toggle-select-all="onToggleSelectAll"
				@update:sort="updateSort"
			>
				<template v-for="header in internalHeaders" #[`header.${header.value}`]>
					<slot :header="header" :name="`header.${header.value}`" />
				</template>

				<template v-if="hasHeaderAppendSlot" #header-append>
					<slot name="header-append" />
				</template>

				<template v-if="hasHeaderContextMenuSlot" #header-context-menu="{ header }">
					<slot name="header-context-menu" v-bind="{ header }" />
				</template>
			</table-header>
			<thead v-if="loading" :class="{ sticky: fixedHeader }">
				<tr class="loading-indicator">
					<th scope="colgroup" :style="{ gridColumn: fullColSpan }">
						<v-progress-linear v-if="loading" indeterminate />
					</th>
				</tr>
			</thead>
			<tbody v-if="loading && items.length === 0">
				<tr class="loading-text">
					<td :style="{ gridColumn: fullColSpan }">{{ loadingText }}</td>
				</tr>
			</tbody>
			<tbody v-if="!loading && items.length === 0">
				<tr class="no-items-text">
					<td :style="{ gridColumn: fullColSpan }">{{ noItemsText }}</td>
				</tr>
			</tbody>
			<draggable
				v-else
				v-model="internalItems"
				:item-key="itemKey"
				tag="tbody"
				handle=".drag-handle"
				:disabled="disabled || internalSort.by !== manualSortKey"
				:set-data="hideDragImage"
				v-bind="{ 'force-fallback': true }"
				@end="onSortChange"
			>