thegeneralist01/archivr
1
Fork 0
mirror of https://github.com/thegeneralist01/archivr synced 2026-07-22 03:05:32 +02:00
Code Issues Activity

fix: iframe/page preview height chain and toolbar UX

Browse source 
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)
This commit is contained in:
TheGeneralist 2026-07-12 15:18:38 +02:00
parent 29a99d0713
commit 900e33fa60
Signed by: thegeneralist01
SSH key fingerprint: SHA256:pp9qddbCNmVNoSjevdvQvM5z0DHN7LTa8qBMbcMq/R4
7 changed files with 104 additions and 95 deletions
Download patch file Download diff file Expand all files Collapse all files

2
crates/archivr-server/static/assets/index-CLkuyO9A.css → crates/archivr-server/static/assets/index-C89vW3ol.css
View file

File diff suppressed because one or more lines are too long

18
crates/archivr-server/static/assets/index-CH_nemMw.js → crates/archivr-server/static/assets/index-C98W3QeO.js
View file

File diff suppressed because one or more lines are too long

4
crates/archivr-server/static/index.html
View file

@ -4,8 +4,8 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Archivr</title> <title>Archivr</title>
<script type="module" crossorigin src="/assets/index-CH_nemMw.js"></script> <script type="module" crossorigin src="/assets/index-C98W3QeO.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-CLkuyO9A.css"> <link rel="stylesheet" crossorigin href="/assets/index-C89vW3ol.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

135
frontend/src/components/IframePreview.jsx
View file

@ -1,83 +1,74 @@
export default function IframePreview({ src, type }) { export default function IframePreview({ src, type, title, originalUrl }) {
const displayUrl = originalUrl || src;
const displayTitle = title || null;
return ( return (
<div <div
className="preview-iframe-wrap" className="preview-iframe-wrap"
style={{ height: '100%', display: 'flex', flexDirection: 'column' }} style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}
> >
{type === 'page' ? ( <div
<> className="preview-iframe-toolbar"
<div style={{
className="preview-iframe-toolbar" display: 'flex',
flexDirection: 'column',
gap: '2px',
padding: '6px 12px',
borderBottom: '1px solid var(--line-soft)',
background: 'var(--paper-2)',
flexShrink: 0,
}}
>
{displayTitle && (
<span style={{
fontSize: '0.85rem',
fontWeight: 600,
color: 'var(--ink)',
fontFamily: 'var(--sans)',
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
}}>
{displayTitle}
</span>
)}
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
<span style={{
flex: 1,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
fontSize: '0.78rem',
color: 'var(--muted)',
fontFamily: 'var(--sans)',
}}>
{displayUrl}
</span>
<a
href={src}
target="_blank"
rel="noreferrer noopener"
style={{ style={{
display: 'flex', fontSize: '0.78rem',
alignItems: 'center', color: 'var(--accent)',
gap: '8px', textDecoration: 'none',
padding: '6px 10px', whiteSpace: 'nowrap',
borderBottom: '1px solid var(--line-soft)',
background: 'var(--paper-2)',
flexShrink: 0,
}}
>
<span
style={{
flex: 1,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
fontSize: '0.8rem',
color: 'var(--muted)',
fontFamily: 'var(--sans)',
}}
>
{src}
</span>
<a
href={src}
target="_blank"
rel="noreferrer noopener"
style={{
fontSize: '0.8rem',
color: 'var(--accent)',
textDecoration: 'none',
whiteSpace: 'nowrap',
fontFamily: 'var(--sans)',
}}
>
Open in new tab ↗
</a>
</div>
<iframe
src={src}
sandbox="allow-same-origin allow-popups"
allow="autoplay 'none'"
referrerPolicy="no-referrer"
style={{ flex: 1, border: 'none', width: '100%' }}
title="Page preview"
/>
</>
) : (
<>
<div
style={{
padding: '8px 12px',
borderBottom: '1px solid var(--line-soft)',
background: 'var(--paper-2)',
flexShrink: 0,
fontSize: '0.85rem',
color: 'var(--muted)',
fontFamily: 'var(--sans)', fontFamily: 'var(--sans)',
flexShrink: 0,
}} }}
> >
PDF Document {type === 'pdf' ? 'Open PDF ↗' : 'Open in new tab ↗'}
</div> </a>
<iframe </div>
src={src} </div>
allow="autoplay 'none'" <iframe
style={{ flex: 1, border: 'none', width: '100%' }} src={src}
title="PDF preview" sandbox="allow-same-origin allow-popups"
/> allow="autoplay 'none'"
</> referrerPolicy="no-referrer"
)} style={{ flex: 1, border: 'none', width: '100%', minHeight: 0 }}
title={displayTitle || (type === 'pdf' ? 'PDF preview' : 'Page preview')}
/>
</div> </div>
); );
} }

10
frontend/src/components/PreviewModal.jsx
View file

@ -11,7 +11,15 @@ export default function PreviewModal({ archiveId, entry, detail, onClose }) {
return ( return (
<div className="preview-modal-backdrop" onClick={onClose}> <div className="preview-modal-backdrop" onClick={onClose}>
<div className="preview-modal" onClick={e => e.stopPropagation()}> <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"> <div className="preview-modal-header">
<span className="preview-modal-title">{entry?.title || entry?.entry_uid || 'Preview'}</span> <span className="preview-modal-title">{entry?.title || entry?.entry_uid || 'Preview'}</span>
<a <a

10
frontend/src/components/PreviewPanel.jsx
View file

@ -103,8 +103,9 @@ export default function PreviewPanel({ archiveId, entry, detail }) {
// 5. PDF // 5. PDF
if (ext === 'pdf') { if (ext === 'pdf') {
return ( return (
<div className="preview-panel" style={{ height: '100%' }}> <div className="preview-panel" style={{ flex: 1, minHeight: 0 }}>
<IframePreview src={primaryMediaUrl} type="pdf" /> <IframePreview src={primaryMediaUrl} type="pdf"
title={summary.title} originalUrl={summary.original_url} />
</div> </div>
); );
} }
@ -112,8 +113,9 @@ export default function PreviewPanel({ archiveId, entry, detail }) {
// 6. HTML page // 6. HTML page
if (ext === 'html' || ext === 'htm') { if (ext === 'html' || ext === 'htm') {
return ( return (
<div className="preview-panel" style={{ height: '100%' }}> <div className="preview-panel" style={{ flex: 1, minHeight: 0 }}>
<IframePreview src={primaryMediaUrl} type="page" /> <IframePreview src={primaryMediaUrl} type="page"
title={summary.title} originalUrl={summary.original_url} />
</div> </div>
); );
} }

20
frontend/src/styles.css
View file

@ -1951,19 +1951,19 @@ select {
} }
.preview-iframe-toolbar { .preview-iframe-toolbar {
display: flex; display: flex;
align-items: center; flex-direction: column;
gap: 2px;
padding: 6px 12px; padding: 6px 12px;
background: var(--paper-3); background: var(--paper-2);
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--line);
gap: 8px;
flex-shrink: 0; flex-shrink: 0;
/* never uppercase the toolbar text */
text-transform: none;
letter-spacing: normal;
} }
.preview-iframe-toolbar span { .preview-iframe-toolbar span {
font-size: 11px; font-size: 11px;
color: var(--muted-2); color: var(--muted-2);
text-transform: uppercase;
letter-spacing: 0.07em;
font-weight: 600;
} }
.preview-iframe-toolbar a { .preview-iframe-toolbar a {
margin-left: auto; margin-left: auto;
@ -2361,6 +2361,14 @@ select {
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
} }
/* Full-height variant for iframe/PDF/video/image (needs explicit height
so flex children like <iframe style="flex:1"> have a concrete container). */
.preview-modal--full {
height: 88vh;
}
.preview-modal--full .preview-modal-body {
max-height: none;
}
.preview-modal-header { .preview-modal-header {
display: flex; display: flex;
align-items: center; align-items: center;