Skip to content

feat(labelary-preview): inset background and overflow scrolling for o… #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
u8array merged 1 commit into from
May 5, 2026
Merged

feat(labelary-preview): inset background and overflow scrolling for o… #9

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 31 additions & 29 deletions src/components/Output/LabelPreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,10 +51,10 @@ export function LabelPreviewModal({ onClose }: Props) {
onClick={onClose}
>
<div
className="bg-surface border border-border rounded shadow-lg flex flex-col overflow-hidden max-w-[90vw] max-h-[90vh]"
className="bg-surface border border-border-2 rounded shadow-lg flex flex-col overflow-hidden max-w-[90vw] max-h-[90vh]"
onClick={(e) => e.stopPropagation()}
>
<div className="flex items-center justify-between px-3 py-1.5 border-b border-border shrink-0">
<div className="flex items-center justify-between px-3 py-1.5 border-b border-border-2 shrink-0">
<span className="font-mono text-[10px] text-muted uppercase tracking-widest">
{t.output.previewHeading}
</span>
Expand All @@ -66,33 +66,35 @@ export function LabelPreviewModal({ onClose }: Props) {
</button>
</div>

<div className="flex-1 flex items-center justify-center p-4 min-h-24 min-w-48">
{loading && (
<span className="font-mono text-[10px] text-muted animate-pulse">{t.output.loading}</span>
)}
{!loading && error && (
<div className="flex flex-col items-center gap-3 max-w-64 text-center">
<span className="font-mono text-[10px] text-amber-400 leading-relaxed">{error}</span>
<button
onClick={handleDownloadFallback}
className="flex items-center gap-1.5 px-3 py-1.5 rounded text-[10px] font-mono bg-surface-2 border border-border text-muted hover:text-text hover:border-accent transition-colors"
>
<ArrowDownTrayIcon className="w-3.5 h-3.5" />
Export ZPL instead
</button>
</div>
)}
{!loading && !error && previewUrl && (
<img
src={previewUrl}
alt="Label preview"
style={{
maxWidth: '100%',
maxHeight: '100%',
display: 'block',
}}
/>
)}
{/* Inset preview area: bg-bg gives a clear edge against the surrounding
surface (especially in light mode where the label image is white).
The outer div scrolls; the inner one stays at least as large as the
viewport so small previews are still centered. */}
<div className="flex-1 overflow-auto bg-bg min-h-24 min-w-48">
<div className="min-h-full min-w-full flex items-center justify-center p-4">
{loading && (
<span className="font-mono text-[10px] text-muted animate-pulse">{t.output.loading}</span>
)}
{!loading && error && (
<div className="flex flex-col items-center gap-3 max-w-64 text-center">
<span className="font-mono text-[10px] text-amber-400 leading-relaxed">{error}</span>
<button
onClick={handleDownloadFallback}
className="flex items-center gap-1.5 px-3 py-1.5 rounded text-[10px] font-mono bg-surface-2 border border-border text-muted hover:text-text hover:border-accent transition-colors"
>
<ArrowDownTrayIcon className="w-3.5 h-3.5" />
Export ZPL instead
</button>
</div>
)}
{!loading && !error && previewUrl && (
<img
src={previewUrl}
alt="Label preview"
className="block shrink-0"
/>
Comment on lines +91 to +95
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist Bot May 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

To allow oversized labels to actually overflow and trigger the scrollbars as intended, you should add max-w-none and max-h-none to the img tag. By default, Tailwind's preflight (and most CSS resets) applies max-width: 100% and height: auto to images, which will scale the label down to fit the modal width even if the container is scrollable. Adding these classes ensures the image renders at its natural size from the Labelary API.

            {!loading && !error && previewUrl && (
              <img
                src={previewUrl}
                alt="Label preview"
                className="block shrink-0 max-w-none max-h-none"
              />
            )}

)}
</div>
</div>
</div>
</div>
Expand Down