engineering/remarkbox
1
0
Fork 0
Code Issues 3 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Fix preview avatar hidden by nested-avatar negative margin.

Browse source 
The dynamic CSS sets margin-left: -48px on .nested-avatar to hang
avatars into .node padding. In the preview container (no matching
padding, overflow:hidden), this pushed the avatar off-screen.
Use plain .avatar class for preview avatars instead.
This commit is contained in:
russell@unturf.com 2026-02-08 06:19:02 -05:00
parent 14379cc364
commit 48e17ad0f8
1 changed files with 5 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

6
remarkbox/static/js/custom.js
View file

@ -29,10 +29,14 @@ function updatePreviewAuthor(previewDiv) {
} }
// Create avatar img once, via DOM API on visible parent. // Create avatar img once, via DOM API on visible parent.
// Use class 'avatar' only (not 'nested-avatar') because the dynamic CSS
// sets margin-left: -48px on nested-avatar to hang into .node padding,
// which would push the image off-screen inside the preview container.
if (previewDiv.dataset.avatarSrc && !author.querySelector('img.avatar')) { if (previewDiv.dataset.avatarSrc && !author.querySelector('img.avatar')) {
var img = document.createElement('img'); var img = document.createElement('img');
img.className = 'avatar nested-avatar'; img.className = 'avatar';
img.align = 'left'; img.align = 'left';
img.style.marginTop = '6px';
img.width = parseInt(previewDiv.dataset.avatarSize) || 35; img.width = parseInt(previewDiv.dataset.avatarSize) || 35;
img.height = parseInt(previewDiv.dataset.avatarSize) || 35; img.height = parseInt(previewDiv.dataset.avatarSize) || 35;
img.src = previewDiv.dataset.avatarSrc; img.src = previewDiv.dataset.avatarSrc;