From c820b5caa43649c3278ec949ce2936ce4e35a80a Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 6 Oct 2025 18:10:54 +0300
Subject: [PATCH] feat(collections/board): keep title of the column always
 visible

---
 .../src/widgets/collections/board/column.tsx  | 53 ++++++++++---------
 .../src/widgets/collections/board/index.css   | 11 +++-
 2 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/apps/client/src/widgets/collections/board/column.tsx b/apps/client/src/widgets/collections/board/column.tsx
index 6b437cdbd..a6779f30d 100644
--- a/apps/client/src/widgets/collections/board/column.tsx
+++ b/apps/client/src/widgets/collections/board/column.tsx
@@ -88,7 +88,6 @@ export default function Column({
             onDragOver={isAnyColumnDragging ? handleColumnDragOver : handleDragOver}
             onDragLeave={handleDragLeave}
             onDrop={handleDrop}
-            onWheel={handleScroll}
             style={{
                 display: !isVisible ? "none" : undefined
             }}
@@ -120,33 +119,35 @@ export default function Column({
                 )}
             </h3>
 
-            {(columnItems ?? []).map(({ note, branch }, index) => {
-                const showIndicatorBefore = dropPosition?.column === column &&
-                                          dropPosition.index === index &&
-                                          draggedCard?.noteId !== note.noteId;
+            <div className="board-column-content" onWheel={handleScroll}>
+                {(columnItems ?? []).map(({ note, branch }, index) => {
+                    const showIndicatorBefore = dropPosition?.column === column &&
+                                            dropPosition.index === index &&
+                                            draggedCard?.noteId !== note.noteId;
 
-                return (
-                    <>
-                        {showIndicatorBefore && (
-                            <div className="board-drop-placeholder show" />
-                        )}
-                        <Card
-                            key={note.noteId}
-                            api={api}
-                            note={note}
-                            branch={branch}
-                            column={column}
-                            index={index}
-                            isDragging={draggedCard?.noteId === note.noteId}
-                        />
-                    </>
-                );
-            })}
-            {dropPosition?.column === column && dropPosition.index === (columnItems?.length ?? 0) && (
-                <div className="board-drop-placeholder show" />
-            )}
+                    return (
+                        <>
+                            {showIndicatorBefore && (
+                                <div className="board-drop-placeholder show" />
+                            )}
+                            <Card
+                                key={note.noteId}
+                                api={api}
+                                note={note}
+                                branch={branch}
+                                column={column}
+                                index={index}
+                                isDragging={draggedCard?.noteId === note.noteId}
+                            />
+                        </>
+                    );
+                })}
+                {dropPosition?.column === column && dropPosition.index === (columnItems?.length ?? 0) && (
+                    <div className="board-drop-placeholder show" />
+                )}
 
-            <AddNewItem api={api} column={column} />
+                <AddNewItem api={api} column={column} />
+            </div>
         </div>
     )
 }
diff --git a/apps/client/src/widgets/collections/board/index.css b/apps/client/src/widgets/collections/board/index.css
index f018ec61c..a6e0e6d28 100644
--- a/apps/client/src/widgets/collections/board/index.css
+++ b/apps/client/src/widgets/collections/board/index.css
@@ -24,10 +24,13 @@
   border: 2px solid transparent;
   border-radius: 8px;
   padding: 0.5em;
+  padding-bottom: 0;
   background-color: var(--accented-background-color);
   transition: border-color 0.2s ease;
   overflow-y: auto;
   max-height: 100%;
+  display: flex;
+  flex-direction: column;
 }
 
 .board-view-container .board-column.drag-over {
@@ -37,7 +40,7 @@
 
 .board-view-container .board-column h3 {
   font-size: 1em;
-  margin-bottom: 0.75em;
+  margin: 0;
   padding: 0.5em 0.5em 0.5em 0.5em;
   border-bottom: 1px solid var(--main-border-color);
   cursor: grab;
@@ -98,6 +101,12 @@
   cursor: pointer;
 }
 
+.board-view-container .board-column > .board-column-content {
+  flex-grow: 1;
+  overflow: scroll;
+  padding-bottom: 0.5em;
+}
+
 .board-view-container .board-column h3:hover .edit-icon,
 .board-view-container .board-note:hover .edit-icon {
   opacity: 1;