Kanban: column color indicator is not vertically aligned with the title text #53

New issue

Open

opened 2026-04-22 11:26:28 +00:00 by AhmedHanafy725 · 3 comments

AhmedHanafy725 commented

2026-04-22 11:26:28 +00:00

Member

Problem

The small colored bar beside each kanban column title sits slightly off-center relative to the title text — visually noticeable especially with bold titles.

Evidence

renderColumn():
- Indicator: y: cy + 6, height: 14 -> visual center cy + 13.
- Title: y: cy + 6, fontSize: 12, fontStyle: 'bold' -> Konva draws text from top with internal line-height padding, so the visible text center sits above cy + 13.

Fix

Align by computing the title baseline after render: read colTitle.height() / colTitle.getClientRect() and set the indicator rect's y to titleCenterY - indicatorHeight / 2.
Alternatively, hard-tune: set indicator y: cy + 9, height: 10 to visually match fontSize 12 bold ascent — simpler but less robust to future font changes.

## Problem The small colored bar beside each kanban column title sits slightly off-center relative to the title text — visually noticeable especially with bold titles. ## Evidence - `renderColumn()`: - Indicator: `y: cy + 6, height: 14` -> visual center `cy + 13`. - Title: `y: cy + 6, fontSize: 12, fontStyle: 'bold'` -> Konva draws text from top with internal line-height padding, so the visible text center sits above `cy + 13`. ## Fix - Align by computing the title baseline after render: read `colTitle.height()` / `colTitle.getClientRect()` and set the indicator rect's `y` to `titleCenterY - indicatorHeight / 2`. - Alternatively, hard-tune: set indicator `y: cy + 9, height: 10` to visually match fontSize 12 bold ascent — simpler but less robust to future font changes.

AhmedHanafy725 commented

2026-04-22 13:13:05 +00:00

Author

Member

Implementation Spec for Issue #53

Objective

Center the column color indicator bar vertically against the column title text so they appear aligned.

Requirements

The small colored rectangle beside each column title sits on the same visual midline as the title text.
Holds regardless of the current title font size (important once #51 lands, which derives font size from column width).

Files to Modify

crates/hero_whiteboard_ui/static/web/js/whiteboard/kanban.js — in renderColumn, compute the indicator's y from the rendered title's client rect so the rectangle's vertical center matches the visible text center.

Implementation Plan

Step 1: Center indicator against title client rect

Files: crates/hero_whiteboard_ui/static/web/js/whiteboard/kanban.js

Subtasks:

In renderColumn, construct the colTitle Konva.Text before the color-indicator Rect (swap current order).
After adding colTitle to the group, read its bounding box: var titleBox = colTitle.getClientRect({ relativeTo: group });.

Compute indicator height (keep at 14 for now) and center y:

var indicatorH = 14;
var indicatorY = titleBox.y + (titleBox.height - indicatorH) / 2;

Use indicatorY when creating the color-indicator Rect.
Everything else stays the same. Do not touch the x placement (indicator at cx + 8, title at cx + 18).

Dependencies: none

Acceptance Criteria

Columns with bold 12pt titles show the color bar centered with the visible text on both light and dark themes.
Still looks correct after column rename (title length changes should not move the indicator vertically — height is constant per title).
No regression for column delete button (x), + Column, + Add card, or card rendering.

Notes

getClientRect({ relativeTo: group }) returns coordinates in the group's local frame, which matches the rest of renderColumn's coordinates.
When font size changes (per #51), this approach auto-adapts because it reads the text's actual height.

## Implementation Spec for Issue #53 ### Objective Center the column color indicator bar vertically against the column title text so they appear aligned. ### Requirements - The small colored rectangle beside each column title sits on the same visual midline as the title text. - Holds regardless of the current title font size (important once #51 lands, which derives font size from column width). ### Files to Modify - `crates/hero_whiteboard_ui/static/web/js/whiteboard/kanban.js` — in `renderColumn`, compute the indicator's `y` from the rendered title's client rect so the rectangle's vertical center matches the visible text center. ### Implementation Plan #### Step 1: Center indicator against title client rect Files: `crates/hero_whiteboard_ui/static/web/js/whiteboard/kanban.js` Subtasks: - In `renderColumn`, construct the `colTitle` Konva.Text **before** the color-indicator Rect (swap current order). - After adding `colTitle` to the group, read its bounding box: `var titleBox = colTitle.getClientRect({ relativeTo: group });`. - Compute indicator height (keep at 14 for now) and center y: ```js var indicatorH = 14; var indicatorY = titleBox.y + (titleBox.height - indicatorH) / 2; ``` - Use `indicatorY` when creating the color-indicator Rect. - Everything else stays the same. Do not touch the `x` placement (indicator at `cx + 8`, title at `cx + 18`). Dependencies: none ### Acceptance Criteria - [ ] Columns with bold 12pt titles show the color bar centered with the visible text on both light and dark themes. - [ ] Still looks correct after column rename (title length changes should not move the indicator vertically — height is constant per title). - [ ] No regression for column delete button (`x`), `+ Column`, `+ Add card`, or card rendering. ### Notes - `getClientRect({ relativeTo: group })` returns coordinates in the group's local frame, which matches the rest of `renderColumn`'s coordinates. - When font size changes (per #51), this approach auto-adapts because it reads the text's actual height.

AhmedHanafy725 commented

2026-04-22 13:20:13 +00:00

Author

Member