Stabilize featured task carousel layout

Author: zh1peng

src/app/page.tsx

@@ -2,7 +2,7 @@ import Link from "next/link";
 import { FeaturedTaskCarousel } from "@/components/featured-task-carousel";
 import { HomeHeroStats } from "@/components/home-hero-stats";
 import { ResourceCard } from "@/components/resource-card";
-import { getIndex, type TaskIndexItem } from "@/lib/task-index";
+import { getIndex } from "@/lib/task-index";
 import {
   contributeResources,
   frameworkHighlights,
@@ -11,41 +11,7 @@ import {
   tutorialResources
 } from "@/lib/site-content";
 
-const FIXED_FEATURED_REPOS = ["T000002-bart", "T000012-sst", "T000006-mid"] as const;
-const FIXED_FEATURED_REPO_SET = new Set<string>(FIXED_FEATURED_REPOS);
-const RANDOM_FEATURED_COUNT = 2;
-
-function buildSeed(seedSource: string): number {
-  return Array.from(seedSource).reduce(
-    (seed, character) => ((seed * 33) ^ character.charCodeAt(0)) >>> 0,
-    5381
-  );
-}
-
-function seededShuffle<T>(items: T[], seedSource: string): T[] {
-  const shuffled = [...items];
-  let seed = buildSeed(seedSource);
-
-  for (let index = shuffled.length - 1; index > 0; index -= 1) {
-    seed = (seed * 1664525 + 1013904223) >>> 0;
-    const swapIndex = seed % (index + 1);
-    [shuffled[index], shuffled[swapIndex]] = [shuffled[swapIndex], shuffled[index]];
-  }
-
-  return shuffled;
-}
-
-function uniqueTasks(tasks: TaskIndexItem[]): TaskIndexItem[] {
-  const seen = new Set<string>();
-
-  return tasks.filter((task) => {
-    if (!task.repo || seen.has(task.repo)) {
-      return false;
-    }
-    seen.add(task.repo);
-    return true;
-  });
-}
+const FEATURED_REPOS = ["T000006-mid", "T000002-bart", "T000012-sst"] as const;
 
 function TapsDiagram() {
   return (
@@ -130,18 +96,10 @@ function TapsDiagram() {
 export default function Page() {
   const index = getIndex();
   const tasks = index.tasks ?? [];
-  const fixedFeaturedTasks = FIXED_FEATURED_REPOS.map((repo) =>
+  const featuredTasks = FEATURED_REPOS.map((repo) =>
     tasks.find((task) => task.repo === repo)
-  ).filter((task): task is TaskIndexItem => Boolean(task));
-  const randomFeaturedTasks = seededShuffle(
-    tasks.filter((task) => !FIXED_FEATURED_REPO_SET.has(task.repo)),
-    index.generated_at
-  ).slice(0, RANDOM_FEATURED_COUNT);
-  const curatedFeaturedTasks = uniqueTasks([
-    ...fixedFeaturedTasks,
-    ...randomFeaturedTasks,
-    ...tasks
-  ]).slice(0, FIXED_FEATURED_REPOS.length + RANDOM_FEATURED_COUNT);
+  ).filter((task): task is (typeof tasks)[number] => Boolean(task));
+  const curatedFeaturedTasks = featuredTasks.length > 0 ? featuredTasks : tasks.slice(0, 3);
 
   return (
     <div className="space-y-20 pb-8">

src/components/featured-task-carousel.tsx

@@ -99,8 +99,8 @@ export function FeaturedTaskCarousel({
               ))}
             </div>
 
-            <div className="tb-frame-soft flex min-h-[320px] flex-col bg-[#f8fcff] p-5 sm:min-h-[360px] sm:p-6">
-              <div className="flex flex-wrap items-center gap-2 text-xs text-slate-600">
+            <div className="tb-frame-soft flex h-[360px] flex-col bg-[#f8fcff] p-5 sm:h-[392px] sm:p-6">
+              <div className="min-h-[3rem] content-start flex flex-wrap items-center gap-2 text-xs text-slate-600">
                 <code className="rounded-full border-2 border-[#25314d] bg-white px-2.5 py-1 font-mono text-[11px] font-semibold text-[#25314d]">
                   {taskHandle(activeTask)}
                 </code>
@@ -115,15 +115,31 @@ export function FeaturedTaskCarousel({
                 </span>
               </div>
 
-              <div className="mt-4 font-heading text-[2rem] font-bold leading-[1.02] text-[#25314d] sm:text-[2.45rem]">
+              <div
+                className="mt-4 min-h-[4.2rem] font-heading text-[2rem] font-bold leading-[1.02] text-[#25314d] sm:min-h-[5.1rem] sm:text-[2.45rem]"
+                style={{
+                  display: "-webkit-box",
+                  WebkitLineClamp: 2,
+                  WebkitBoxOrient: "vertical",
+                  overflow: "hidden"
+                }}
+              >
                 {taskTitle(activeTask)}
               </div>
 
-              <p className="mt-3 max-w-[38ch] text-sm leading-7 text-slate-700 sm:text-base">
+              <p
+                className="mt-3 min-h-[5.25rem] max-w-[38ch] text-sm leading-7 text-slate-700 sm:min-h-[5.75rem] sm:text-base"
+                style={{
+                  display: "-webkit-box",
+                  WebkitLineClamp: 3,
+                  WebkitBoxOrient: "vertical",
+                  overflow: "hidden"
+                }}
+              >
                 {activeTask.short_description}
               </p>
 
-              <div className="mt-6 flex flex-wrap gap-3 sm:mt-auto">
+              <div className="mt-auto flex flex-col gap-3 sm:flex-row sm:flex-wrap">
                 <button
                   type="button"
                   className="tb-focus-ring tb-button-primary"