diff --git a/packages/vscode/src/dialog.scss b/packages/vscode/src/dialog.scss
index 936c28c31..46238d9b1 100644
--- a/packages/vscode/src/dialog.scss
+++ b/packages/vscode/src/dialog.scss
@@ -1,87 +1,88 @@
 .dialog {
-    --primary: #2A2E37;
-    --border: black;
-    --faded: #a0a1a5;
-    --header-background: #161616;
-    --header-foreground: white;
-    --list-active-selection-background: rgb(0, 120, 160);
-    --list-active-selection-foreground: white;
-    --list-hover-background: rgb(36, 39, 46);
-    font-family: inherit;
-    box-shadow: 0 18px 80px 10px rgba(0, 0, 0, 0.1);
-    background-color: var(--primary);
-    display: flex;
-    flex-direction: column;
-    user-select: none;
-    overflow: hidden;
+	--primary: #2A2E37;
+	--border: black;
+	--faded: #a0a1a5;
+	--header-background: #161616;
+	--header-foreground: white;
+	--list-active-selection-background: rgb(0, 120, 160);
+	--list-active-selection-foreground: white;
+	--list-hover-background: rgb(36, 39, 46);
+	font-family: inherit;
+	box-shadow: 0 18px 80px 10px rgba(0, 0, 0, 0.1);
+	background-color: var(--primary);
+	display: flex;
+	flex-direction: column;
+	user-select: none;
+	overflow: hidden;
 	border-radius: 5px;
-	
+
 	.monaco-tl-twistie {
 		display: none;
 	}
 
-    .title {
-        background-color: var(--header-background);
-        color: var(--header-foreground);
-        padding: 1px;
-        font-size: 11px;
-        font-weight: normal;
-        text-transform: uppercase;
-        white-space: nowrap;
-        padding-left: 10px;
-    }
+	.title {
+		background-color: var(--header-background);
+		color: var(--header-foreground);
+		padding: 1px;
+		font-size: 11px;
+		font-weight: normal;
+		text-transform: uppercase;
+		white-space: nowrap;
+		padding-left: 10px;
+	}
 
-    .nav {
-        display: flex;
-        flex-direction: row;
-        padding: 4px;
-        padding-top: 8px;
-        padding-bottom: 8px;
-        border-bottom: 1px solid var(--border);
-        min-height: 32px;
-    }
+	.nav {
+		display: flex;
+		flex-direction: row;
+		padding: 4px;
+		padding-top: 8px;
+		padding-bottom: 8px;
+		border-bottom: 1px solid var(--border);
+		min-height: 32px;
+	}
 
-    .path {
-        display: flex;
-        flex-direction: row;
+	.path {
+		display: flex;
+		flex-direction: row;
 
-        .path-part {
-            padding: 5px;
-            border-radius: 3px;
-            font-size: 1.2em;
-            cursor: pointer;
+		.path-part {
+			padding: 5px;
+			border-radius: 3px;
+			font-size: 1.2em;
+			cursor: pointer;
 
-            &:not(:first-child) {
-                margin-left: 5px;
-            }
+			&:not(:first-child) {
+				margin-left: 5px;
+			}
 
-            &.active {
-                font-weight: bold;
-                color: var(--list-active-selection-foreground);
-            }
-        }
-    }
+			&.active {
+				font-weight: bold;
+				color: var(--list-active-selection-foreground);
+			}
+		}
+	}
 
-    .file-area {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
+	.dialog-grid {
+		display: grid;
+		grid-template-columns: 2fr 0.2fr 0.8fr;
+	}
 
-        .dialog-grid {
-            display: grid;
-            grid-template-columns: 2fr 0.2fr 0.8fr;
-        }
+	.headings {
+		padding: 8px;
+		font-size: 12px;
+	}
 
-        .headings {
-            padding: 8px;
-            font-size: 12px;
-        }
+	.file-area {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
 
-        .dialog-entry {
-            cursor: pointer;
-            font-size: 1.2em;
-            padding: 0px;
-            padding-left: 8px;
+		.dialog-entry {
+			cursor: pointer;
+			font-size: 1.2em;
+			padding: 0px;
+			padding-left: 8px;
 			padding-right: 8px;
 
 			.dialog-entry-info {
@@ -89,58 +90,56 @@
 				flex-direction: row;
 			}
 
-            .dialog-entry-icon {
-                width: 16px;
-                height: 19px;
-                display: inline-block;
-                margin-right: 5px;
-                margin-bottom: -3px;
-            }
+			.dialog-entry-icon {
+				width: 16px;
+				height: 19px;
+				margin-right: 5px;
+			}
 
-            &:hover {
-                background-color: var(--list-hover-background);
-            }
+			&:hover {
+				background-color: var(--list-hover-background);
+			}
 
-            &.active {
-                background-color: var(--list-active-selection-background);
-                color: var(--list-active-selection-foreground);
-            }
-        }
-    }
+			&.active {
+				background-color: var(--list-active-selection-background);
+				color: var(--list-active-selection-foreground);
+			}
+		}
+	}
 
-    .buttons {
-        display: flex;
-        flex-direction: row;
-        padding: 10px;
-        position: relative;
-        background: var(--primary);
-        border-top: 1px solid var(--border);
+	.buttons {
+		display: flex;
+		flex-direction: row;
+		padding: 10px;
+		position: relative;
+		background: var(--primary);
+		border-top: 1px solid var(--border);
 
-        button:first-child {
-            margin-left: auto;
-            margin-right: 10px;
-        }
+		button:first-child {
+			margin-left: auto;
+			margin-right: 10px;
+		}
 
-        button {
-            background: transparent;
-            outline: none;
-            border: 0;
-            color: var(--faded);
-            padding: 10px;
-            padding-left: 18px;
-            padding-right: 18px;
-            transition: 150ms background ease, 150ms color ease;
-            cursor: pointer;
-            border-radius: 5px;
+		button {
+			background: transparent;
+			outline: none;
+			border: 0;
+			color: var(--faded);
+			padding: 10px;
+			padding-left: 18px;
+			padding-right: 18px;
+			transition: 150ms background ease, 150ms color ease;
+			cursor: pointer;
+			border-radius: 5px;
 
-            &:hover {
-                background: var(--titlebar);
-                color: white;
-            }
-        }
-    }
+			&:hover {
+				background: var(--titlebar);
+				color: white;
+			}
+		}
+	}
 }
 
 .monaco-shell .monaco-tree.focused.no-focused-item:focus:before, .monaco-shell .monaco-list:not(.element-focused):focus:before {
 	display: none;
-}
\ No newline at end of file
+}
diff --git a/packages/vscode/src/dialog.ts b/packages/vscode/src/dialog.ts
index 4f2e7bfb7..1f7f51643 100644
--- a/packages/vscode/src/dialog.ts
+++ b/packages/vscode/src/dialog.ts
@@ -167,10 +167,6 @@ class Dialog {
 		navItems.appendChild(this.pathNode);
 		this.root.appendChild(navItems);
 
-		const fileAreaNode = document.createElement("div");
-		fileAreaNode.classList.add("file-area");
-		fileAreaNode.classList.add("show-file-icons");
-
 		const headingsNode = document.createElement("div");
 		headingsNode.className = "headings dialog-grid";
 		["Name", "Size", "Last Modified"].forEach(e => {
@@ -178,10 +174,14 @@ class Dialog {
 			header.innerText = e;
 			headingsNode.appendChild(header);
 		});
+		this.root.appendChild(headingsNode);
+
+		const fileAreaNode = document.createElement("div");
+		fileAreaNode.classList.add("file-area");
+		fileAreaNode.classList.add("show-file-icons");
 
 		this.filesNode = document.createElement("div");
 		this.filesNode.className = "files-list";
-		fileAreaNode.appendChild(headingsNode);
 		this.entryList = new ObjectTree<DialogEntry, string>(this.filesNode, {
 			getHeight: (entry: DialogEntry): number => {
 				return 20;