fixed landing page grid

src/app.css

@@ -247,6 +247,28 @@
     @apply text-base font-semibold;
   }
 
+  /* Line clamp utilities for text truncation */
+  .line-clamp-1 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+  }
+
+  .line-clamp-2 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+  }
+
+  .line-clamp-3 {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+  }
+
   /* Lists */
   .ol-leather li a,
   .ul-leather li a {

src/lib/components/publications/PublicationFeed.svelte

@@ -396,7 +396,7 @@
 
 <div class="flex flex-col space-y-4">
   <div
-    class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 w-full"
+    class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 w-full"
   >
     {#if loading && eventsInView.length === 0}
       {#each getSkeletonIds() as id}

src/lib/components/publications/PublicationHeader.svelte

@@ -47,9 +47,9 @@
 </script>
 
 {#if title != null && href != null}
-  <Card class="ArticleBox card-leather max-w-md h-48 flex flex-row space-x-2 relative">
+  <Card class="ArticleBox card-leather w-full h-48 flex flex-row space-x-2 relative">
     <div
-      class="flex-shrink-0 w-32 h-40 overflow-hidden rounded flex items-center justify-center p-2 -mt-2"
+      class="flex-shrink-0 w-40 h-40 overflow-hidden rounded flex items-center justify-center p-2 -mt-2"
     >
       {#if image}
         <LazyImage 
@@ -67,12 +67,12 @@
       {/if}
     </div>
     
-    <div class="flex flex-col flex-grow space-x-2">
+    <div class="flex flex-col flex-grow space-x-2 min-w-0">
-      <div class="flex flex-col flex-grow">
+      <div class="flex flex-col flex-grow min-w-0">
-        <a href="/{href}" class="flex flex-col space-y-2 h-full">
+        <a href="/{href}" class="flex flex-col space-y-2 h-full min-w-0">
-          <div class="flex-grow pt-2">
+          <div class="flex-grow pt-2 min-w-0">
-            <h2 class="text-lg font-bold line-clamp-2" {title}>{title}</h2>
+            <h2 class="text-lg font-bold line-clamp-2 break-words" {title}>{title}</h2>
-            <h3 class="text-base font-normal mt-2">
+            <h3 class="text-base font-normal mt-2 break-words">
               by
               {#if authorPubkey != null}
                 {@render userBadge(authorPubkey, author)}
@@ -82,7 +82,7 @@
             </h3>
           </div>
           {#if version != "1"}
-            <h3 class="text-sm font-semibold text-primary-600 dark:text-primary-400 mt-auto">version: {version}</h3>
+            <h3 class="text-sm font-semibold text-primary-600 dark:text-primary-400 mt-auto break-words">version: {version}</h3>
           {/if}
         </a>
       </div>

src/routes/+layout.svelte

@@ -45,7 +45,7 @@
   <meta name="twitter:image" content={image} />
 </svelte:head>
 
-<div class={"leather mt-[76px] w-full max-w-screen-lg mx-auto flex flex-col items-center"}>
+<div class={"leather mt-[76px] w-full mx-auto flex flex-col items-center"}>
   <Navigation class="fixed top-0" />
   <slot />
 </div>