From 31a0ec922f643a3cc534259a859134f16d736d44 Mon Sep 17 00:00:00 2001
From: lizerk <lizerk-dev@gmail.com>
Date: Thu, 6 Aug 2026 19:02:26 +0300
Subject: [PATCH] fix(tasks): unify grouped column container

---
 frontend/src/app/globals.css    |  9 +++------
 frontend/src/app/tasks/page.tsx | 10 +++++-----
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index a72bf50f..7041c8c1 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -1000,7 +1000,7 @@ html[data-bs-theme="dark"] .shadow-xl {
   .tasks-board-column-group {
     --tasks-board-stack-gap: 0.5rem;
     --tasks-board-column-header-height: 4rem;
-    --tasks-board-subcolumn-header-height: 5.125rem;
+    --tasks-board-subcolumn-header-height: 4rem;
   }
 
   .tasks-board-column-header {
@@ -1009,7 +1009,6 @@ html[data-bs-theme="dark"] .shadow-xl {
     z-index: 30;
     min-height: var(--tasks-board-column-header-height, 4rem);
     background: var(--surface-elevated);
-    box-shadow: 0 var(--tasks-board-stack-gap, 0.5rem) 0 var(--background);
   }
 
   .tasks-board-subcolumn-header-row {
@@ -1019,22 +1018,20 @@ html[data-bs-theme="dark"] .shadow-xl {
       + var(--tasks-board-stack-gap, 0.5rem)
     );
     z-index: 20;
-    min-height: var(--tasks-board-subcolumn-header-height, 5.125rem);
+    min-height: var(--tasks-board-subcolumn-header-height, 4rem);
     background: var(--surface-secondary);
-    box-shadow: 0 var(--tasks-board-stack-gap, 0.5rem) 0 var(--background);
   }
 
   .tasks-board-lane-header {
     position: sticky;
     top: calc(
       var(--tasks-board-column-header-height, 4rem)
-      + var(--tasks-board-subcolumn-header-height, 5.125rem)
+      + var(--tasks-board-subcolumn-header-height, 4rem)
       + var(--tasks-board-stack-gap, 0.5rem)
       + var(--tasks-board-stack-gap, 0.5rem)
     );
     z-index: 15;
     background: var(--surface-secondary);
-    box-shadow: 0 var(--tasks-board-stack-gap, 0.5rem) 0 var(--surface-secondary);
   }
 
   .tasks-board-content-section-continuous {
diff --git a/frontend/src/app/tasks/page.tsx b/frontend/src/app/tasks/page.tsx
index 07842fa1..1b15a4f9 100644
--- a/frontend/src/app/tasks/page.tsx
+++ b/frontend/src/app/tasks/page.tsx
@@ -1216,7 +1216,7 @@ function BoardSubcolumnHeader({
       className={`flex w-full min-w-0 flex-col transition ${isDragging ? "opacity-70" : ""}`}
     >
       <div
-        className={`flex items-center justify-between gap-3 rounded-xl border bg-[var(--surface-primary)] px-3 py-3 shadow-sm transition ${columnBorderClass} ${
+        className={`flex min-h-16 items-center justify-between gap-3 rounded-xl border bg-[var(--surface-primary)] px-3 py-3 shadow-sm transition ${columnBorderClass} ${
           isDragging ? "shadow-xl" : ""
         }`}
       >
@@ -1517,7 +1517,7 @@ function BoardColumnGroup({
         </div>
       </div>
       {contentVisible ? (
-        <div className="mt-2 flex w-full min-w-0 flex-col gap-2 xl:w-auto xl:min-w-max">
+        <div className="mt-2 flex w-full min-w-0 flex-col gap-2 rounded-xl border border-[var(--border-subtle)] bg-[var(--surface-secondary)] p-2 xl:w-auto xl:min-w-max">
           {children}
         </div>
       ) : null}
@@ -1547,7 +1547,7 @@ function BoardColumnRowView({
   hasFollowingSection: boolean;
 }) {
   return (
-    <section className={`tasks-board-content-section min-w-0 rounded-xl border border-[var(--border-subtle)] bg-[var(--surface-secondary)] p-2 ${
+    <section className={`tasks-board-content-section min-w-0 ${
       hasFollowingSection ? "tasks-board-content-section-continuous" : ""
     }`}>
       <div className={`tasks-board-lane-header flex items-center justify-between gap-3 px-1 ${expanded ? "mb-2" : ""}`}>
@@ -1632,7 +1632,7 @@ function BoardBaseColumnsView({
   hasFollowingSection: boolean;
 }) {
   return (
-    <section className={`tasks-board-content-section min-w-0 rounded-xl border border-[var(--border-subtle)] bg-[var(--surface-secondary)] p-2 ${
+    <section className={`tasks-board-content-section min-w-0 ${
       hasFollowingSection ? "tasks-board-content-section-continuous" : ""
     }`}>
       {headers ? (
@@ -7070,7 +7070,7 @@ function TasksPageContent() {
                         return (
                           <div className="flex min-w-0 flex-col gap-2 xl:w-max">
                             <div
-                              className="tasks-board-subcolumn-header-row flex min-w-0 flex-col gap-2 rounded-xl border border-[var(--border-subtle)] bg-[var(--surface-secondary)] p-2 xl:grid xl:w-max"
+                              className="tasks-board-subcolumn-header-row flex min-w-0 flex-col gap-2 xl:grid xl:w-max"
                               style={{ gridTemplateColumns }}
                             >
                               {subcolumnHeaders}