Article cards

src/app.css

@@ -418,6 +418,10 @@
     -webkit-line-clamp: 3;
   }
 
+  .decoration-none {
+    text-decoration: none !important;
+  }
+
   /* Lists */
   .ol-leather li a,
   .ul-leather li a {

src/lib/components/publications/PublicationFeed.svelte

@@ -680,7 +680,7 @@
   >
     {#if loading && eventsInView.length === 0}
       {#each getSkeletonIds() as id}
-        <Skeleton  divClass="skeleton-leather w-full" size="lg" />
+        <Skeleton classes={{wrapper: "skeleton-leather w-full"}} size="lg" />
       {/each}
     {:else if eventsInView.length > 0}
       {#each eventsInView as event}

src/lib/components/publications/PublicationHeader.svelte

@@ -49,50 +49,46 @@
 </script>
 
 {#if title != null && href != null}
-  <Card class="ArticleBox card-leather w-full h-48 flex flex-row space-x-2 relative">
+  <Card class="ArticleBox card-leather w-full relative flex flex-col sm:flex-row sm:space-x-4 overflow-hidden">
-    <div
+    <!-- Image block: full width on mobile, fixed side on md+ -->
-      class="flex-shrink-0 w-40 h-40 overflow-hidden rounded flex items-center justify-center p-2 -mt-2"
+    <div class="w-full h-48 sm:min-w-40 sm:w-40 sm:h-40 overflow-hidden flex items-center justify-center sm:rounded-l rounded-t sm:rounded-t-none">
-    >
       {#if image}
-        <LazyImage 
+        <LazyImage
-          src={image} 
+          src={image}
-          alt={title || "Publication image"}
+          alt={title || 'Publication image'}
           eventId={event.id}
           className="w-full h-full object-cover"
         />
       {:else}
-        <div 
+        <div
-          class="w-full h-full rounded"
+          class="w-full h-full"
           style="background-color: {generateDarkPastelColor(event.id)};"
-        >
+        ></div>
-        </div>
       {/if}
     </div>
-    
+
-    <div class="flex flex-col flex-grow min-w-0 overflow-hidden">
+    <!-- Content -->
-      <div class="flex flex-col flex-grow min-w-0 overflow-hidden">
+    <div class="flex flex-col min-w-0 p-3 sm:p-2 w-full">
-        <a href="/{href}" class="flex flex-col space-y-2 h-full min-w-0 overflow-hidden">
+      <a href="/{href}" class="flex flex-col space-y-2 flex-1 min-w-0 overflow-hidden decoration-none hover:underline">
-          <div class="flex-grow pt-2 min-w-0 overflow-hidden">
+        <div class="min-w-0">
-            <h2 class="text-lg font-bold line-clamp-2 break-words overflow-hidden" {title}>{title}</h2>
+          <h2 class="text-lg font-bold line-clamp-2 break-words overflow-hidden decoration-none" {title}>{title}</h2>
-            <h3 class="text-base font-normal mt-2 break-words overflow-hidden">
+          <h3 class="text-base font-normal mt-2 break-words overflow-hidden decoration-none">
-              by
+            {#if authorPubkey != null}
-              {#if authorPubkey != null}
+              by {@render userBadge(authorPubkey, author, ndk)}
-                {@render userBadge(authorPubkey, author, ndk)}
+            {:else}
-              {:else}
+              <span class="line-clamp-1 inline">by {author}</span>
-                <span class="truncate">{author}</span>
+            {/if}
-              {/if}
+          </h3>
-            </h3>
+        </div>
-          </div>
+      </a>
-          {#if version != "1"}
+      <div class="flex flex-row w-full justify-between">
-            <h3 class="text-sm font-semibold text-primary-600 dark:text-primary-400 mt-auto break-words overflow-hidden">version: {version}</h3>
+        {#if version != '1'}
-          {/if}
+          <h3 class="text-sm font-semibold text-primary-600 dark:text-primary-400 mt-auto break-words overflow-hidden">version: {version}</h3>
-        </a>
+        {/if}
+        <div class="flex ml-auto">
+          <CardActions {event} />
+        </div>
       </div>
     </div>
-    
-    <!-- Position CardActions at bottom-right -->
-    <div class="absolute bottom-2 right-2">
-      <CardActions {event} />
-    </div>
   </Card>
 {/if}