Keep status badge inline with task title on wrap

Amolith created 1 month ago

Drop the hstack flex layout from the task header and make the h1 inline
so the badge flows naturally after the last word of the title regardless
of line count. Use vertical-align: text-bottom to align the badge with
the heading text and restore spacing below the header.

Change summary

static/td.css       | 10 ++++++++++
templates/task.html |  4 ++--
2 files changed, 12 insertions(+), 2 deletions(-)

Detailed changes

static/td.css

@@ -50,6 +50,16 @@ code, pre, .mono { font-family: var(--font-mono); }
   transform: translateX(-50%);
   top: 0;
 }
+.task-title {
+  display: inline;
+  margin-inline-end: var(--space-2);
+}
+.task-title + .badge {
+  vertical-align: text-bottom;
+}
+.card > header:has(.task-title) {
+  margin-block-end: var(--space-6);
+}
 details:has(> .table) {
   overflow: visible;
 }

templates/task.html

@@ -18,8 +18,8 @@
 </nav>
 
 <article class="card mt-4">
-  <header class="hstack items-center gap-2">
-    <h1>{{ task.title }}</h1>
+  <header>
+    <h1 class="task-title">{{ task.title }}</h1>
     <span class="badge{% if task.status == "closed" %} success{% elif task.status == "in_progress" %} secondary{% endif %}">{{ task.status }}</span>
   </header>