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,74 +145,78 @@
 		color: var(--flash);
 	}
 
-	.file-tabs button.active .editable {
+	.file-tabs .button.active .editable {
 		cursor: text;
 	}
 
-	.file-tabs button.active .remove {
+	.file-tabs .button.active .remove {
-		display: inline-block;
+		display: block;
 	}
 
 	.add-new {
 		position: absolute;
 		left: 0;
 		top: 0;
-		width: 5rem;
+		padding: 1.2rem 1rem 0.8rem 0 !important;
-		height: 100%;
+		height: 4.2rem;
 		text-align: center;
 		background-color: white;
 	}
 
 	.add-new:hover {
-		color: var(--flash);
+		color: var(--flash) !important;
 	}
 </style>
 
 <div class="component-selector">
-	<div class="file-tabs" on:dblclick="{addNew}">
+	{#if $components.length}
-		{#each $components as component}
+		<div class="file-tabs" on:dblclick="{addNew}">
-			<button
+			{#each $components as component}
-				id={component.name}
+				<div
-				class:active="{component === $selected}"
+					id={component.name}
-				data-name={component.name}
+					class="button"
-				on:click="{() => selectComponent(component)}"
+					role="button"
-				on:dblclick="{e => e.stopPropagation()}"
+					class:active="{component === $selected}"
-			>
+					on:click="{() => selectComponent(component)}"
-				{#if component.name == 'App'}
+					on:dblclick="{e => e.stopPropagation()}"
-					<div class="uneditable">
+				>
-						App.svelte
+					{#if component.name == 'App'}
-					</div>
+						<div class="uneditable">
-				{:else}
+							App.svelte
-					{#if component === editing}
-						<span class="input-sizer">{editing.name + (/\./.test(editing.name) ? '' : `.${editing.type}`)}</span>
-
-						<input
-							autofocus
-							bind:value={editing.name}
-							on:focus={selectInput}
-							on:blur="{() => closeEdit()}"
-							use:enter="{e => e.target.blur()}"
-						>
-					{:else}
-						<div
-							class="editable"
-							title="edit component name"
-							on:click="{() => editTab(component)}"
-						>
-							{component.name}.{component.type}
 						</div>
-
+					{:else}
-						<span class="remove" on:click="{() => remove(component)}">
+						{#if component === editing}
-							<Icon name="close" size={12}/>
+							<span class="input-sizer">{editing.name + (/\./.test(editing.name) ? '' : `.${editing.type}`)}</span>
-							<!-- &times; -->
+
-						</span>
+							<input
+								autofocus
+								spellcheck={false}
+								bind:value={editing.name}
+								on:focus={selectInput}
+								on:blur="{() => closeEdit()}"
+								use:enter="{e => e.target.blur()}"
+							>
+						{:else}
+							<div
+								class="editable"
+								title="edit component name"
+								on:click="{() => editTab(component)}"
+							>
+								{component.name}.{component.type}
+							</div>
+
+							<span class="remove" on:click="{() => remove(component)}">
+								<Icon name="close" size={12}/>
+								<!-- &times; -->
+							</span>
+						{/if}
 					{/if}
-				{/if}
+				</div>
-			</button>
+			{/each}
-		{/each}
-	</div>
 
-	<button class="add-new" on:click={addNew} title="add new component">
+			<button class="add-new" on:click={addNew} title="add new component">
-		<Icon name="plus" />
+				<Icon name="plus" />
-	</button>
+			</button>
+		</div>
+	{/if}
 </div>