Add content-visibility class

src/app.css

@@ -425,3 +425,9 @@ body.keyboard-open .hide-on-keyboard {
 .chat__scroll-down {
   @apply pb-sai fixed bottom-28 right-4 z-feature md:bottom-16;
 }
+
+/* content visibility */
+
+.cv {
+  content-visibility: auto;
+}

src/app/components/CalendarEventItem.svelte

@@ -19,7 +19,7 @@
 </script>
 
 <Link
-  class="col-3 card2 bg-alt w-full cursor-pointer shadow-md"
+  class="cv col-3 card2 bg-alt w-full cursor-pointer shadow-md"
   href={makeCalendarPath(url, getAddress(event))}>
   <CalendarEventHeader {event} />
   <div class="flex w-full flex-col items-end justify-between gap-2 sm:flex-row">

src/app/components/ClassifiedItem.svelte

@@ -25,7 +25,7 @@
 </script>
 
 <Link
-  class="col-2 card2 bg-alt w-full cursor-pointer shadow-xl"
+  class="cv col-2 card2 bg-alt w-full cursor-pointer shadow-xl"
   href={makeClassifiedPath(url, getAddress(event))}>
   {#if title}
     <div class="flex w-full items-center justify-between gap-2">

src/app/components/GoalItem.svelte

@@ -20,7 +20,9 @@
   const h = getTagValue("h", event.tags)
 </script>
 
-<Link class="col-2 card2 bg-alt w-full cursor-pointer shadow-md" href={makeGoalPath(url, event.id)}>
+<Link
+  class="cv col-2 card2 bg-alt w-full cursor-pointer shadow-md"
+  href={makeGoalPath(url, event.id)}>
   <p class="text-2xl">{event.content}</p>
   <Content
     event={{content: summary, tags: event.tags}}

src/app/components/NoteItem.svelte

@@ -38,7 +38,7 @@
     })
 </script>
 
-<NoteCard {event} {url} class="card2 bg-alt">
+<NoteCard {event} {url} class="cv card2 bg-alt">
   <NoteContent {event} expandMode="inline" />
   <div class="flex w-full justify-between gap-2">
     <ReactionSummary {url} {event} {deleteReaction} {createReaction} reactionClass="tooltip-right">

src/app/components/RecentConversation.svelte

@@ -25,7 +25,7 @@
   const onClick = () => goto(h ? makeRoomPath(url, h) : makeSpaceChatPath(url))
 </script>
 
-<Button class="card2 bg-alt shadow-md" onclick={onClick}>
+<Button class="cv card2 bg-alt shadow-md" onclick={onClick}>
   <div class="flex flex-col gap-3">
     <div class="flex items-center gap-2 text-sm">
       {#if h}

src/app/components/ThreadItem.svelte

@@ -21,7 +21,7 @@
 </script>
 
 <Link
-  class="col-2 card2 bg-alt w-full cursor-pointer shadow-xl"
+  class="cv col-2 card2 bg-alt w-full cursor-pointer shadow-xl"
   href={makeThreadPath(url, event.id)}>
   {#if title}
     <div class="flex w-full items-center justify-between gap-2">

src/routes/spaces/[relay]/[h]/+page.svelte

@@ -432,7 +432,7 @@
         {:else if event.kind === ROOM_REMOVE_MEMBER}
           <RoomItemRemoveMember {url} {event} />
         {:else}
-          <div in:slide class:-mt-1={!showPubkey}>
+          <div in:slide class="cv" class:-mt-1={!showPubkey}>
             <RoomItem
               {url}
               {event}