From 98c932415e4966b2649339b6906190e543ea40c3 Mon Sep 17 00:00:00 2001
From: "[dyad]" <git@dyad.sh>
Date: Sun, 18 Jan 2026 18:15:30 +0100
Subject: [PATCH] [dyad] Making the position grid more minimal - wrote 1
 file(s)

---
 src/components/object-position-control.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/object-position-control.tsx b/src/components/object-position-control.tsx
index 57c5031..023fa0c 100644
--- a/src/components/object-position-control.tsx
+++ b/src/components/object-position-control.tsx
@@ -26,20 +26,23 @@ interface ObjectPositionControlProps {
 
 export function ObjectPositionControl({ value, onChange }: ObjectPositionControlProps) {
   return (
-    <div className="grid grid-cols-3 gap-1 w-24 h-24 p-1 rounded-md bg-muted">
+    <div className="grid grid-cols-3 gap-px w-16 h-16 rounded-md border bg-border overflow-hidden">
       {positions.map((pos) => (
         <button
           key={pos}
           type="button"
           onClick={() => onChange(pos)}
           className={cn(
-            "rounded-sm transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-            value === pos
-              ? "bg-primary"
-              : "bg-muted-foreground/20 hover:bg-muted-foreground/40"
+            "flex items-center justify-center bg-background transition-colors focus:outline-none focus:z-10 focus:ring-2 focus:ring-ring",
+            "hover:bg-accent",
+            value === pos && "bg-accent"
           )}
           aria-label={`Set object position to ${pos.replace(' ', ' ')}`}
-        />
+        >
+          {value === pos && (
+            <div className="w-2 h-2 rounded-full bg-primary ring-1 ring-primary-foreground" />
+          )}
+        </button>
       ))}
     </div>
   );