andymick01/craft2prints
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve layout - wrap Image and Font Properties boxes in grid

Browse Source 
- 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>
This commit is contained in:
Andymick
2026-07-18 15:29:42 +01:00
co-authored by Claude Haiku 4.5
parent f90a5adc44
commit 99aa9db6f8
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/DesignCanvas.tsx
+2 -2
View File
@@ -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'); const images = view === 'front' ? elementsFront.filter(el => el.type === 'image') : elementsBack.filter(el => el.type === 'image');
return images.length > 0 ? ( 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) => ( {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-3">
<p className="tag-label mb-2">Image {idx + 1} Dimensions</p> <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'); const texts = view === 'front' ? elementsFront.filter(el => el.type === 'text') : elementsBack.filter(el => el.type === 'text');
return texts.length > 0 ? ( 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) => ( {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-3">
<p className="tag-label mb-3">Font {idx + 1}</p> <p className="tag-label mb-3">Font {idx + 1}</p>