PostHog / PostHog/posthog

Feature Request(dashboards): first-class section / spacer tiles for grouping

Open
#58,307 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement feature/dashboards team/product-analytics team/query-performance
Dominant language
Python
Stars
39.9k
Forks
3.4k
Avg merge
6h 51m
Merged PRs (30d)
232

Description

Feature request

Is your feature request related to a problem?

Customer feedback: "Any opportunity to add spacers/sections to dashboards to split sections out?"

Today, PostHog dashboards expose three tile types via the Add menu: Insight, Text card, and Button. There is no first-class way to group tiles into labeled sections, insert a visual divider between groups, or reserve vertical whitespace as a deliberate spacer.

Describe the solution you'd like

Add a fourth tile type to the Add menu in frontend/src/scenes/dashboard/DashboardHeaderActions.tsx, for example Section, that provides:

  • A clear label / title input
  • Optional short description below the title
  • Full-width-by-default placement that starts a new row in the grid
  • A built-in visual treatment so it does not look like a regular tile (transparent background, larger heading, optional underline / divider)
  • Sensible defaults so a user can drop one in without resizing

Optionally, also expose a lighter Spacer / Divider that is just a horizontal rule with configurable height, for visual separation without a label.

Describe alternatives you've considered

The current workaround is functional but not discoverable:

  1. Add a Text card.
  2. Use a markdown heading (#, ##, or ###).
  3. Toggle Transparent background.
  4. Manually resize to full width and drag to the right row.

Reported in: https://posthoghelp.zendesk.com/agent/tickets/57876 (moved to PostHog: https://us.posthog.com/project/2/support/tickets/58898)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in frontend/src/scenes/dashboard/DashboardHeaderActions.tsx and inspect how the existing Insight, Text card, and Button tile types are added. Define the scope for Section versus the optional Spacer/Divider, then verify that the chosen tile can be added with sensible defaults, labeled or separated visually, and placed full-width on a new dashboard row.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
design, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.