fix: restore 12-image limit and fix blank thumbnails on mobile

Thumbnails were blank (empty squares) on iOS/Android because h-full
does not resolve correctly inside a button with aspect-ratio sizing.
Switched to absolute inset-0 positioning which works in all mobile
browsers.

Also restored the slice(0, 12) limit on the media grid.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
MichaelandClaude Sonnet 4.6 committed 2026-03-25 09:02:30 +01:00
1 parent be46d43dd6
commit 695d219724
1 file changed
+9 -5
+9 -5
View File
@@ -82,6 +82,7 @@ function SortableMediaItem({
src={media.facebookFeedUrl || media.originalUrl} src={media.facebookFeedUrl || media.originalUrl}
alt={media.fileName} alt={media.fileName}
type={isVideo ? 'video' : 'image'} type={isVideo ? 'video' : 'image'}
className="absolute inset-0 w-full h-full object-cover"
/> />
</button> </button>
{isSelected && ( {isSelected && (
@@ -131,11 +132,13 @@ export default function NewPostMobile() {
...recentUploads, ...recentUploads,
...allMedia.filter(m => !recentUploads.some(r => r.id === m.id)), ...allMedia.filter(m => !recentUploads.some(r => r.id === m.id)),
]; ];
return combined.sort((a, b) => { return combined
const dateA = a.createdAt ? new Date(a.createdAt).getTime() : 0; .sort((a, b) => {
const dateB = b.createdAt ? new Date(b.createdAt).getTime() : 0; const dateA = a.createdAt ? new Date(a.createdAt).getTime() : 0;
return dateB - dateA; const dateB = b.createdAt ? new Date(b.createdAt).getTime() : 0;
}); return dateB - dateA;
})
.slice(0, 12);
}, [allMedia, recentUploads]); }, [allMedia, recentUploads]);
const { data: scheduledPosts = [] } = useQuery<ScheduledPost[]>({ const { data: scheduledPosts = [] } = useQuery<ScheduledPost[]>({
@@ -526,6 +529,7 @@ export default function NewPostMobile() {
src={media.facebookFeedUrl || media.originalUrl} src={media.facebookFeedUrl || media.originalUrl}
alt={media.fileName} alt={media.fileName}
type={isVideo ? 'video' : 'image'} type={isVideo ? 'video' : 'image'}
className="absolute inset-0 w-full h-full object-cover"
/> />
{isSelected && ( {isSelected && (
<div className="absolute inset-0 bg-primary/10 flex items-center justify-center"> <div className="absolute inset-0 bg-primary/10 flex items-center justify-center">