un poquito mejor los estilos

apps/web/src/lib/ui/data/TaskItem.svelte

@@ -200,9 +200,8 @@
 </script>
 
 <li class="task" class:completed>
-  <div class="left">
+	<div class="code">#{codeStr}</div>
-    <span class="code">#{codeStr}</span>
+	<div
-    <span
 		class="desc"
 		class:editing={editingText}
 		class:completed
@@ -221,8 +220,9 @@
 			} else if (e.key === "Enter") {
 				e.preventDefault();
 			}
-      }}>{description}</span
+		}}
 	>
+		{description}
 	</div>
 
 	<div class="meta">
@@ -326,10 +326,10 @@
 <style>
 	.task {
 		display: grid;
-    grid-template-columns: 2fr 1fr;
+		grid-template-columns: 1fr max-content;
-    grid-template-rows: max-content max-content;
+		grid-template-rows: min-content max-content max-content;
 		grid-gap: 2px;
-    padding: 8px 0;
+		padding: 4px;
 		border-bottom: 1px solid var(--color-border);
 		position: relative;
 		margin: 0 0 4px 0;
@@ -337,27 +337,22 @@
 	.task:last-child {
 		border-bottom: 0;
 	}
-  .left {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--space-2);
-    flex-wrap: wrap;
-    min-width: 0;
-  }
 	.code {
 		font-weight: 600;
 		font-size: 0.8rem;
 		color: var(--color-text-muted);
 		font-family: monospace;
 		letter-spacing: 0.5px;
-    position: absolute;
+		grid-row: 1/2;
-    top: 0px;
+		grid-column: 1/2;
-    left: 2px;
+	}
+	.completed {
+		opacity: 0.5;
 	}
 	.desc {
 		padding: 8px;
-    grid-column: 1/2;
+		grid-column: 1/3;
-    grid-row: 1/3;
+		grid-row: 2/3;
 	}
 
 	.desc.editing {
@@ -368,8 +363,9 @@
 		border-radius: 4px;
 		white-space: normal;
 		text-overflow: clip;
-    grid-column: 2/3;
+		grid-column: 1/3;
 		grid-row: 2/3;
+		margin: 16px 0;
 	}
 	.desc.completed {
 		text-decoration: line-through;
@@ -378,6 +374,8 @@
 		justify-self: end;
 		align-items: start;
 		gap: 8px;
+		grid-row: 1/2;
+		grid-column: 2/3;
 	}
 	.muted {
 		color: var(--color-text-muted);
@@ -395,6 +393,7 @@
 		border-color: var(--color-warning);
 	}
 	.assignees {
+		grid-row: 3/4;
 		grid-column: 1/2;
 		text-align: left;
 		align-self: end;
@@ -411,13 +410,13 @@
 	}
 
 	.actions {
-    display: inline-flex;
+		display: block;
 		gap: 6px;
 		justify-self: end;
 		align-items: center;
 		flex-wrap: wrap;
 		grid-column: 2/3;
-    grid-row: 2/3;
+		grid-row: 3/4;
 	}
 	.btn {
 		padding: 4px 8px;