From 4b5c3a3725aeb14a589ecc5c50961d5dd17b0977 Mon Sep 17 00:00:00 2001
From: mikael-lovqvists-claude-agent <mikaels.claude.agent@efforting.tech>
Date: Sun, 17 May 2026 22:32:57 +0000
Subject: [PATCH] Redesign entry row layout: 3-column grid with stacked meta

- expand | meta (type/id/status/priority stacked) | main (title/body/footer)
- Tags and actions in a .task-footer row inside .task-main
- Title now gets full remaining width

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 public/style.css      | 37 ++++++++++++++++++++++++++++++-------
 public/templates.html | 24 ++++++++++++++----------
 2 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/public/style.css b/public/style.css
index 3fce823..8c83deb 100644
--- a/public/style.css
+++ b/public/style.css
@@ -109,15 +109,38 @@ main { padding: 1.25rem; }
 
 .task-row {
 	display: grid;
-	grid-template-columns: 1.25rem 2.5rem 5rem 4.5rem 1fr auto auto;
-	align-items: center;
-	gap: 0.5rem;
+	grid-template-columns: 1.25rem auto 1fr;
+	align-items: start;
+	gap: 0.5rem 0.75rem;
 	padding: 0.5rem 0.75rem;
 	background: #242424;
 	border-radius: 4px;
 	border-left: 3px solid transparent;
 }
 
+.task-meta {
+	display: flex;
+	flex-direction: column;
+	gap: 0.2rem;
+	width: 4.5rem;
+	align-items: stretch;
+}
+
+.task-main {
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+	min-width: 0;
+}
+
+.task-footer {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	flex-wrap: wrap;
+	margin-top: 0.1rem;
+}
+
 .task-row[data-priority='high']   { border-left-color: #e05555; }
 .task-row[data-priority='normal'] { border-left-color: #5588e0; }
 .task-row[data-priority='low']    { border-left-color: #555; }
@@ -127,7 +150,7 @@ main { padding: 1.25rem; }
 .task-row[data-status='done']      { opacity: 0.5; }
 .task-row[data-status='cancelled'] { opacity: 0.4; text-decoration: line-through; }
 
-.task-id    { color: #666; font-size: 12px; }
+.task-id    { color: #666; font-size: 11px; text-align: center; }
 .task-title { font-weight: 500; }
 
 .task-status, .task-priority {
@@ -139,6 +162,8 @@ main { padding: 1.25rem; }
 	letter-spacing: 0.03em;
 }
 
+.task-actions { display: flex; gap: 0.4rem; }
+
 .task-status[data-val='open']      { background: #1e3a5f; color: #6ab0f5; }
 .task-status[data-val='done']      { background: #1a3a1a; color: #6ad06a; }
 .task-status[data-val='cancelled'] { background: #2a1a1a; color: #c06060; }
@@ -148,7 +173,7 @@ main { padding: 1.25rem; }
 .task-priority[data-val='normal'] { background: transparent; color: #777; }
 .task-priority[data-val='low']    { background: transparent; color: #555; }
 
-.task-tags { display: flex; gap: 0.25rem; flex-wrap: wrap; }
+.task-tags { display: flex; gap: 0.25rem; flex-wrap: wrap; align-items: center; }
 
 .tag {
 	font-size: 11px;
@@ -161,8 +186,6 @@ main { padding: 1.25rem; }
 .clickable-tag { cursor: pointer; }
 .clickable-tag:hover { background: #363650; color: #aabbee; }
 
-.task-actions { display: flex; gap: 0.4rem; }
-
 .btn-expand {
 	width: 1.25rem;
 	height: 1.25rem;
diff --git a/public/templates.html b/public/templates.html
index a266d02..8e4d84a 100644
--- a/public/templates.html
+++ b/public/templates.html
@@ -2,19 +2,23 @@
 <template id="t-entry-row">
 	<div class="task-row">
 		<button class="btn-expand" hidden></button>
-		<span class="task-id"></span>
-		<span class="task-status"></span>
-		<span class="task-priority"></span>
-		<div class="task-main">
+		<div class="task-meta">
 			<div class="entry-type-chip" hidden></div>
+			<span class="task-id"></span>
+			<span class="task-status"></span>
+			<span class="task-priority"></span>
+		</div>
+		<div class="task-main">
 			<div class="task-title markup"></div>
 			<div class="task-body markup" hidden></div>
-		</div>
-		<span class="task-tags"></span>
-		<div class="task-actions">
-			<button class="btn-sub">+ Sub</button>
-			<button class="btn-edit">Edit</button>
-			<button class="btn-delete">Delete</button>
+			<div class="task-footer">
+				<span class="task-tags"></span>
+				<div class="task-actions">
+					<button class="btn-sub">+ Sub</button>
+					<button class="btn-edit">Edit</button>
+					<button class="btn-delete">Delete</button>
+				</div>
+			</div>
 		</div>
 	</div>
 </template>