mirror of
https://github.com/thegeneralist01/archivr
synced 2026-07-22 03:05:32 +02:00
TheGeneralist
900e33fa60
Problem: changing .preview-modal from height to max-height broke iframe
previews - <iframe style='flex:1'> needs a concrete ancestor height, which
max-height alone doesn't supply when content is shorter than the cap.
Fix - CSS:
.preview-modal--full { height: 88vh } applied to non-tweet modals
.preview-modal--full .preview-modal-body { max-height: none }
.preview-iframe-toolbar span: remove text-transform/letter-spacing
(was uppercasing the URL/title in shouty caps)
Fix - PreviewModal: className adds --full when entity_kind is not
tweet/tweet_thread; tweet previews keep shrink-to-fit behavior.
Fix - PreviewPanel: pass title + original_url from summary to IframePreview
for both HTML and PDF; wrappers use flex:1/minHeight:0 not height:100%.
Fix - IframePreview:
- Accept title + originalUrl props; show originalUrl in toolbar (falls
back to artifact src only when original_url absent); show title above
URL when available
- flex:1 + minHeight:0 instead of height:100% on the wrap div
- Single unified layout for page + pdf (both just show the iframe)
40 lines
1.4 KiB
JavaScript
40 lines
1.4 KiB
JavaScript
import { useEffect } from 'react'
|
||
import PreviewPanel from './PreviewPanel'
|
||
|
||
export default function PreviewModal({ archiveId, entry, detail, onClose }) {
|
||
// Close on Escape key
|
||
useEffect(() => {
|
||
const handler = (e) => { if (e.key === 'Escape') onClose() }
|
||
window.addEventListener('keydown', handler)
|
||
return () => window.removeEventListener('keydown', handler)
|
||
}, [onClose])
|
||
|
||
return (
|
||
<div className="preview-modal-backdrop" onClick={onClose}>
|
||
<div
|
||
className={`preview-modal${
|
||
detail?.summary?.entity_kind === 'tweet' ||
|
||
detail?.summary?.entity_kind === 'tweet_thread'
|
||
? ''
|
||
: ' preview-modal--full'
|
||
}`}
|
||
onClick={e => e.stopPropagation()}
|
||
>
|
||
<div className="preview-modal-header">
|
||
<span className="preview-modal-title">{entry?.title || entry?.entry_uid || 'Preview'}</span>
|
||
<a
|
||
className="preview-modal-newtab"
|
||
href={`/preview/${archiveId}/${entry?.entry_uid}`}
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
title="Open in new tab"
|
||
>↗</a>
|
||
<button className="preview-modal-close" onClick={onClose} aria-label="Close preview">×</button>
|
||
</div>
|
||
<div className="preview-modal-body">
|
||
<PreviewPanel archiveId={archiveId} entry={entry} detail={detail} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|