make component removal work in firefox

site/src/components/Repl/Input/ComponentSelector.svelte

@@ -83,7 +83,6 @@
 
 	.file-tabs {
 		border: none;
-		padding: 0 0 0 5rem;
 		margin: 0;
 		white-space: nowrap;
 		overflow-x: auto;
@@ -91,16 +90,17 @@
 		height: 10em;
 	}
 
-	.file-tabs button {
+	.file-tabs .button, .file-tabs button {
 		position: relative;
+		display: inline-block;
 		font: 400 1.2rem/1.5 var(--font);
 		border-bottom: var(--border-w) solid transparent;
-		padding: 1.2rem 1.2rem 0.8rem 0.5rem;
+		padding: 1.2rem 1.4rem 0.8rem 0.8rem;
 		margin: 0 0.5rem 0 0;
 		color: #999;
 	}
 
-	.file-tabs button.active {
+	.file-tabs .button.active {
 		/* color: var(--second); */
 		color: #333;
 		border-bottom: var(--border-w) solid var(--prime);
@@ -119,10 +119,8 @@
 	input {
 		position: absolute;
 		width: 100%;
-		left: 0.5rem;
+		left: 0.8rem;
 		top: 1.2rem;
-		/* padding: 0 0.4rem; */
-		/* font-size: 1rem; */
 		font: 400 1.2rem/1.5 var(--font);
 		border: none;
 		color: var(--flash);
@@ -131,14 +129,6 @@
 		background-color: transparent;
 	}
 
-	.editable {
-		/* margin-right: 2.4rem; */
-	}
-
-	.uneditable {
-		/* padding-left: 1.2rem; */
-	}
-
 	.remove {
 		position: absolute;
 		display: none;
@@ -155,36 +145,38 @@
 		color: var(--flash);
 	}
 
-	.file-tabs button.active .editable {
+	.file-tabs .button.active .editable {
 		cursor: text;
 	}
 
-	.file-tabs button.active .remove {
-		display: inline-block;
+	.file-tabs .button.active .remove {
+		display: block;
 	}
 
 	.add-new {
 		position: absolute;
 		left: 0;
 		top: 0;
-		width: 5rem;
-		height: 100%;
+		padding: 1.2rem 1rem 0.8rem 0 !important;
+		height: 4.2rem;
 		text-align: center;
 		background-color: white;
 	}
 
 	.add-new:hover {
-		color: var(--flash);
+		color: var(--flash) !important;
 	}
 </style>
 
 <div class="component-selector">
+	{#if $components.length}
 		<div class="file-tabs" on:dblclick="{addNew}">
 			{#each $components as component}
-			<button
+				<div
 					id={component.name}
+					class="button"
+					role="button"
 					class:active="{component === $selected}"
-				data-name={component.name}
 					on:click="{() => selectComponent(component)}"
 					on:dblclick="{e => e.stopPropagation()}"
 				>
@@ -198,6 +190,7 @@
 
 							<input
 								autofocus
+								spellcheck={false}
 								bind:value={editing.name}
 								on:focus={selectInput}
 								on:blur="{() => closeEdit()}"
@@ -218,11 +211,12 @@
 							</span>
 						{/if}
 					{/if}
-			</button>
-		{/each}
 				</div>
+			{/each}
 
 			<button class="add-new" on:click={addNew} title="add new component">
 				<Icon name="plus" />
 			</button>
 		</div>
+	{/if}
+</div>