Fix table resizing (#416)

src/components/v-table/table-header/table-header.vue

@@ -233,7 +233,7 @@ export default defineComponent({
 		border-bottom: 2px solid var(--border-subdued);
 
 		&.select,
-		&.sort {
+		&.manual {
 			display: flex;
 			align-items: center;
 		}

src/components/v-table/table-row/table-row.vue

@@ -3,6 +3,10 @@
 		class="table-row"
 		:class="{ subdued, clickable: hasClickListener }"
 		@click="$emit('click', $event)"
+		:style="{
+			'--table-row-height': height + 2 + 'px',
+			'--table-row-line-height': height + 'px',
+		}"
 	>
 		<td v-if="showManualSort" class="manual cell">
 			<v-icon
@@ -19,7 +23,6 @@
 			:class="getClassesForCell(header)"
 			v-for="header in headers"
 			:key="header.value"
-			:style="{ height: height + 'px', lineHeight: height - 2 + 'px' }"
 		>
 			<slot :name="`item.${header.value}`" :item="item">{{ item[header.value] }}</slot>
 		</td>
@@ -100,22 +103,23 @@ export default defineComponent({
 <style lang="scss" scoped>
 .table-row {
 	.cell {
+		height: var(--table-row-height);
 		padding: 0 0 0 12px;
 		overflow: hidden;
+		line-height: var(--table-row-line-height);
 		white-space: nowrap;
 		text-overflow: ellipsis;
 		background-color: var(--background-page);
 		border-bottom: 2px solid var(--border-subdued);
 
-		&.select,
-		&.sort {
-			display: flex;
-			align-items: center;
-		}
-
 		&:last-child {
 			padding: 0 12px 0 12px;
 		}
+
+		&.select {
+			display: flex;
+			align-items: center;
+		}
 	}
 
 	&.subdued .cell {

src/components/v-table/v-table.story.ts

@@ -11,6 +11,8 @@ import { defineComponent } from '@vue/composition-api';
 
 Vue.component('v-table', VTable);
 
+import RawValue from '../../../.storybook/raw-value.vue';
+
 export default {
 	title: 'Components / Table',
 	component: VTable,
@@ -844,6 +846,7 @@ export const serverSort = () => ({
 });
 
 export const dragNDrop = () => ({
+	components: { RawValue },
 	data() {
 		return {
 			headers: [
@@ -910,13 +913,10 @@ export const dragNDrop = () => ({
 			:headers.sync="headers"
 			:items.sync="items"
 			:sort.sync="sort"
-			@drop="onDrop"
 			item-key="id"
 			show-manual-sort
 		/>
-				<pre style="max-width: max-content; margin-top: 20px; background-color: #eee; font-family: monospace; padding: 0.5rem; border-radius: 8px;">
-items: {{ items }}
-		</pre>
+		<raw-value label="items">{{ items }}</raw-value>
 	</div>
 	`,
 });

src/components/v-table/v-table.vue

@@ -249,12 +249,12 @@ export default defineComponent({
 		const columnStyle = computed<string>(() => {
 			let gridTemplateColumns = _headers.value
 				.map((header) => {
-					return header.width ? `${header.width}px` : 'min-content';
+					return header.width ? `${header.width}px` : '160px';
 				})
 				.reduce((acc, val) => (acc += ' ' + val), '');
 
-			if (props.showSelect) gridTemplateColumns = 'auto ' + gridTemplateColumns;
-			if (props.showManualSort) gridTemplateColumns = 'auto ' + gridTemplateColumns;
+			if (props.showSelect) gridTemplateColumns = '36px ' + gridTemplateColumns;
+			if (props.showManualSort) gridTemplateColumns = '36px ' + gridTemplateColumns;
 
 			gridTemplateColumns = gridTemplateColumns + ' 1fr';
 
@@ -332,17 +332,18 @@ export default defineComponent({
 	overflow-y: auto;
 
 	table {
-		display: grid;
-		grid-template-columns: var(--grid-columns);
 		min-width: 100%;
 		border-collapse: collapse;
 		border-spacing: 0;
 
+		tbody {
+			display: contents;
+		}
+
 		::v-deep {
-			tbody,
-			thead,
 			tr {
-				display: contents;
+				display: grid;
+				grid-template-columns: var(--grid-columns);
 			}
 
 			td,