From 3173be8d7942a6e9f19e067c1798daf1ded219f8 Mon Sep 17 00:00:00 2001
From: Christian Beutel <>
Date: Sun, 9 Feb 2025 11:48:27 +0100
Subject: [PATCH] fixes TrailCard height

---
 web/src/lib/components/trail/trail_card.svelte | 10 +++++-----
 web/src/lib/util/maplibre_util.ts              |  6 +++---
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/web/src/lib/components/trail/trail_card.svelte b/web/src/lib/components/trail/trail_card.svelte
index 7309acd0..8dde82c6 100644
--- a/web/src/lib/components/trail/trail_card.svelte
+++ b/web/src/lib/components/trail/trail_card.svelte
@@ -45,17 +45,17 @@
 </script>
 
 <div
-    class="trail-card relative rounded-2xl border border-input-border min-w-72 {fullWidth
+    class="trail-card relative rounded-2xl border border-input-border min-w-72 h-[386px] {fullWidth
         ? ''
-        : 'lg:w-72'} cursor-pointer"
+        : 'lg:w-72'} cursor-pointer flex flex-col"
     {onmouseenter}
     {onmouseleave}
     role="listitem"
 >
     <div
-        class="relative w-full min-h-40 max-h-48 overflow-hidden rounded-t-2xl"
+        class="relative w-full basis-full max-h-48 overflow-hidden rounded-t-2xl"
     >
-        <img class="min-h-40 w-full" id="header-img" src={thumbnail} alt="" />
+        <img class="h-full w-full" id="header-img" src={thumbnail} alt="" />
     </div>
     {#if (trail.public || trailIsShared) && pb.authStore.model}
         <div
@@ -79,7 +79,7 @@
     {/if}
     <div class="p-4">
         <div>
-            <h4 class="font-semibold text-lg">{trail.name}</h4>
+            <h4 class="font-semibold text-lg line-clamp-2">{trail.name}</h4>
             {#if trail.date}
                 <p class="text-xs text-gray-500 mb-3">
                     {new Date(trail.date).toLocaleDateString(undefined, {
diff --git a/web/src/lib/util/maplibre_util.ts b/web/src/lib/util/maplibre_util.ts
index 8691a785..dda05f78 100644
--- a/web/src/lib/util/maplibre_util.ts
+++ b/web/src/lib/util/maplibre_util.ts
@@ -150,7 +150,7 @@ export function createPopupFromTrail(trail: Trail) {
 
     // Create a list item element
     const listItem = document.createElement("li");
-    listItem.className = "flex gap-4 cursor-pointer text-content max-w-80";
+    listItem.className = "flex gap-4 cursor-pointer text-content max-w-72";
 
     // Create the image container
     const imageContainer = document.createElement("div");
@@ -158,7 +158,7 @@ export function createPopupFromTrail(trail: Trail) {
 
     // Create the image element
     const img = document.createElement("img");
-    img.className = "h-full max-w-20 object-cover";
+    img.className = "h-full w-28 object-cover";
     img.src = thumbnail; // Set image source safely
     img.alt = ""; // Always include a safe alt attribute
     imageContainer.appendChild(img);
@@ -169,7 +169,7 @@ export function createPopupFromTrail(trail: Trail) {
 
     // Add trail name
     const trailName = document.createElement("h4");
-    trailName.className = "font-semibold text-lg";
+    trailName.className = "font-semibold text-lg line-clamp-1";
     trailName.textContent = trail.name; // Set trail name safely
     textContainer.appendChild(trailName);