From b01592693e41cb458c3e9d649528a6bf713d8397 Mon Sep 17 00:00:00 2001
From: silberengel <silberengel7@protonmail.com>
Date: Sun, 3 Aug 2025 22:18:35 +0200
Subject: [PATCH] fixed landing page grid

---
 src/app.css                                   | 22 +++++++++++++++++++
 .../publications/PublicationFeed.svelte       |  2 +-
 .../publications/PublicationHeader.svelte     | 18 +++++++--------
 src/routes/+layout.svelte                     |  2 +-
 4 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/src/app.css b/src/app.css
index 4e2c9b2..b5169ae 100644
--- a/src/app.css
+++ b/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 {
diff --git a/src/lib/components/publications/PublicationFeed.svelte b/src/lib/components/publications/PublicationFeed.svelte
index 701551b..48e4eba 100644
--- a/src/lib/components/publications/PublicationFeed.svelte
+++ b/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}
diff --git a/src/lib/components/publications/PublicationHeader.svelte b/src/lib/components/publications/PublicationHeader.svelte
index c293fc9..c1c6222 100644
--- a/src/lib/components/publications/PublicationHeader.svelte
+++ b/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">
-        <a href="/{href}" class="flex flex-col space-y-2 h-full">
-          <div class="flex-grow pt-2">
-            <h2 class="text-lg font-bold line-clamp-2" {title}>{title}</h2>
-            <h3 class="text-base font-normal mt-2">
+    <div class="flex flex-col flex-grow space-x-2 min-w-0">
+      <div class="flex flex-col flex-grow min-w-0">
+        <a href="/{href}" class="flex flex-col space-y-2 h-full min-w-0">
+          <div class="flex-grow pt-2 min-w-0">
+            <h2 class="text-lg font-bold line-clamp-2 break-words" {title}>{title}</h2>
+            <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>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 90335f6..2fff8a9 100644
--- a/src/routes/+layout.svelte
+++ b/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>