Handle Clicks

src/lib/components/actions.svelte

@@ -140,11 +140,11 @@
 
 		PNG size:
 		<input type="radio" value="auto" id="autosize" bind:group={imagemodeselected} />
-		<label for="autosize">auto</label>
+		<label for="autosize">Auto</label>
 		<input type="radio" value="width" id="width-active" bind:group={imagemodeselected} />
-		<label for="width">width</label>
+		<label for="width">Width</label>
 		<input type="radio" value="height" id="height-active" bind:group={imagemodeselected} />
-		<label for="height">height</label>
+		<label for="height">Height</label>
 		{#if imagemodeselected !== 'auto'}
 			<input id="height" type="number" min="3" max="10000" bind:value={userimagesize} />
 		{/if}

src/lib/components/history/history.svelte

@@ -70,12 +70,12 @@
 
 <Card on:select={tabSelectHandler} bind:isOpen {tabs} title="History">
 	<div slot="actions">
-		<button class="bg-yellow-500 hover:bg-yellow-700 rounded px-1" on:click={() => saveHistory()}
-			>💾</button
-		>
-		<button class="bg-yellow-500 hover:bg-yellow-700 rounded px-1" on:click={() => clearHistory()}
-			>❌</button
-		>
+		<button
+			class="bg-yellow-500 hover:bg-yellow-700 rounded px-1"
+			on:click|stopPropagation={() => saveHistory()}>💾</button>
+		<button
+			class="bg-yellow-500 hover:bg-yellow-700 rounded px-1"
+			on:click|stopPropagation={() => clearHistory()}>❌</button>
 	</div>
 	<ul class="p-2 space-y-2 overflow-auto h-56">
 		{#each $historyStore as { state, time, name }}
@@ -88,11 +88,9 @@
 					</div>
 					<div class="flex gap-2 content-center">
 						<button class="rounded px-2 bg-green-200" on:click={() => restoreHistory(state)}
-							>Restore</button
-						>
+							>Restore</button>
 						<button class="rounded px-2 bg-red-200" on:click={() => clearHistory(time)}
-							>Delete</button
-						>
+							>Delete</button>
 					</div>
 				</div>
 				<span class="text-gray-400 text-sm">{relativeTime(time)}</span>

src/routes/edit.svelte

@@ -109,8 +109,7 @@
 				<div slot="actions">
 					{#if !$codeStore.autoSync}
 						<button class="bg-blue-500 hover:bg-blue-700 rounded px-1" on:click={syncDiagram}
-							>🔄</button
-						>
+							>🔄</button>
 					{/if}
 					<label for="autoSync">
 						<input type="checkbox" name="autoSync" bind:checked={$codeStore.autoSync} />
@@ -129,12 +128,11 @@
 		</div>
 
 		<div class="flex-1 flex flex-col  overflow-hidden">
-			<Card title="Diagram">
+			<Card title="Diagram" isCloseable={false}>
 				<button
 					slot="actions"
 					class="rounded shadow px-2 bg-blue-500 hover:bg-blue-700"
-					on:click={() => viewDiagram()}>View</button
-				>
+					on:click|stopPropagation={() => viewDiagram()}>View</button>
 
 				<div class="flex-1 overflow-auto">
 					<View />