From 99aa9db6f84997cb42ef213d1f93bf533cc04e62 Mon Sep 17 00:00:00 2001
From: Andymick <andymick03@yahoo.com>
Date: Sat, 18 Jul 2026 15:29:42 +0100
Subject: [PATCH] Improve layout - wrap Image and Font Properties boxes in grid

- Add CSS Grid layout to Image Dimensions boxes (2 columns on lg screens)
- Add CSS Grid layout to Font Properties boxes (2 columns on lg screens)
- Boxes now wrap horizontally instead of stretching page vertically
- Mobile-first: stacks vertically on sm/md, wraps to 2 columns on lg+
- Reduces page scroll while keeping all controls accessible

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

diff --git a/src/components/DesignCanvas.tsx b/src/components/DesignCanvas.tsx
index 9084b30..f2cb006 100644
--- a/src/components/DesignCanvas.tsx
+++ b/src/components/DesignCanvas.tsx
@@ -1162,7 +1162,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">
+              <div className="mb-4 space-y-3 grid grid-cols-1 lg:grid-cols-2 gap-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 +1214,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">
+              <div className="mb-4 space-y-3 grid grid-cols-1 lg:grid-cols-2 gap-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>