Polish task card tag and action layout

Author: zh1peng

src/components/task-row.tsx

@@ -17,12 +17,14 @@ function ActionLink({
   href,
   label,
   icon,
-  tone = "local"
+  tone = "local",
+  className
 }: {
   href: string;
   label: string;
   icon: keyof typeof ACTION_ICONS;
   tone?: "local" | "preview" | "preview-primary";
+  className?: string;
 }) {
   const Icon = ACTION_ICONS[icon];
 
@@ -34,7 +36,8 @@ function ActionLink({
           ? "tb-button-primary"
           : tone === "preview"
             ? "tb-button-ghost bg-[#ffe9de]"
-            : "tb-button-secondary bg-[#d7ebf6]"
+            : "tb-button-secondary bg-[#d7ebf6]",
+        className
       )}
       href={href}
       target="_blank"
@@ -57,41 +60,36 @@ export function TaskRow({
 
   return (
     <article className="tb-frame bg-[#fffdf9] p-4 sm:p-5">
-      <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
-        <div className="min-w-0 flex-1">
-          <div className="flex flex-wrap items-center gap-2">
-            <h2 className="min-w-0 font-heading text-[2rem] font-bold leading-[0.95] text-[#25314d] sm:text-[2.35rem]">
-              {taskTitle(task)}
-            </h2>
-            {task.maturity ? <MaturityBadge maturity={task.maturity} /> : null}
-            {preview ? (
-              <span className="rounded-full bg-[#ecffe5] px-3 py-1 text-[11px] font-bold text-[#25314d]">
-                Preview ready
-              </span>
-            ) : null}
-          </div>
-
-          <div className="mt-3 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(task)}
-            </code>
-          </div>
-        </div>
+      <div className="min-w-0">
+        <h2 className="min-w-0 font-heading text-[2rem] font-bold leading-[0.95] text-[#25314d] sm:text-[2.35rem]">
+          {taskTitle(task)}
+        </h2>
 
-        <div className="self-start rounded-full bg-[#e2f3fb] px-4 py-2 text-sm font-bold text-[#25314d]">
-          Updated {formatShortDate(task.last_updated)}
+        <div className="mt-3 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(task)}
+          </code>
+          {task.maturity ? <MaturityBadge maturity={task.maturity} /> : null}
+          {preview ? (
+            <span className="rounded-full bg-[#ecffe5] px-3 py-1 text-[11px] font-bold text-[#25314d]">
+              Preview ready
+            </span>
+          ) : null}
+          <span className="rounded-full bg-[#e2f3fb] px-4 py-2 text-[11px] font-bold text-[#25314d]">
+            {formatShortDate(task.last_updated)}
+          </span>
         </div>
       </div>
 
-      <div className="mt-4 flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between">
+      <div className="mt-4 grid gap-4 xl:grid-cols-[minmax(0,1fr)_auto] xl:items-start">
         <p className="max-w-4xl text-sm leading-7 text-slate-700 sm:text-base">
           {task.short_description || "No description provided."}
         </p>
 
-        <div className="flex flex-wrap gap-2 xl:justify-end">
+        <div className="flex flex-wrap gap-2 xl:flex-col xl:items-end">
           <button
             type="button"
-            className="tb-focus-ring tb-button-primary"
+            className="tb-focus-ring tb-button-primary min-w-[190px] whitespace-nowrap"
             onClick={() => onOpen(task)}
           >
             Expand details
@@ -102,6 +100,7 @@ export function TaskRow({
               label="Run Preview"
               icon="play"
               tone="preview-primary"
+              className="min-w-[190px] whitespace-nowrap justify-center"
             />
           ) : null}
         </div>