From c07b09a4756134ad54ec40d32046b43a56a83ac3 Mon Sep 17 00:00:00 2001
From: Alex Soffronow Pagonidis
 <237136924+alex-clickhouse@users.noreply.github.com>
Date: Sun, 9 Aug 2026 17:53:34 +0000
Subject: [PATCH] Give task titles the width the status select was holding
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On a phone the status select sat beside the title in a shrink-0 column,
holding ~110px of a ~330px card. The title wrapped inside what was left,
so a normal task ran to three lines.

Below `sm` the select drops to the meta line, where "5m ago · from
manual" leaves room to spare, and the title takes the full card. Titles
that took three lines now take two, and a screenful goes from five cards
to six.

The status badge is hidden at the same breakpoint: the select beside it
names the status already, and one value is not worth two controls and a
row of vertical space.

Done by ordering rather than duplication — one DOM, no second copy of the
select to keep in sync:

  phone   title / meta + controls
  ≥ sm    title + controls / meta

Desktop keeps the badge, the select at the top right, and the meta line
beneath, exactly as before.

Refs #271
---
 web/src/components/Tasks/TaskCard.tsx | 60 +++++++++++++++++----------
 1 file changed, 38 insertions(+), 22 deletions(-)

diff --git a/web/src/components/Tasks/TaskCard.tsx b/web/src/components/Tasks/TaskCard.tsx
index ea99a4d0..b7812a14 100644
--- a/web/src/components/Tasks/TaskCard.tsx
+++ b/web/src/components/Tasks/TaskCard.tsx
@@ -15,30 +15,46 @@ export function TaskCard({ task, onStatusChange }: {
       onClick={() => navigate(`/tasks/${task.id}`)}
       className="p-4 bg-surface border border-border-subtle rounded-lg hover:border-border transition-colors cursor-pointer"
     >
-      <div className="flex items-start justify-between gap-3">
-        <div className="min-w-0 flex-1">
-          <h3 className="font-medium text-[15px] text-text mb-1">{task.title}</h3>
-          <div className="flex items-center gap-3 text-[12px]">
+      {/* On a phone the status select held ~110px against a title that then
+          had to wrap inside ~200px. It drops to the meta line instead, where
+          there is room to spare, and the title gets the full card width.
+          Ordering does it without duplicating anything:
+
+            phone   title / meta + controls
+            ≥ sm    title + controls / meta                                */}
+      <div className="flex flex-wrap items-start gap-x-3 gap-y-2">
+        <h3 className="font-medium text-[15px] text-text min-w-0 basis-full sm:basis-0 sm:flex-1 order-0">
+          {task.title}
+        </h3>
+
+        <div className="flex items-center gap-3 text-[12px] min-w-0 order-2 sm:order-3 sm:basis-full">
+          {/* Hidden on a phone: the select sitting beside it already names
+              the status, and one value is not worth showing twice. */}
+          <span className="hidden sm:flex">
             <StatusBadge status={task.status} />
-            {task.deadline && (
-              <span className="flex items-center gap-1 text-text-dim">
-                <Calendar size={11} /> {task.deadline}
-              </span>
-            )}
-            {task.updated_at && (
-              <span
-                className="flex items-center gap-1 text-text-faint"
-                title={`Updated ${task.updated_at}`}
-              >
-                <Clock size={11} /> {formatTimeAgo(task.updated_at)}
-              </span>
-            )}
-            {task.source && (
-              <span className="text-text-faint">from {task.source}</span>
-            )}
-          </div>
+          </span>
+          {task.deadline && (
+            <span className="flex items-center gap-1 text-text-dim whitespace-nowrap">
+              <Calendar size={11} /> {task.deadline}
+            </span>
+          )}
+          {task.updated_at && (
+            <span
+              className="flex items-center gap-1 text-text-faint whitespace-nowrap"
+              title={`Updated ${task.updated_at}`}
+            >
+              <Clock size={11} /> {formatTimeAgo(task.updated_at)}
+            </span>
+          )}
+          {task.source && (
+            <span className="text-text-faint truncate">from {task.source}</span>
+          )}
         </div>
-        <div className="flex items-center gap-2 shrink-0" onClick={e => e.stopPropagation()}>
+
+        <div
+          className="flex items-center gap-2 shrink-0 ml-auto order-3 sm:order-2"
+          onClick={e => e.stopPropagation()}
+        >
           {task.source_url && (
             <a
               href={task.source_url}