From 5bb226e7550c4e7c57029ebb94010979e128fc5a Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 12:23:29 -0400
Subject: [PATCH 01/11] simplify everything

---
 packages/editor/src/lib/Workspace.svelte.ts   |  7 ++
 packages/editor/src/lib/codemirror.css        |  2 +
 .../src/lib/Input/ComponentSelector.svelte    | 91 ++++++-------------
 3 files changed, 37 insertions(+), 63 deletions(-)

diff --git a/packages/editor/src/lib/Workspace.svelte.ts b/packages/editor/src/lib/Workspace.svelte.ts
index 3c8cbe1a8a..c3ad11760a 100644
--- a/packages/editor/src/lib/Workspace.svelte.ts
+++ b/packages/editor/src/lib/Workspace.svelte.ts
@@ -206,6 +206,8 @@ export class Workspace {
 		if (is_file(item)) {
 			this.#select(item);
 			this.#onreset?.(this.#files);
+
+			this.modified[item.name] = true;
 		}
 
 		return item;
@@ -320,6 +322,11 @@ export class Workspace {
 			this.#select(new_item as File);
 		}
 
+		if (this.modified[previous.name]) {
+			delete this.modified[previous.name];
+			this.modified[name] = true;
+		}
+
 		this.#onreset?.(this.#files);
 	}
 
diff --git a/packages/editor/src/lib/codemirror.css b/packages/editor/src/lib/codemirror.css
index 66c8a75428..5ab18f360e 100644
--- a/packages/editor/src/lib/codemirror.css
+++ b/packages/editor/src/lib/codemirror.css
@@ -8,6 +8,8 @@
 	height: 100%;
 
 	&.cm-focused {
+		outline: none;
+
 		.cm-cursor {
 			border-left-color: var(--sk-fg-3);
 		}
diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index 5ec4e75fc1..6d70298a57 100644
--- a/packages/repl/src/lib/Input/ComponentSelector.svelte
+++ b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { forcefocus } from '@sveltejs/site-kit/actions';
-	import { tick } from 'svelte';
 	import RunesInfo from './RunesInfo.svelte';
 	import Migrate from './Migrate.svelte';
 	import type { Workspace, File } from 'editor';
@@ -14,39 +12,18 @@
 
 	let { runes, onchange, workspace, can_migrate }: Props = $props();
 
-	let editing_name: string | null = $state(null);
-	let input_value = $state('');
+	let input_value = $state(workspace.current.name);
 
-	function select_file(filename: string) {
-		if (workspace.current.name !== filename) {
-			editing_name = null;
-			workspace.select(filename);
-		}
-	}
-
-	function edit_tab(file: File) {
-		if (workspace.current.name === file.name) {
-			editing_name = file.name;
-			input_value = file.name;
-		}
-	}
-
-	async function close_edit() {
-		if (input_value === editing_name) {
+	async function close_edit(file: File) {
+		if (input_value === file.name) {
 			// nothing to do
-			editing_name = null;
 			return;
 		}
 
-		const edited_file = (workspace.files as File[]).find((val) => val.name === editing_name);
-		if (!edited_file) return; // TODO can this happen?
+		const deconflicted = deconflict(input_value, file);
 
-		const deconflicted = deconflict(input_value, edited_file);
-
-		workspace.rename(edited_file, deconflicted);
+		workspace.rename(file, deconflicted);
 		workspace.focus();
-
-		editing_name = null;
 	}
 
 	function deconflict(name: string, file?: File) {
@@ -81,9 +58,7 @@
 			text: true
 		});
 
-		editing_name = file.name;
 		input_value = file.name;
-
 		onchange();
 	}
 
@@ -97,16 +72,18 @@
 	<div class="file-tabs">
 		{#each workspace.files as File[] as file, index (file.name)}
 			<div
-				id={file.name}
 				class="button"
 				role="button"
 				tabindex="0"
-				class:active={file.name === workspace.current.name}
-				class:draggable={file.name !== editing_name && index !== 0}
+				class:active={file === workspace.current}
+				class:draggable={file !== workspace.current && index !== 0}
 				class:drag-over={file === dragover}
-				onclick={() => select_file(file.name)}
-				onkeyup={(e) => e.key === ' ' && select_file(file.name)}
-				draggable={file.name !== editing_name}
+				onclick={() => {
+					workspace.select(file.name);
+					input_value = file.name;
+				}}
+				onkeyup={(e) => e.key === ' ' && workspace.select(file.name)}
+				draggable={file !== workspace.current}
 				ondragstart={() => (dragging = file)}
 				ondragover={(e) => (e.preventDefault(), (dragover = file))}
 				ondragleave={(e) => (e.preventDefault(), (dragover = null))}
@@ -120,26 +97,23 @@
 			>
 				<i class="drag-handle"></i>
 
-				{#if file.name === 'App.svelte'}
-					<div class="uneditable">
-						App.svelte{#if workspace.modified[file.name]}*{/if}
-					</div>
-				{:else if file.name === editing_name}
-					<span class="input-sizer">
-						<span style="color: transparent">{input_value}</span>
-					</span>
+				<span class:editable={file.name !== 'App.svelte'}>
+					{(file === workspace.current && file.name !== 'App.svelte' ? input_value : file.name) +
+						(workspace.modified[file.name] ? '*' : '')}
+				</span>
 
+				{#if file === workspace.current && file.name !== 'App.svelte'}
 					<!-- svelte-ignore a11y_autofocus -->
 					<input
-						use:forcefocus
 						spellcheck={false}
 						bind:value={input_value}
 						onfocus={async (event) => {
 							const input = event.currentTarget;
-							await tick();
-							input.select();
+							setTimeout(() => {
+								input.select();
+							});
 						}}
-						onblur={close_edit}
+						onblur={() => close_edit(file)}
 						onkeydown={(e) => {
 							if (e.key === 'Enter') {
 								e.preventDefault();
@@ -147,15 +121,6 @@
 							}
 						}}
 					/>
-				{:else}
-					<div
-						class="editable"
-						title="edit component name"
-						onclick={() => edit_tab(file)}
-						onkeyup={(e) => e.key === ' ' && edit_tab(file)}
-					>
-						{file.name}{#if workspace.modified[file.name]}*{/if}
-					</div>
 
 					<span
 						class="remove"
@@ -264,9 +229,9 @@
 		position: absolute;
 		width: 100%;
 		border: none;
-		color: var(--sk-fg-accent);
 		outline: none;
-		background-color: transparent;
+		background-color: inherit;
+		color: inherit;
 		top: 0;
 		left: 0;
 		height: 100%;
@@ -275,12 +240,12 @@
 		justify-content: center;
 		font-family: var(--sk-font-family-ui);
 		font: var(--sk-font-ui-small); /* TODO can we just inherit */
-		padding: 0 1rem 1px 2em;
+		padding: 0 1rem 0 2em;
 		box-sizing: border-box;
-	}
 
-	.duplicate {
-		color: var(--sk-fg-accent);
+		&:focus {
+			color: var(--sk-fg-accent);
+		}
 	}
 
 	.remove {

From f62c6ea7fb93c78326c98458c6f6db4a4a6c5bfb Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 12:24:37 -0400
Subject: [PATCH 02/11] abort on escape

---
 packages/repl/src/lib/Input/ComponentSelector.svelte | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index 6d70298a57..15a35d5ba7 100644
--- a/packages/repl/src/lib/Input/ComponentSelector.svelte
+++ b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -119,6 +119,11 @@
 								e.preventDefault();
 								e.currentTarget.blur();
 							}
+
+							if (e.key === 'Escape') {
+								input_value = file.name;
+								e.currentTarget.blur();
+							}
 						}}
 					/>
 

From fcf8799216ba7652944103a2a882899b3894317a Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 12:30:52 -0400
Subject: [PATCH 03/11] unused

---
 packages/repl/src/lib/Input/ComponentSelector.svelte | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index 15a35d5ba7..ba5700c2c8 100644
--- a/packages/repl/src/lib/Input/ComponentSelector.svelte
+++ b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -221,15 +221,6 @@
 		}
 	}
 
-	.editable,
-	.uneditable,
-	.input-sizer,
-	input {
-		display: inline-block;
-		position: relative;
-		line-height: 1;
-	}
-
 	input {
 		position: absolute;
 		width: 100%;

From fd7edcbe5ad7a2ca3c36a39559192f41d72272b2 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 12:33:42 -0400
Subject: [PATCH 04/11] tidy up

---
 .../src/lib/Input/ComponentSelector.svelte    | 53 +++++++++----------
 1 file changed, 25 insertions(+), 28 deletions(-)

diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index ba5700c2c8..2495b2f1ab 100644
--- a/packages/repl/src/lib/Input/ComponentSelector.svelte
+++ b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -216,8 +216,33 @@
 			background-size: 1em;
 		}
 
+		.remove {
+			position: absolute;
+			display: none;
+			right: 1px;
+			top: 4px;
+			width: 16px;
+			text-align: right;
+			padding: 12px 0 12px 5px;
+			font-size: 8px;
+			cursor: pointer;
+		}
+
+		&.drag-over {
+			background: #67677814;
+			cursor: move;
+		}
+
 		&.active {
 			border-bottom: 1px solid var(--sk-fg-accent);
+
+			.editable {
+				cursor: text;
+			}
+
+			.remove {
+				display: block;
+			}
 		}
 	}
 
@@ -244,34 +269,6 @@
 		}
 	}
 
-	.remove {
-		position: absolute;
-		display: none;
-		right: 1px;
-		top: 4px;
-		width: 16px;
-		text-align: right;
-		padding: 12px 0 12px 5px;
-		font-size: 8px;
-		cursor: pointer;
-	}
-
-	.file-tabs .button.active .editable {
-		cursor: text;
-	}
-
-	.file-tabs .button.active .remove {
-		display: block;
-	}
-
-	.file-tabs .button.drag-over {
-		background: #67677814;
-	}
-
-	.file-tabs .button.drag-over {
-		cursor: move;
-	}
-
 	.add-new {
 		padding: 12px 10px 8px 8px;
 		height: 40px;

From 26a6da046887d2c598cdbce16b8a3fd2585db7ee Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 12:34:27 -0400
Subject: [PATCH 05/11] fix

---
 packages/repl/src/lib/Input/ComponentSelector.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index 2495b2f1ab..9904825e0a 100644
--- a/packages/repl/src/lib/Input/ComponentSelector.svelte
+++ b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -229,7 +229,7 @@
 		}
 
 		&.drag-over {
-			background: #67677814;
+			background: var(--sk-bg-4);
 			cursor: move;
 		}
 

From 8553c04e5983fd9dde93b17841fde02b3d0e91cf Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 12:39:52 -0400
Subject: [PATCH 06/11] fix

---
 packages/repl/src/lib/Input/ComponentSelector.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index 9904825e0a..f4c5f81636 100644
--- a/packages/repl/src/lib/Input/ComponentSelector.svelte
+++ b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -15,8 +15,9 @@
 	let input_value = $state(workspace.current.name);
 
 	async function close_edit(file: File) {
-		if (input_value === file.name) {
+		if (input_value === file.name || input_value === '') {
 			// nothing to do
+			input_value = file.name;
 			return;
 		}
 
@@ -99,7 +100,7 @@
 
 				<span class:editable={file.name !== 'App.svelte'}>
 					{(file === workspace.current && file.name !== 'App.svelte' ? input_value : file.name) +
-						(workspace.modified[file.name] ? '*' : '')}
+						(workspace.modified[file.name] ? '*' : '') || ' '}
 				</span>
 
 				{#if file === workspace.current && file.name !== 'App.svelte'}

From 4303959207db2d3e7a8379d180b3e1a6ff41144b Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 12:51:59 -0400
Subject: [PATCH 07/11] fixes

---
 .../src/lib/Input/ComponentSelector.svelte    | 32 ++++++++++++-------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index f4c5f81636..c9a1ef390f 100644
--- a/packages/repl/src/lib/Input/ComponentSelector.svelte
+++ b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -74,6 +74,7 @@
 		{#each workspace.files as File[] as file, index (file.name)}
 			<div
 				class="button"
+				class:editable={file.name !== 'App.svelte'}
 				role="button"
 				tabindex="0"
 				class:active={file === workspace.current}
@@ -98,7 +99,7 @@
 			>
 				<i class="drag-handle"></i>
 
-				<span class:editable={file.name !== 'App.svelte'}>
+				<span class="filename">
 					{(file === workspace.current && file.name !== 'App.svelte' ? input_value : file.name) +
 						(workspace.modified[file.name] ? '*' : '') || ' '}
 				</span>
@@ -137,7 +138,7 @@
 						}}
 						onkeyup={(e) => e.key === ' ' && remove_file(file)}
 					>
-						<svg width="12" height="12" viewBox="0 0 24 24">
+						<svg viewBox="0 0 24 24">
 							<line stroke="#999" x1="18" y1="6" x2="6" y2="18" />
 							<line stroke="#999" x1="6" y1="6" x2="18" y2="18" />
 						</svg>
@@ -204,7 +205,12 @@
 	}
 
 	.file-tabs .button {
-		padding: 0 1rem 0 2em;
+		--padding: 0 1.4rem 0 2.6rem;
+		padding: var(--padding);
+
+		&.editable {
+			--padding: 0 1.8rem 0 2.6rem;
+		}
 
 		.drag-handle {
 			cursor: move;
@@ -220,13 +226,17 @@
 		.remove {
 			position: absolute;
 			display: none;
-			right: 1px;
-			top: 4px;
-			width: 16px;
-			text-align: right;
-			padding: 12px 0 12px 5px;
-			font-size: 8px;
+			top: 0;
+			right: 0;
+			padding: 0 0.2rem;
+			width: 1.6rem;
+			height: 100%;
 			cursor: pointer;
+
+			svg {
+				width: 100%;
+				height: 100%;
+			}
 		}
 
 		&.drag-over {
@@ -237,7 +247,7 @@
 		&.active {
 			border-bottom: 1px solid var(--sk-fg-accent);
 
-			.editable {
+			&.editable .filename {
 				cursor: text;
 			}
 
@@ -262,7 +272,7 @@
 		justify-content: center;
 		font-family: var(--sk-font-family-ui);
 		font: var(--sk-font-ui-small); /* TODO can we just inherit */
-		padding: 0 1rem 0 2em;
+		padding: var(--padding);
 		box-sizing: border-box;
 
 		&:focus {

From d43af4d06f0acc2787a07e6a47c35d325f124b35 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 12:55:11 -0400
Subject: [PATCH 08/11] focus on add_new

---
 packages/repl/src/lib/Input/ComponentSelector.svelte | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index c9a1ef390f..4d778d32ec 100644
--- a/packages/repl/src/lib/Input/ComponentSelector.svelte
+++ b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -2,6 +2,7 @@
 	import RunesInfo from './RunesInfo.svelte';
 	import Migrate from './Migrate.svelte';
 	import type { Workspace, File } from 'editor';
+	import { tick } from 'svelte';
 
 	interface Props {
 		runes: boolean;
@@ -12,6 +13,7 @@
 
 	let { runes, onchange, workspace, can_migrate }: Props = $props();
 
+	let input = $state() as HTMLInputElement;
 	let input_value = $state(workspace.current.name);
 
 	async function close_edit(file: File) {
@@ -48,7 +50,7 @@
 		onchange();
 	}
 
-	function add_new() {
+	async function add_new() {
 		const basename = deconflict(`Component.svelte`);
 
 		const file = workspace.add({
@@ -61,6 +63,9 @@
 
 		input_value = file.name;
 		onchange();
+
+		await tick();
+		input.focus();
 	}
 
 	// drag and drop
@@ -108,6 +113,7 @@
 					<!-- svelte-ignore a11y_autofocus -->
 					<input
 						spellcheck={false}
+						bind:this={input}
 						bind:value={input_value}
 						onfocus={async (event) => {
 							const input = event.currentTarget;

From cb1e0464de39baa103894ec69de3239595395c8b Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 12:58:24 -0400
Subject: [PATCH 09/11] use aria-current

---
 packages/repl/src/lib/Input/ComponentSelector.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index 4d778d32ec..875ba4b29a 100644
--- a/packages/repl/src/lib/Input/ComponentSelector.svelte
+++ b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -82,7 +82,7 @@
 				class:editable={file.name !== 'App.svelte'}
 				role="button"
 				tabindex="0"
-				class:active={file === workspace.current}
+				aria-current={file === workspace.current}
 				class:draggable={file !== workspace.current && index !== 0}
 				class:drag-over={file === dragover}
 				onclick={() => {
@@ -250,7 +250,7 @@
 			cursor: move;
 		}
 
-		&.active {
+		&[aria-current='true'] {
 			border-bottom: 1px solid var(--sk-fg-accent);
 
 			&.editable .filename {

From 140393599bc6bf10932efbd040da2b49f008c80d Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 13:02:43 -0400
Subject: [PATCH 10/11] small fix

---
 .../repl/src/lib/Input/ComponentSelector.svelte  | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index 875ba4b29a..03e6abebaa 100644
--- a/packages/repl/src/lib/Input/ComponentSelector.svelte
+++ b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -83,14 +83,13 @@
 				role="button"
 				tabindex="0"
 				aria-current={file === workspace.current}
-				class:draggable={file !== workspace.current && index !== 0}
 				class:drag-over={file === dragover}
 				onclick={() => {
 					workspace.select(file.name);
 					input_value = file.name;
 				}}
 				onkeyup={(e) => e.key === ' ' && workspace.select(file.name)}
-				draggable={file !== workspace.current}
+				draggable="true"
 				ondragstart={() => (dragging = file)}
 				ondragover={(e) => (e.preventDefault(), (dragover = file))}
 				ondragleave={(e) => (e.preventDefault(), (dragover = null))}
@@ -211,11 +210,12 @@
 	}
 
 	.file-tabs .button {
-		--padding: 0 1.4rem 0 2.6rem;
-		padding: var(--padding);
+		--padding-left: 2.6rem;
+		--padding-right: 1.4rem;
+		padding: 0 var(--padding-right) 0 var(--padding-left);
 
 		&.editable {
-			--padding: 0 1.8rem 0 2.6rem;
+			--padding-right: 1.8rem;
 		}
 
 		.drag-handle {
@@ -247,7 +247,6 @@
 
 		&.drag-over {
 			background: var(--sk-bg-4);
-			cursor: move;
 		}
 
 		&[aria-current='true'] {
@@ -265,20 +264,19 @@
 
 	input {
 		position: absolute;
-		width: 100%;
+		width: calc(100% - var(--padding-left) - var(--padding-right));
 		border: none;
 		outline: none;
 		background-color: inherit;
 		color: inherit;
 		top: 0;
-		left: 0;
+		left: var(--padding-left);
 		height: 100%;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		font-family: var(--sk-font-family-ui);
 		font: var(--sk-font-ui-small); /* TODO can we just inherit */
-		padding: var(--padding);
 		box-sizing: border-box;
 
 		&:focus {

From f543eb5463f5ce1039d402db7065714ed3e99da9 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 2 Nov 2024 13:09:54 -0400
Subject: [PATCH 11/11] turn add-new into a button

---
 .../src/lib/Input/ComponentSelector.svelte    | 27 +++++++++----------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
index 03e6abebaa..fe74cd788b 100644
--- a/packages/repl/src/lib/Input/ComponentSelector.svelte
+++ b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -153,7 +153,11 @@
 		{/each}
 	</div>
 
-	<button class="add-new" onclick={add_new} aria-label="add new component" title="add new component"
+	<button
+		class="raised add-new"
+		onclick={add_new}
+		aria-label="add new component"
+		title="add new component"
 	></button>
 
 	<div class="runes">
@@ -166,6 +170,8 @@
 	.component-selector {
 		position: relative;
 		display: flex;
+		gap: 0.5rem;
+		align-items: center;
 		padding: 0 1rem 0 0;
 
 		/* fake border (allows tab borders to appear above it) */
@@ -183,13 +189,13 @@
 	.file-tabs {
 		border: none;
 		margin: 0;
+		height: 100%;
 		white-space: nowrap;
 		overflow-x: auto;
 		overflow-y: hidden;
 	}
 
-	.file-tabs .button,
-	.add-new {
+	.file-tabs .button {
 		position: relative;
 		display: inline-flex;
 		align-items: center;
@@ -198,17 +204,9 @@
 		border: none;
 		padding: 0 1rem;
 		height: 100%;
-		aspect-ratio: 1;
-		margin: 0;
-		border-radius: 0;
 		cursor: pointer;
 	}
 
-	.add-new {
-		background: url(./file-new.svg) 50% 50% no-repeat;
-		background-size: 1em;
-	}
-
 	.file-tabs .button {
 		--padding-left: 2.6rem;
 		--padding-right: 1.4rem;
@@ -285,9 +283,10 @@
 	}
 
 	.add-new {
-		padding: 12px 10px 8px 8px;
-		height: 40px;
-		text-align: center;
+		height: 3.2rem;
+		aspect-ratio: 1;
+		background: url(./file-new.svg) 50% 50% no-repeat;
+		background-size: 1em;
 	}
 
 	.runes {