work-one/file-one
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: image preview dialog mobile layout

Browse Source
This commit is contained in:
Kenneth
2025-09-20 20:16:51 +00:00
parent 40b9c84b15
commit daae016cf3
1 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/web/src/components/image-preview-dialog.tsx
View File

@@ -84,8 +84,10 @@ function PreviewContent({
showCloseButton={false} showCloseButton={false}
className="p-0 lg:min-w-1/3 gap-0" className="p-0 lg:min-w-1/3 gap-0"
> >
<DialogHeader className="border-b border-b-border p-4 flex flex-row items-center justify-between"> <DialogHeader className="overflow-auto border-b border-b-border p-4 flex flex-row items-center justify-between">
<DialogTitle>{file.name}</DialogTitle> <DialogTitle className="truncate flex-1">
{file.name}
</DialogTitle>
<div className="flex flex-row items-center space-x-2"> <div className="flex flex-row items-center space-x-2">
<Toolbar fileUrl={fileUrl} file={file} /> <Toolbar fileUrl={fileUrl} file={file} />
<Button variant="ghost" size="icon" asChild> <Button variant="ghost" size="icon" asChild>
@@ -133,7 +135,7 @@ function Toolbar({ fileUrl, file }: { fileUrl: string; file: Doc<"files"> }) {
} }
return ( return (
<div className="flex flex-row items-center space-x-2 border-r border-r-border pr-2"> <div className="flex flex-row items-center space-x-2 border-r border-r-border pr-4">
<ResetZoomButton /> <ResetZoomButton />
<Button <Button
variant="ghost" variant="ghost"
@@ -201,6 +203,7 @@ function ImagePreview({
<img <img
src={fileUrl} src={fileUrl}
alt={file.name} alt={file.name}
className="object-contain"
style={{ transform: `scale(${zoomLevel})` }} style={{ transform: `scale(${zoomLevel})` }}
/> />
) )