From 1727694dfc7815b295ac8bc0b14e309d72ebffd3 Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Sun, 7 Jan 2024 07:36:36 -0800
Subject: [PATCH] Fix a couple frontend rendering flaws

---
 .../icon-24px-two-tone/vector-rectangle-tool.svg   |  3 ++-
 .../components/widgets/inputs/RadioInput.svelte    | 14 ++++----------
 2 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/frontend/assets/icon-24px-two-tone/vector-rectangle-tool.svg b/frontend/assets/icon-24px-two-tone/vector-rectangle-tool.svg
index d0abd3121..2c7055cca 100644
--- a/frontend/assets/icon-24px-two-tone/vector-rectangle-tool.svg
+++ b/frontend/assets/icon-24px-two-tone/vector-rectangle-tool.svg
@@ -1,4 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 	<path d="M20,6v12H4V6H20 M22,4H2v16h20V4L22,4z" />
-	<rect x="5.5" y="7.5" class="color-vector" width="13" height="9" />
+	<!-- M0,0L24,24 is drawn invisibly and used to defeat Firefox's attempts to round the rectangle to the integer grid -->
+	<path class="color-vector" d="M0,0L24,24 M5.5,7.5v9h13v-9h-13" />
 </svg>
diff --git a/frontend/src/components/widgets/inputs/RadioInput.svelte b/frontend/src/components/widgets/inputs/RadioInput.svelte
index c080512d5..eb6af3b76 100644
--- a/frontend/src/components/widgets/inputs/RadioInput.svelte
+++ b/frontend/src/components/widgets/inputs/RadioInput.svelte
@@ -13,6 +13,8 @@
 	export let selectedIndex: number | undefined = undefined;
 	export let disabled = false;
 
+	$: mixed = selectedIndex === undefined && !disabled;
+
 	function handleEntryClick(radioEntryData: RadioEntryData) {
 		const index = entries.indexOf(radioEntryData);
 		dispatch("selectedIndex", index);
@@ -23,20 +25,12 @@
 
 <LayoutRow class="radio-input" classes={{ disabled }}>
 	{#each entries as entry, index}
-		<button
-			class:active={index === selectedIndex}
-			class:mixed={selectedIndex === undefined}
-			class:disabled
-			on:click={() => handleEntryClick(entry)}
-			title={entry.tooltip}
-			tabindex={index === selectedIndex ? -1 : 0}
-			{disabled}
-		>
+		<button class:active={index === selectedIndex} class:mixed class:disabled on:click={() => handleEntryClick(entry)} title={entry.tooltip} tabindex={index === selectedIndex ? -1 : 0} {disabled}>
 			{#if entry.icon}
 				<IconLabel icon={entry.icon} />
 			{/if}
 			{#if entry.label}
-				<TextLabel italic={selectedIndex === undefined}>{entry.label}</TextLabel>
+				<TextLabel italic={mixed}>{entry.label}</TextLabel>
 			{/if}
 		</button>
 	{/each}