🙃

frontend/src/lib/components/grid/cell.svelte

@@ -3,6 +3,7 @@
 	import clsx from 'clsx';
 
 	let {
+		cla = '',
 		width = '80px',
 		height = '30px',
 		raw_val = $bindable(''),
@@ -13,10 +14,11 @@
 		active = false,
 		editing = false
 	}: {
+		cla?: string;
 		width?: string;
 		height?: string;
 		raw_val?: string;
-		val?: number | string | undefined;
+		val?: LiteralValue | undefined;
 		onmousedown?: (e: MouseEvent) => void;
 		startediting?: () => void;
 		stopediting?: () => void;
@@ -51,9 +53,8 @@
 	<div use:autofocusWithin onkeydown={handleKeydown}>
 		<Input
 			style="width: {width}; height: {height}"
-			class="relative rounded-none p-1
-             !transition-none delay-0 duration-0
-             focus:z-20"
+			class="relative rounded-none p-1 !transition-none delay-0 duration-0
+			focus:z-20 focus:shadow-[0_0_0_1px_var(--color-primary)] focus:outline-none"
 			onblur={(e) => {
 				raw_val = (e.target as HTMLInputElement).value;
 				stopediting();
@@ -66,7 +67,7 @@
 		{onmousedown}
 		style:width
 		style:height
-		class={clsx('placeholder bg-background p-1 dark:bg-input/30', { active, 'z-20': active })}
+		class={clsx('placeholder bg-background p-1', { active }, cla)}
 	>
 		{#if raw_val !== '' || val !== ''}
 			<span class="pointer-events-none select-none">
@@ -89,6 +90,7 @@
 	}
 
 	.active {
+		z-index: 20;
 		border: 1px solid var(--color-primary);
 		outline: 1px solid var(--color-primary);
 	}