diff --git a/apps/business/src/components/ImageCropper.module.css b/apps/business/src/components/ImageCropper.module.css index a2924d1..ff92d90 100644 --- a/apps/business/src/components/ImageCropper.module.css +++ b/apps/business/src/components/ImageCropper.module.css @@ -172,3 +172,45 @@ .changeBtn:hover { background: rgba(var(--primary-rgb) / 0.08); } + +.compact .preview, +.compact .uploadZone, +.compact .cropArea { + width: 100%; +} + +.compact .cropPanel { + width: 100%; + max-width: none; + margin-inline: 0; + align-self: stretch; +} + +.compact .changeBtn { + align-self: stretch; + justify-content: center; +} + +.compact .uploadZone { + gap: 4px; + font-size: 11px; +} + +.compact .hint { + font-size: 10px; + text-align: center; + line-height: 1.3; +} + +.compact .changeBtn { + display: flex; + padding: 6px 10px; + font-size: 11px; +} + +.compact .removeBtn { + top: 4px; + right: 4px; + width: 22px; + height: 22px; +} diff --git a/apps/business/src/components/ImageCropper.tsx b/apps/business/src/components/ImageCropper.tsx index a046c25..3d89be6 100644 --- a/apps/business/src/components/ImageCropper.tsx +++ b/apps/business/src/components/ImageCropper.tsx @@ -15,6 +15,8 @@ interface ImageCropperProps { uploadLabel?: string hint?: string changeLabel?: string + /** Smaller upload/preview frame for narrow grid columns. */ + compact?: boolean } export function ImageCropper({ @@ -26,6 +28,7 @@ export function ImageCropper({ uploadLabel, hint, changeLabel, + compact = false, }: ImageCropperProps) { const t = useT() const resolvedUploadLabel = uploadLabel ?? t('products.form.thumbnailUpload') @@ -81,18 +84,25 @@ export function ImageCropper({ const isPortrait = aspect < 1 const maxHeight = isPortrait ? 'min(360px, 42vh)' : 'min(280px, 36vh)' - const frameStyle: React.CSSProperties = { - aspectRatio: String(aspect), - width: `min(100%, calc(${maxHeight} * ${aspect}))`, - height: 'auto', - maxHeight, - minHeight: 0, - marginInline: 'auto', - alignSelf: 'center', - } + const frameStyle: React.CSSProperties = compact + ? { + aspectRatio: String(aspect), + width: '100%', + height: 'auto', + minHeight: 0, + } + : { + aspectRatio: String(aspect), + width: `min(100%, calc(${maxHeight} * ${aspect}))`, + height: 'auto', + maxHeight, + minHeight: 0, + marginInline: 'auto', + alignSelf: 'center', + } return ( -
+
{value && !imageSrc && (
{resolvedUploadLabel} @@ -109,7 +119,7 @@ export function ImageCropper({ {!value && !imageSrc && (