From ed980b47e4e6c71a0287ecb17c54fee6e1ed2c92 Mon Sep 17 00:00:00 2001
From: Hugo <exo-ops@proton.me>
Date: Thu, 16 Apr 2026 18:42:42 +0200
Subject: [PATCH] ui: kaban task page improvements

---
 packages/client/src/ui.css.ts                 | 43 +++++++++++++++++++
 .../src/ui/pages/feature-request.tsx          |  6 +--
 packages/feature-requests/src/ui/ui.css.ts    | 34 +--------------
 packages/kanban/src/ui/pages/task.tsx         | 10 ++---
 packages/kanban/src/ui/ui.css.ts              |  7 ---
 5 files changed, 52 insertions(+), 48 deletions(-)

diff --git a/packages/client/src/ui.css.ts b/packages/client/src/ui.css.ts
index fec6c89..e37f52a 100644
--- a/packages/client/src/ui.css.ts
+++ b/packages/client/src/ui.css.ts
@@ -199,6 +199,49 @@ export const cardFlat = style({
   },
 });
 
+export const detailCardWrapper = style({
+  border: `1px solid ${vars.color.border}`,
+  borderRadius: vars.radius.lg,
+  boxShadow: `0 1px 3px ${vars.color.shadow}`,
+});
+
+export const detailCardHeader = style({
+  backgroundColor: vars.color.surface,
+  borderRadius: `${vars.radius.lg} ${vars.radius.lg} 0 0`,
+  paddingBlock: vars.space.md,
+  paddingInline: vars.space.md,
+  selectors: {
+    "&:last-child": {
+      borderRadius: vars.radius.lg,
+    },
+  },
+  "@media": {
+    [bp.sm]: {
+      paddingInline: vars.space.lg,
+    },
+  },
+});
+
+export const detailCardDescription = style({
+  fontSize: "0.9375rem",
+  lineHeight: 1.7,
+  whiteSpace: "pre-wrap",
+  paddingBlock: vars.space.md,
+  paddingInline: vars.space.md,
+  backgroundColor: vars.color.bg,
+  borderBlockStart: `1px solid ${vars.color.border}`,
+  selectors: {
+    "&:last-child": {
+      borderRadius: `0 0 ${vars.radius.lg} ${vars.radius.lg}`,
+    },
+  },
+  "@media": {
+    [bp.sm]: {
+      paddingInline: vars.space.lg,
+    },
+  },
+});
+
 // ---- Buttons ----
 
 const btnBase = {
diff --git a/packages/feature-requests/src/ui/pages/feature-request.tsx b/packages/feature-requests/src/ui/pages/feature-request.tsx
index 21cbb97..68e4bcf 100644
--- a/packages/feature-requests/src/ui/pages/feature-request.tsx
+++ b/packages/feature-requests/src/ui/pages/feature-request.tsx
@@ -676,8 +676,8 @@ export function FeatureRequestPage() {
           <p class={ui.muted}>Feature request not found.</p>
         ) : (
           <div class={frUi.detailContent}>
-            <div class={frUi.detailCardWrapper}>
-              <div class={frUi.detailCardHeader}>
+            <div class={ui.detailCardWrapper}>
+              <div class={ui.detailCardHeader}>
                 <RequestCard
                   fr={fr}
                   hasVoted={votedIds.value.has(fr.id)}
@@ -735,7 +735,7 @@ export function FeatureRequestPage() {
                 </RequestCard>
               </div>
 
-              {fr.description && <div class={frUi.descriptionBlock}>{fr.description}</div>}
+              {fr.description && <div class={ui.detailCardDescription}>{fr.description}</div>}
 
               {data.duplicateOf && (
                 <p class={`${ui.muted} ${frUi.duplicateNotice}`}>
diff --git a/packages/feature-requests/src/ui/ui.css.ts b/packages/feature-requests/src/ui/ui.css.ts
index 9152350..7b2c013 100644
--- a/packages/feature-requests/src/ui/ui.css.ts
+++ b/packages/feature-requests/src/ui/ui.css.ts
@@ -67,44 +67,12 @@ export const detailContent = style({
   gap: vars.space.xl,
 });
 
-export const detailCardWrapper = style({
-  border: `1px solid ${vars.color.border}`,
-  borderRadius: vars.radius.lg,
-  boxShadow: `0 1px 3px ${vars.color.shadow}`,
-  overflow: "hidden",
-});
-
-export const detailCardHeader = style({
-  backgroundColor: vars.color.surface,
-  paddingBlock: vars.space.md,
-  paddingInline: vars.space.md,
-  "@media": {
-    [bp.sm]: {
-      paddingInline: vars.space.lg,
-    },
-  },
-});
-
-export const descriptionBlock = style({
-  fontSize: "0.9375rem",
-  lineHeight: 1.7,
-  whiteSpace: "pre-wrap",
-  paddingBlock: vars.space.md,
-  paddingInline: vars.space.md,
-  backgroundColor: vars.color.bg,
-  borderBlockStart: `1px solid ${vars.color.border}`,
-  "@media": {
-    [bp.sm]: {
-      paddingInline: vars.space.lg,
-    },
-  },
-});
-
 export const duplicateNotice = style({
   paddingBlock: vars.space.sm,
   paddingInline: vars.space.md,
   backgroundColor: vars.color.bg,
   borderBlockStart: `1px solid ${vars.color.border}`,
+  borderRadius: `0 0 ${vars.radius.lg} ${vars.radius.lg}`,
   "@media": {
     [bp.sm]: {
       paddingInline: vars.space.lg,
diff --git a/packages/kanban/src/ui/pages/task.tsx b/packages/kanban/src/ui/pages/task.tsx
index 45f359e..318415c 100644
--- a/packages/kanban/src/ui/pages/task.tsx
+++ b/packages/kanban/src/ui/pages/task.tsx
@@ -509,8 +509,8 @@ export function TaskPage() {
           <p class={ui.muted}>Task not found.</p>
         ) : (
           <div class={kbUi.detailContent}>
-            <div class={ui.stackLg}>
-              <div class={ui.card}>
+            <div class={ui.detailCardWrapper}>
+              <div class={ui.detailCardHeader}>
                 {editing.value ? (
                   <div class={ui.formStack}>
                     <div>
@@ -558,7 +558,7 @@ export function TaskPage() {
                     </div>
                   </div>
                 ) : (
-                  <>
+                  <div class={ui.stack}>
                     <div class={ui.row}>
                       <h2 class={ui.cardTitle}>
                         <span class={ui.muted}>#{task.number}</span> {task.title}
@@ -624,12 +624,12 @@ export function TaskPage() {
                       )}
                       <span class={ui.muted}>{formatDate(task.createdAt, fullDateOpts)}</span>
                     </div>
-                  </>
+                  </div>
                 )}
               </div>
 
               {!editing.value && task.description && (
-                <div class={kbUi.descriptionBlock}>{task.description}</div>
+                <div class={ui.detailCardDescription}>{task.description}</div>
               )}
             </div>
 
diff --git a/packages/kanban/src/ui/ui.css.ts b/packages/kanban/src/ui/ui.css.ts
index b40531b..28676ac 100644
--- a/packages/kanban/src/ui/ui.css.ts
+++ b/packages/kanban/src/ui/ui.css.ts
@@ -155,13 +155,6 @@ export const detailContent = style({
   gap: vars.space.xl,
 });
 
-export const descriptionBlock = style({
-  fontSize: "0.9375rem",
-  lineHeight: 1.7,
-  whiteSpace: "pre-wrap",
-  paddingBlockEnd: vars.space.xl,
-  borderBlockEnd: `1px solid ${vars.color.border}`,
-});
 
 export const titleRow = style({
   display: "flex",
-- 
2.51.2