Make column width "size" and "modified" dependent on seperate css custom properties

Currently the widths of the columns "size" and "modified" depend on the value of the custom property --row-height and are calculated as calc(var(--row-height) * 2) and calc(var(--row-height) * 2.5) respectively. This seems to make sense with the english words "size" and "modified" but not so much for translations like "Grootte" and "Aangepast". The later get abbreviated to "Gro..." and "Aange..." even on screens wide enough to show the words completely resulting in suboptimal useability.

In FileListVirtual.vue add/modify:

.files-list {
...
	// adapt these depending on the ui language
	--col-width-size: 12ch;
	--col-width-mtime: 15ch;
...

	.files-list__row-size {
		width: var(--col-width-size);
		// Right align content/text
		justify-content: flex-end;
	}

	.files-list__row-mtime {
		width: var(--col-width-mtime);
	}
}

Open FileListVirtual.vue and inspect the existing .files-list, .files-list__row-size, and .files-list__row-mtime styles. Replace the row-height-based widths with the specified custom properties and right-align the size content. Done means the size and modified columns use their independent widths and translated labels are not unnecessarily truncated.