Reorganize design canvas layout to be more compact

- Reduce main gap from gap-8 to gap-4 for tighter vertical spacing
- Put color and size in a 2-column grid layout
- Reduce image dimension section spacing and padding
- Reduce font properties section spacing and padding
- Smaller section headings to save vertical space
- More compact overall layout

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

src/components/DesignCanvas.tsx

@@ -1086,7 +1086,7 @@ export default function DesignCanvas({ product }: { product: ProductDTO }) {
       </div>
 
       {/* Controls */}
-      <div className="flex flex-col gap-8">
+      <div className="flex flex-col gap-4">
         <div>
           <h1 className="font-display text-4xl">{product.name}</h1>
           <p className="mt-2 text-muted">{product.description}</p>
@@ -1120,54 +1120,56 @@ export default function DesignCanvas({ product }: { product: ProductDTO }) {
           </div>
         </div>
 
-        <div>
+        <div className="grid grid-cols-2 gap-4">
-          <p className="tag-label mb-3">Color</p>
-          <div className="flex flex-wrap gap-3">
-            {product.colors.map((c) => (
-              <button
-                key={c}
-                onClick={() => setColor(c)}
-                aria-label={`Choose color ${c}`}
-                className={`h-9 w-9 rounded-full border transition-transform ${
-                  color === c ? 'scale-110 border-ink ring-2 ring-ink ring-offset-2 ring-offset-paper' : 'border-line'
-                }`}
-                style={{ backgroundColor: c }}
-              />
-            ))}
-          </div>
-          {product.imageUrl && !product.photoRecolorable && Object.keys(product.colorPhotos).length === 0 && (
-            <p className="mt-2 text-xs text-muted">
-              This product uses a real photo, so the picture won&apos;t change color — your pick is
-              still saved with the order.
-            </p>
-          )}
-        </div>
-
-        {product.sizes.length > 0 && (
           <div>
-            <p className="tag-label mb-3">Size</p>
+            <p className="tag-label mb-2">Color</p>
             <div className="flex flex-wrap gap-2">
-              {product.sizes.map((s) => (
+              {product.colors.map((c) => (
                 <button
-                  key={s}
+                  key={c}
-                  onClick={() => setSize(s)}
+                  onClick={() => setColor(c)}
-                  className={`min-w-[44px] border px-3 py-2 text-sm transition-colors ${
+                  aria-label={`Choose color ${c}`}
-                    size === s
+                  className={`h-8 w-8 rounded-full border transition-transform ${
-                      ? 'border-clay bg-clay text-paper'
+                    color === c ? 'scale-110 border-ink ring-2 ring-ink ring-offset-1 ring-offset-paper' : 'border-line'
-                      : 'border-line text-ink hover:border-clay hover:text-clay'
                   }`}
-                >
+                  style={{ backgroundColor: c }}
-                  {s}
+                />
-                </button>
               ))}
             </div>
           </div>
+
+          {product.sizes.length > 0 && (
+            <div>
+              <p className="tag-label mb-2">Size</p>
+              <div className="flex flex-wrap gap-1">
+                {product.sizes.map((s) => (
+                  <button
+                    key={s}
+                    onClick={() => setSize(s)}
+                    className={`min-w-[44px] border px-2 py-1 text-xs transition-colors ${
+                      size === s
+                        ? 'border-clay bg-clay text-paper'
+                        : 'border-line text-ink hover:border-clay hover:text-clay'
+                    }`}
+                  >
+                    {s}
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+        {product.imageUrl && !product.photoRecolorable && Object.keys(product.colorPhotos).length === 0 && (
+          <p className="text-xs text-muted">
+            This product uses a real photo, so the picture won&apos;t change color — your pick is
+            still saved with the order.
+          </p>
         )}
 
 
         {canPersonalize && (
         <div>
-          <p className="tag-label mb-3">
+          <p className="tag-label mb-2">
             Your design {hasBack && <span className="normal-case text-muted">— editing the {view}</span>}
           </p>
 
@@ -1175,11 +1177,11 @@ export default function DesignCanvas({ product }: { product: ProductDTO }) {
           {(() => {
             const images = view === 'front' ? elementsFront.filter(el => el.type === 'image') : elementsBack.filter(el => el.type === 'image');
             return images.length > 0 ? (
-              <div className="mb-4 space-y-3">
+              <div className="mb-3 grid gap-3">
                 {images.map((img, idx) => (
-                  <div key={img.id} className="border border-line bg-surface p-3">
+                  <div key={img.id} className="border border-line bg-surface p-2">
-                    <p className="tag-label mb-2">Image {idx + 1} Dimensions</p>
+                    <p className="text-xs font-semibold mb-2">Image {idx + 1}</p>
-                    <div className="flex gap-3">
+                    <div className="flex gap-2">
                       <label className="flex flex-col gap-1 flex-1">
                         <span className="text-xs text-muted">Width (cm)</span>
                         <input
@@ -1227,11 +1229,11 @@ export default function DesignCanvas({ product }: { product: ProductDTO }) {
           {(() => {
             const texts = view === 'front' ? elementsFront.filter(el => el.type === 'text') : elementsBack.filter(el => el.type === 'text');
             return texts.length > 0 ? (
-              <div className="mb-4 space-y-3">
+              <div className="mb-2 space-y-2">
                 {texts.map((text, idx) => (
-                  <div key={text.id} className="border border-line bg-surface p-3">
+                  <div key={text.id} className="border border-line bg-surface p-2">
-                    <p className="tag-label mb-3">Font {idx + 1}</p>
+                    <p className="text-xs font-semibold mb-2">Font {idx + 1}</p>
-                    <div className="space-y-3">
+                    <div className="space-y-2">
                       <label className="flex flex-col gap-1">
                         <span className="text-xs text-muted">Text</span>
                         <input