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

@@ -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
-                      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}
+                      listening={true}
+                      onClick={() => setSelectedId(el.id)}
+                      onTap={() => setSelectedId(el.id)}
                     />
-                    </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>