frontend/src/components/PostList.tsx

@@ -20,14 +20,12 @@ export default (({ posts, onClick }: Props) => {
 
   const cardRef = useRef<HTMLDivElement> (null)
 
-  const outboundSharedId = useSharedTransitionStore (s => s.byLocationKey[location.key])
-
   return (
       <>
 	<div className="flex flex-wrap gap-6 p-4">
 	  {posts.map ((post, i) => {
 	    const id2 = `page-${ post.id }`
-	    const layoutId = outboundSharedId === id2 ? id2 : undefined
+	    const layoutId = id2
 
 	    return (
 		<PrefetchLink

frontend/src/pages/posts/PostDetailPage.tsx

@@ -113,9 +113,11 @@ export default (({ user }: Props) => {
 		  {inboundSharedId === `page-${ id }` && (
 		      <motion.div
 			  layoutId={inboundSharedId}
-			  className="absolute top-4 left-4 w-[640px] max-w-full h-[360px]
+			  className="absolute top-4 left-4 w-[min(640px,calc(100vw-2rem))] h-[360px]
-				     overflow-hidden rounded-xl shadow pointer-events-none
+				     overflow-hidden rounded-xl pointer-events-none z-50"
-				     opacity-0 z-10">
+			  initial={{ opacity: 1 }}
+			  animate={{ opacity: 0 }}
+			  transition={{ duration: .2, ease: 'easeOut' }}>
 			<img src={post.thumbnail || post.thumbnailBase || undefined}
 			     alt={post.title || post.url}
 			     title={post.title || post.url || undefined}