From d36d630bd09b1645c681eda7ebbe6f5f73cf117d Mon Sep 17 00:00:00 2001
From: Amolith <amolith@secluded.site>
Date: Tue, 17 Mar 2026 19:26:31 -0600
Subject: [PATCH] Keep status badge inline with task title on wrap

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.
---
 static/td.css       | 10 ++++++++++
 templates/task.html |  4 ++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/static/td.css b/static/td.css
index 2ab5fcbd9b2c32b37fa97fb811524d34a18047da..f73d878abf7e5ebf61e5005af66ee649598b6e81 100644
--- a/static/td.css
+++ b/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;
 }
diff --git a/templates/task.html b/templates/task.html
index b04bcc954f6a5a7e5c279ec0b167599d1a9941f9..d0751b01d222f27691f84ff08e23198571962a80 100644
--- a/templates/task.html
+++ b/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>