screenroveKanban board UI design: 19 real boards and the column you can't see
We read 19 kanban boards, from Jira to Trello, in a 1440px window: 13 cut off their last column, 6 hide Done. What headers, cards and add buttons show.
Open a kanban board in a 1440px-wide window and the column you care about most is often the one you can’t see. In 13 of the 19 boards we captured, the last column runs off the right edge of the screen. On six of the ten boards whose columns are workflow statuses, that column is Done or Complete.
The 19 boards come from 139 board screens across 22 products on the kanban boards pattern page. For each product we took one populated board that we built ourselves in a research account, from Jira, Plane and Trello to folk’s sales pipeline and Padlet’s sections. We left out Glide and WeWeb, whose boards are inside apps built with the tool from templates. Boards are small, a dozen cards at most, because the accounts are new.
Kanban board UI by the numbers
| What we counted | Boards (of 19) |
|---|---|
| Columns are workflow statuses | 10 |
| Columns are sections or parent items | 5 |
| Columns are sales stages / dates / tags | 2 / 1 / 1 |
| A number in every column header | 13 (12 counts, 1 sum) |
| First column is the “no value” bucket | 6 |
| Last column cut off or off-screen | 13 |
| An add-card control at the foot of the columns | 10 |
| Cards show a date / an assignee / a priority | 12 / 8 / 7 |
| Also captured in dark mode | 8 |
The Done column is off-screen
The boards that fit are the ones with few or narrow columns: Trello’s three lists, Todoist’s two sections, TickTick’s three, Padlet’s three, Fibery’s four, and Twenty’s five 192px stage columns. Everywhere else a sidebar plus four or five columns of roughly 250 to 340px is wider than the window.
Jira, Plane, Shortcut, Smartsheet (Complete) and Tana (Completed) all cut the final column; Wrike cuts In review and leaves Completed entirely off-screen. Superthread’s cut column is Cancelled, after a fully visible Done. Products get around it in three ways in this set:
- Narrow columns. Twenty’s 192px columns fit five stages beside its sidebar.
- Collapse. Plane and Trello put a collapse button in every column header; Smartsheet collapses its empty “Uncategorized” column into a thin vertical strip.
- Reverse the order. monday.com puts Done first, so the column cut off at the right is Not Started, which is empty.
Column headers: a count, a sum, or nothing
12 boards put a card count next to each column name, the plain “To Do 3” of Jira and Superthread or Smartsheet’s “(2)”. Shortcut adds a second number, the points total. Twenty replaces the count with the value of the column, which is what a sales pipeline is for: New 92k, Screening 111k, Meeting 93k.
Six boards show no number at all: Fibery, Tana, Any.do, Taskade, WorkFlowy and Padlet. Colour carries the status instead on monday.com (solid headers), Wrike (tinted headers) and folk and Twenty (tinted pills).
The empty bucket comes first
When columns come from a field, cards without a value need somewhere to go, and six boards put that bucket first: Tana’s “Status not set”, AFFiNE’s “No Pattern”, folk’s “No status”, Todoist’s “(No Section)”, TickTick’s “Not Sectioned” and Smartsheet’s “Uncategorized”. In Tana and AFFiNE it is empty and still takes a full column width, pushing the real workflow one column further right. Smartsheet is the only one that shrinks it, to a thin vertical strip that still shows its count, (0).
What goes on a card
Cards range from a single line to a property sheet. Trello cards show only a title until you add something; one card in our board shows a green label, a due date and “1/3” checklist progress. WorkFlowy cards are plain text with hashtags. At the other end, Plane shows every property as a chip, including the empty ones.
Across the 19 boards, 12 put a date on cards, 8 an assignee (an avatar, a name, or an empty circle to fill as on Superthread) and 7 a priority. Only Jira and Plane show an ID such as SCRUM-1 or SR-9. Finished work is handled four ways: Fibery fades cards in its final columns, WorkFlowy and Taskade strike them through, TickTick folds them into a “Completed 1” group, and the status boards simply move them to Done.
Where the add button goes
10 boards put an add control at the foot of the columns: Trello’s “Add a card”, Plane’s “New work item”, Twenty’s “+ New”, Jira’s dashed + slot. Shortcut, TickTick and Tana put a + in the column header instead. Padlet puts a full-width + bar at the top of each section, so new posts go above old ones. Wrike shows “+ Item” under one column only. Four boards show no add control on the columns in our screenshots: monday.com, Smartsheet, Fibery (which has a New button in its toolbar) and AFFiNE.
Only four populated boards show a way to add a column beside the last one: Trello’s “Add another list”, Todoist’s “Add section”, TickTick’s “+ New section” and Padlet’s “Add section”. On the boards that cut off their last column, that control, if there is one, is off-screen too.
Beyond the board itself, the set also has filters (Jira’s Filter button gains a count badge, Superthread shows a chip strip with Save), Jira’s priority swimlanes, folk’s dashed drop slot mid-drag, and cards that open in a side panel over the board in Wrike and folk.
What to steal
- Check the board at 1440px with a sidebar open. If Done is cut off, narrow the columns, let them collapse, or show a minimap as Jira does.
- Put a number in the header that matters. A count for task boards, a total for pipelines (Twenty), points for sprints (Shortcut).
- Shrink the empty bucket. “No status” is useful, but an empty one should not cost a full column. Smartsheet folds it into a strip.
- Decide whether empty fields show. Plane’s placeholder chips invite input; Trello’s title-only cards keep the board scannable. Pick one on purpose.
- Put add-card where the eye ends. A control at the foot of each column was the most common choice, on 10 of 19.
- Mark finished work. Fading (Fibery) or strikethrough (WorkFlowy) lets done cards stay without competing.
How we counted
We built these boards with research accounts in desktop browsers, in September and October 2026, and read each one from its screenshot at 1440 by 900 CSS pixels. Column widths come from the notes recorded at capture. “Cut off” means the last column was clipped or off-screen in that window, with the sidebar as the product showed it; a wider screen or a collapsed sidebar may fit more. Hover-only controls are not counted. Boards hold our own sample tasks, so they are smaller than a working team’s.
To compare boards while you build, browse the kanban boards or connect the Screenrove MCP server and ask your agent for “kanban boards with counts in the column headers”.