Improve size column in dialogs

- Remove size from directories (often always 4K and not very useful).
- Format file sizes to be more human-readable.

packages/vscode/src/dialog.scss

@@ -79,9 +79,7 @@
 		.dialog-entry {
 			cursor: pointer;
 			font-size: 1.02em;
-			padding: 0px;
-			padding-left: 8px;
-			padding-right: 8px;
+			padding: 0px 8px;
 
 			.dialog-entry-info {
 				display: flex;
@@ -94,6 +92,14 @@
 				margin-right: 5px;
 			}
 
+			.dialog-entry-size {
+				text-align: right;
+			}
+
+			.dialog-entry-mtime {
+				padding-left: 8px;
+			}
+
 			&:hover {
 				background-color: var(--list-hover-background);
 			}

packages/vscode/src/dialog.ts

@@ -480,7 +480,7 @@ class DialogEntryRenderer implements ITreeRenderer<DialogEntry, string, DialogEn
 			start: 0,
 			end: node.filterData.length,
 		}] : []);
-		templateData.size.innerText = node.element.size.toString();
+		templateData.size.innerText = !node.element.isDirectory ? this.humanReadableSize(node.element.size) : "";
 		templateData.lastModified.innerText = node.element.lastModified;
 
 		// We know this exists because we created the template.
@@ -498,4 +498,16 @@ class DialogEntryRenderer implements ITreeRenderer<DialogEntry, string, DialogEn
 	public disposeTemplate(_templateData: DialogEntryData): void {
 		// throw new Error("Method not implemented.");
 	}
+
+	/**
+	 * Given a positive size in bytes, return a string that is more readable for
+	 * humans.
+	 */
+	private humanReadableSize(bytes: number): string {
+		const units = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+		const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1000)), units.length - 1);
+
+		return (bytes / Math.pow(1000, i)).toFixed(2)
+			+ " " + units[i];
+	}
 }