From f75b5d3fd28349ee69f03be34c1316122992c283 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Wed, 25 Feb 2026 01:37:56 +0100
Subject: fix a ton of issues + improvement

---
 apps/web/src/components/ui/color-picker.tsx | 18 +++++++++++++-----
 apps/web/src/components/ui/font-picker.tsx  |  4 ++--
 apps/web/src/components/ui/number-field.tsx |  7 +++++--
 3 files changed, 20 insertions(+), 9 deletions(-)

(limited to 'apps/web/src/components/ui')

diff --git a/apps/web/src/components/ui/color-picker.tsx b/apps/web/src/components/ui/color-picker.tsx
index d58b6144..fbf9bbd7 100644
--- a/apps/web/src/components/ui/color-picker.tsx
+++ b/apps/web/src/components/ui/color-picker.tsx
@@ -280,13 +280,21 @@ const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(
 					)}
 					{...props}
 				>
-					<PopoverTrigger asChild>
-						<button
-							className="size-4.5 cursor-pointer border rounded-sm hover:ring-1 hover:ring-foreground/20"
+				<PopoverTrigger asChild>
+					<button
+						className="size-4.5 cursor-pointer border rounded-sm hover:ring-1 hover:ring-foreground/20 overflow-hidden relative"
+						type="button"
+					>
+						<span
+							className="absolute inset-0"
+							style={checkerboardStyle}
+						/>
+						<span
+							className="absolute inset-0"
 							style={{ backgroundColor: `#${value}` }}
-							type="button"
 						/>
-					</PopoverTrigger>
+					</button>
+				</PopoverTrigger>
 					<div className="flex flex-1 items-center">
 						<Input
 							className={cn(
diff --git a/apps/web/src/components/ui/font-picker.tsx b/apps/web/src/components/ui/font-picker.tsx
index d5d56255..09ba0a9a 100644
--- a/apps/web/src/components/ui/font-picker.tsx
+++ b/apps/web/src/components/ui/font-picker.tsx
@@ -26,7 +26,7 @@ import type { FontAtlas, FontAtlasEntry } from "@/types/fonts";
 import { cn } from "@/utils/ui";
 import { ChevronDown, Search, Upload } from "lucide-react";
 import { HugeiconsIcon } from "@hugeicons/react";
-import { TextFontIcon } from "@hugeicons/core-free-icons";
+import { TextIcon } from "@hugeicons/core-free-icons";
 
 const FONT_TABS = [
 	{ key: "all", label: "All fonts" },
@@ -139,7 +139,7 @@ export function FontPicker({
 			>
 				<div className="flex min-w-0 items-center gap-1.5">
 					<span className="text-muted-foreground [&_svg]:size-3.5 shrink-0">
-						<HugeiconsIcon icon={TextFontIcon} />
+						<HugeiconsIcon icon={TextIcon} />
 					</span>
 					<span className="truncate" style={{ fontFamily: defaultValue }}>
 						{defaultValue ?? "Select a font"}
diff --git a/apps/web/src/components/ui/number-field.tsx b/apps/web/src/components/ui/number-field.tsx
index 35cce81b..48297dc0 100644
--- a/apps/web/src/components/ui/number-field.tsx
+++ b/apps/web/src/components/ui/number-field.tsx
@@ -71,9 +71,12 @@ function NumberField({
 				return;
 			}
 			cumulativeDeltaRef.current += moveEvent.movementX;
+			const sensitivity =
+				typeof dragSensitivity === "number"
+					? dragSensitivity
+					: DRAG_SENSITIVITIES[dragSensitivity];
 			const newValue =
-				startValueRef.current +
-				cumulativeDeltaRef.current * DRAG_SENSITIVITIES[dragSensitivity];
+				startValueRef.current + cumulativeDeltaRef.current * sensitivity;
 			onScrub(newValue);
 		};
 
-- 
cgit v1.3.1