From cb44e5824133b882763793b5fadd2b4eaf105a3b Mon Sep 17 00:00:00 2001
From: "[dyad]" <git@dyad.sh>
Date: Sun, 18 Jan 2026 11:16:45 +0100
Subject: [PATCH] [dyad] Improve design of sequential number options - wrote 1
 file(s)

---
 src/components/image-converter.tsx | 44 ++++++++++++++++--------------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/components/image-converter.tsx b/src/components/image-converter.tsx
index 6331d85..8be0b63 100644
--- a/src/components/image-converter.tsx
+++ b/src/components/image-converter.tsx
@@ -272,26 +272,30 @@ export function ImageConverter() {
                     <Label htmlFor="use-counter">Add sequential number</Label>
                   </div>
                   {useCounter && (
-                    <div className="grid grid-cols-2 gap-4 pl-8 pt-2">
-                      <div className="space-y-2">
-                        <Label htmlFor="counter-start">Start number</Label>
-                        <Input
-                          id="counter-start"
-                          type="number"
-                          value={counterStart}
-                          onChange={(e) => setCounterStart(Math.max(0, Number(e.target.value)))}
-                          min="0"
-                        />
-                      </div>
-                      <div className="space-y-2">
-                        <Label htmlFor="counter-digits">Padding digits</Label>
-                        <Input
-                          id="counter-digits"
-                          type="number"
-                          value={counterDigits}
-                          onChange={(e) => setCounterDigits(Math.max(1, Number(e.target.value)))}
-                          min="1"
-                        />
+                    <div className="pl-8 pt-4">
+                      <div className="rounded-lg border bg-transparent p-4">
+                        <div className="grid grid-cols-2 gap-4">
+                          <div className="space-y-2">
+                            <Label htmlFor="counter-start">Start number</Label>
+                            <Input
+                              id="counter-start"
+                              type="number"
+                              value={counterStart}
+                              onChange={(e) => setCounterStart(Math.max(0, Number(e.target.value)))}
+                              min="0"
+                            />
+                          </div>
+                          <div className="space-y-2">
+                            <Label htmlFor="counter-digits">Padding digits</Label>
+                            <Input
+                              id="counter-digits"
+                              type="number"
+                              value={counterDigits}
+                              onChange={(e) => setCounterDigits(Math.max(1, Number(e.target.value)))}
+                              min="1"
+                            />
+                          </div>
+                        </div>
                       </div>
                     </div>
                   )}