Skip to content

style(list): render list rows as a dense table, not floating cards - #109

Merged
johnpc merged 1 commit into
mainfrom
fix/list-dense-table
Jul 31, 2026
Merged

style(list): render list rows as a dense table, not floating cards#109
johnpc merged 1 commit into
mainfrom
fix/list-dense-table

Conversation

@johnpc

@johnpc johnpc commented Jul 31, 2026

Copy link
Copy Markdown
Owner

Follow-up to the column-alignment fix (#107). The columns lined up, but each row was still a floating card (border + shadow + 8px gaps) — the board-card aesthetic, which is why the list didn't read as a table.

Asana's list view is a dense, ruled table: rows sit flush with hairline dividers and a hover highlight. This makes the List rows look the part.

What changed (CSS only, scoped to li.list-row)

  • Row: dropped the card border/shadow/radius; now a single bottom hairline (border-bottom), tighter 8px 14px padding, and a :hover background highlight.
  • .list-section__rows: zeroed the inter-row gap so each row's bottom rule butts against the next into one continuous table (the sortable header row supplies the top rule).
  • Board cards are .task-card without .list-row, so they're untouched.

No schema, no logic. The existing list e2e (including the Assignee-header-aligns-with-cells guard from #107) still passes.

list dense table

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant