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

@@ -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>