style: improve library carousel card height

Author: julhoang

ak/homepage.py

@@ -198,6 +198,10 @@ def build_library_highlight_carousel(limit=3):
                 "docs_url": get_documentation_url(lv, latest=True) if lv else "",
             }
         )
+    slides.sort(
+        key=lambda slide: (len(slide["description"]), len(slide["category_tags"])),
+        reverse=True,
+    )  # sort by description length, then category count, to improve UI appearance
     return slides
 
 

static/css/v3/library-highlight-carousel.css

@@ -105,6 +105,7 @@
 
 .library-highlight-carousel__card-head {
   display: flex;
+  flex-wrap: wrap;
   align-items: flex-start;
   justify-content: space-between;
   gap: var(--space-medium);
@@ -139,9 +140,6 @@
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
-  /* Always reserve 3 lines so every card resolves to the same fit-content
-     height regardless of how long the description actually is. */
-  height: calc(3 * var(--line-height-relaxed) * var(--font-size-small));
 }
 
 /* ── Static meta row: "Added in" + dots ────────── */