Robotail/Corp
Robotail/Corp
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix document preview layout across responsive tabs

Browse Source
This commit is contained in:
lizerk 2026-08-24 13:26:31 +03:00
parent 87a9a6fd08
commit 463342bf6e
2 changed files with 22 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/components/documents/DocumentDetailModal.tsx
View File

@ -268,19 +268,19 @@ export function DocumentDetailModal({
</div>
{/* Content Area */}
<div className="min-h-0 flex-1 overflow-hidden">
{/* Desktop Layout: Side-by-side */}
<div className="hidden h-full lg:flex">
{/* Preview Panel (Left) */}
{documentHasFile && (
<div className={`${isFullscreen ? "w-full" : "w-3/5"} min-h-0 shrink-0 overflow-hidden border-r border-[var(--border-subtle)] transition-all`}>
{renderPreview()}
</div>
)}
<div className="min-h-0 flex-1 overflow-hidden lg:flex">
{/* One preview instance shared by mobile and desktop layouts. */}
{documentHasFile && (
<div className={`${currentActiveTab === "preview" ? "h-full" : "hidden"} ${
isFullscreen ? "lg:w-full" : "lg:w-3/5"
} min-h-0 shrink-0 overflow-hidden transition-all lg:block lg:border-r lg:border-[var(--border-subtle)]`}>
{renderPreview()}
</div>
)}
{/* Info Panel (Right) */}
{!(documentHasFile && isFullscreen) && (
<div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
{/* Desktop Info Panel (Right) */}
{!(documentHasFile && isFullscreen) && (
<div className="hidden min-h-0 min-w-0 flex-1 flex-col overflow-hidden lg:flex">
{/* Desktop Tabs */}
<div className="app-divider app-surface-muted shrink-0 border-b px-6">
<nav className="app-tabs-scroll flex gap-1 overflow-x-auto overflow-y-hidden pb-1">
@ -511,16 +511,11 @@ export function DocumentDetailModal({
</div>
)}
</div>
</div>
)}
</div>
</div>
)}
{/* Mobile Layout: Tabs */}
<div className="h-full overflow-y-auto bg-[var(--surface-secondary)] lg:hidden">
{currentActiveTab === "preview" && (
<div className="h-full min-h-[400px]">{renderPreview()}</div>
)}
<div className={`${currentActiveTab === "preview" ? "hidden" : "h-full overflow-y-auto bg-[var(--surface-secondary)]"} lg:hidden`}>
{currentActiveTab === "info" && (
<div className="p-4 sm:p-6">
<div className="space-y-4">

9
frontend/src/components/documents/DocumentPreview.tsx
View File

@ -396,15 +396,20 @@ export function DocumentPreviewPane({ fileUrl, fileName, className = "" }: Docum
)}
{previewType === "image" && (
<div className="flex h-full min-h-0 items-center justify-center overflow-auto p-4">
<div className="relative flex h-full min-h-0 items-center justify-center overflow-auto p-4">
{loading && <LoadingState label="Загрузка изображения..." />}
{error && <ErrorState message={error} fileUrl={fileUrl} />}
<Image
src={fileUrl}
alt={fileName}
className={`max-h-full max-w-full rounded-lg object-contain shadow-lg ${loading || error ? "hidden" : ""}`}
className={`max-h-full max-w-full rounded-lg object-contain shadow-lg transition-opacity ${
loading || error
? "pointer-events-none absolute inset-0 m-auto opacity-0"
: "opacity-100"
}`}
width={1600}
height={1200}
loading="eager"
unoptimized
onLoad={() => setLoading(false)}
onError={() => {