From 2718004ff4c4927b90f9b96caf612b76ec4434ca Mon Sep 17 00:00:00 2001
From: Andymick <andymick03@yahoo.com>
Date: Sat, 18 Jul 2026 15:31:54 +0100
Subject: [PATCH] Revert grid layout and fix curved text rendering

- Revert grid layout changes - boxes now stack vertically as before
- Remove Group wrapper from curved text - was causing image disappearance
- Curved text now renders as simple TextPath with click handlers
- Text can be selected but not dragged (will add dragging back safely later)
- Images should now display correctly when curved text is enabled

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 src/components/DesignCanvas.tsx | 31 ++++++++++---------------------
 1 file changed, 10 insertions(+), 21 deletions(-)

diff --git a/src/components/DesignCanvas.tsx b/src/components/DesignCanvas.tsx
index f2cb006..a29e7e8 100644
--- a/src/components/DesignCanvas.tsx
+++ b/src/components/DesignCanvas.tsx
@@ -325,32 +325,21 @@ function PrintSurface({
               {elements.map((el) =>
                 el.type === 'text' ? (
                   el.curvedPath ? (
-                    // Curved text - render with path-based positioning
-                    <Group
+                    // Curved text - simple TextPath without Group wrapper
+                    <TextPath
                       key={el.id}
                       ref={(node) => {
                         if (node) nodeRefs.current.set(el.id, node);
                       }}
-                      x={el.x}
-                      y={el.y}
-                      draggable
+                      data={generateCurvePath(el.curvedPath.type, el.curvedPath.radius, el.curvedPath.reverse)}
+                      text={el.text}
+                      fontFamily={el.fontFamily}
+                      fontSize={el.fontSize}
+                      fill={el.fill}
                       listening={true}
                       onClick={() => setSelectedId(el.id)}
                       onTap={() => setSelectedId(el.id)}
-                      onDragEnd={(e) => {
-                        const group = e.target;
-                        updateElement(el.id, { x: group.x(), y: group.y() });
-                      }}
-                    >
-                      <TextPath
-                        data={generateCurvePath(el.curvedPath.type, el.curvedPath.radius, el.curvedPath.reverse)}
-                        text={el.text}
-                        fontFamily={el.fontFamily}
-                        fontSize={el.fontSize}
-                        fill={el.fill}
-                        listening={false}
-                      />
-                    </Group>
+                    />
                   ) : (
                     // Regular straight text
                     <Text
@@ -1162,7 +1151,7 @@ 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 grid grid-cols-1 lg:grid-cols-2 gap-3">
+              <div className="mb-4 space-y-3">
                 {images.map((img, idx) => (
                   <div key={img.id} className="border border-line bg-surface p-3">
                     <p className="tag-label mb-2">Image {idx + 1} Dimensions</p>
@@ -1214,7 +1203,7 @@ 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 grid grid-cols-1 lg:grid-cols-2 gap-3">
+              <div className="mb-4 space-y-3">
                 {texts.map((text, idx) => (
                   <div key={text.id} className="border border-line bg-surface p-3">
                     <p className="tag-label mb-3">Font {idx + 1}</p>