refactor: use tailwind canonical classes

Author: velut

src/lib/components/AppColumn.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <div
-	class="overflow-y-auto p-4 [scrollbar-color:_var(--scrollbar-thumb)_var(--scrollbar-track)] [scrollbar-gutter:stable]"
+	class="overflow-y-auto p-4 [scrollbar-color:var(--scrollbar-thumb)_var(--scrollbar-track)] [scrollbar-gutter:stable]"
 >
 	{@render children()}
 </div>

src/lib/components/Divider.svelte

@@ -7,7 +7,7 @@
 </script>
 
 {#if horizontal}
-	<div class="bg-border w-[1px]"></div>
+	<div class="bg-border w-px"></div>
 {:else}
-	<div class="bg-border h-[1px]"></div>
+	<div class="bg-border h-px"></div>
 {/if}

src/lib/components/PreviewHeader.svelte

@@ -17,7 +17,7 @@
 		</select>
 	</div>
 
-	<div class="bg-border hidden h-9 w-[1px] xl:block"></div>
+	<div class="bg-border hidden h-9 w-px xl:block"></div>
 	<div class="flex flex-col gap-4 sm:flex-row">
 		<div>
 			<label for="preview-mode" class="sr-only"> Select preview mode </label>
@@ -27,11 +27,11 @@
 			</select>
 		</div>
 
-		<div class="bg-border hidden h-9 w-[1px] sm:block"></div>
+		<div class="bg-border hidden h-9 w-px sm:block"></div>
 		<div class="flex items-center gap-4">
 			<span class="btn-outline pointer-events-none">{image.width}x{image.height}</span>
 
-			<div class="bg-border h-9 w-[1px]"></div>
+			<div class="bg-border h-9 w-px"></div>
 			<span class="btn-outline pointer-events-none">{prettyBytes(image.file.size)}</span>
 		</div>
 	</div>