feat(dashboards): reveal tile resize handles on border hover by MattPua · Pull Request #69744 · PostHog/posthog

MattPua · 2026-07-09T15:52:01Z

Problem

Resizing a dashboard tile means clicking into layout edit mode first. If you can edit the dashboard, hovering a tile border should just show the resize handles so you can grab and resize in place.

Changes

CleanShot.2026-07-09.at.11.54.19.mp4

Hovering a tile border (view mode, edit access) now reveals the resize handles, reusing the edit-mode icons. Grabbing one continues straight into a resize, as before.
Extended the edge overlay from 4 edges to 8 zones (adds corners) for diagonal resize.
Fixed handles being paint-clipped by view-mode content-visibility via :has(> .handle).
Resolved the overlap with the inline insert-tile line: contained its hover strip to the row gap (28px → 12px) so it no longer steals the top/bottom borders.

Note

The insert line's hit area shrank to resolve the overlap. Still centered in the gap and ~6x the visible line, but worth a look in review.

How did you test this code?

Automated (run by me, the agent): EditModeEdgeOverlay, editLayoutGesture, and TextCard suites pass; typecheck + lint clean. Not manually verified in a browser, so the pixel split between resize zones and the insert line is best confirmed live.

🤖 Agent context

Autonomy: Human-driven (agent-assisted)

Built by Claude (PostHog Code) with Matt driving, iteratively: ship hover handles, then fix issues Matt caught live (clipping, insert-line conflict), then cleanup. Ran the xp-reviewer shared skill (inlined a dead single-handle abstraction it flagged) and /writing-tests (TextCard test became a wiring guard, not a count change-detector).

Created with PostHog Code

Show the resize handles on hover of a tile's border in view mode when the user can edit the dashboard, so a tile can be resized without first entering layout edit mode. Extends the edge overlay to 8 zones (edges + corners) and resolves the hover conflict with the inline insert-tile line by keeping each affordance to its own pixels. Generated-By: PostHog Code Task-Id: af36d4dd-782b-4bab-ad01-288078ae2123

github-actions · 2026-07-09T15:55:11Z

🦔 Hogbox preview · ✅ ready

▶ Open the preview


🔑 Login	`test@posthog.com` / `12345678` (demo data)
🧩 Running	this PR's backend and frontend, on the PostHog `:master` base
🔗 Link	stable across rebuilds — a re-push swaps the box underneath, the URL stays
🔒 Access	tailnet only (PostHog VPN)
💤 Idle	sleeps after ~30 min idle (snapshot to S3, zero node cost) and wakes on your next visit in ~30s, behind a brief "waking up" screen

_{commit b0318d9 · box box-9e0398aff9e2 · ready in 550s (push → usable) · build log · rebuilds on every push, torn down on close}

github-actions · 2026-07-09T15:55:13Z

🤖 CI report

⚠️

Bundle size — 🔺 +530 B (+0.0%)

Uncompressed size of every built .js bundle, compared against the base branch.

Total: 69.85 MiB · 🔺 +530 B (+0.0%)

No file changed by more than 1000 B.

_{Posted automatically by build-bundle-size-report · uncompressed bytes from dist-report}

✅ Eager graph — within budget

How much code each root ships on the eager path — downloaded and parsed before the surface is interactive. Measured from the esbuild output chunks (post-tree-shake, static imports only); lazy import() / React.lazy chunks are not counted.

Root	Eager (shipped)	Δ vs base	Budget
entry (logged-out pages, app bootstrap) `src/index.tsx`	1.20 MiB · 22 files	🔺 +97 B (+0.0%)	`███░░░░░░░` 28.0% of 4.29 MiB
authenticated shell (every logged-in page) `src/scenes/AuthenticatedShell.tsx`	8.06 MiB · 2,956 files	🔺 +630 B (+0.0%)	`█████████░` 87.2% of 9.25 MiB

🟢 node_modules/monaco-editor/ stays out of src/index.tsx
🟢 src/lib/components/ActivityLog/describers stays out of src/index.tsx
🟢 [object Object] stays out of src/index.tsx
🟢 [object Object] stays out of src/index.tsx
🟢 node_modules/monaco-editor/ stays out of src/scenes/AuthenticatedShell.tsx
🟢 src/lib/components/ActivityLog/describers stays out of src/scenes/AuthenticatedShell.tsx
🟢 [object Object] stays out of src/scenes/AuthenticatedShell.tsx
🟢 [object Object] stays out of src/scenes/AuthenticatedShell.tsx

Largest files eagerly shipped from src/index.tsx

Size	File
126.8 KiB	`../node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom.production.min.js`
24.6 KiB	`../node_modules/.pnpm/buffer@6.0.3/node_modules/buffer/index.js`
6.3 KiB	`../node_modules/.pnpm/react@18.3.1/node_modules/react/cjs/react.production.min.js`
4.5 KiB	`../node_modules/.pnpm/@jspm+core@2.1.0/node_modules/@jspm/core/nodelibs/browser/process.js`
3.9 KiB	`../node_modules/.pnpm/scheduler@0.23.2/node_modules/scheduler/cjs/scheduler.production.min.js`
1.4 KiB	`../node_modules/.pnpm/base64-js@1.5.1/node_modules/base64-js/index.js`
1.3 KiB	`src/RootErrorBoundary.tsx`
912 B	`../node_modules/.pnpm/ieee754@1.2.1/node_modules/ieee754/index.js`
789 B	`src/scenes/ChunkLoadErrorBoundary.tsx`
668 B	`src/index.tsx`

Largest files eagerly shipped from src/scenes/AuthenticatedShell.tsx

Size	File
277.1 KiB	`../node_modules/.pnpm/posthog-js@1.398.2/node_modules/posthog-js/dist/rrweb.js`
266.9 KiB	`../node_modules/.pnpm/@posthog+icons@0.37.4_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@posthog/icons/dist/posthog-icons.es.js`
224.6 KiB	`src/taxonomy/core-filter-definitions-by-group.json`
213.6 KiB	`../node_modules/.pnpm/posthog-js@1.398.2/node_modules/posthog-js/dist/module.js`
164.0 KiB	`src/queries/validators.js`
154.0 KiB	`../node_modules/.pnpm/re2js@0.4.1/node_modules/re2js/build/index.esm.js`
126.8 KiB	`../node_modules/.pnpm/react-dom@18.3.1_react@18.3.1/node_modules/react-dom/cjs/react-dom.production.min.js`
105.7 KiB	`src/lib/api.ts`
93.3 KiB	`../node_modules/.pnpm/prosemirror-view@1.40.1/node_modules/prosemirror-view/dist/index.js`
90.5 KiB	`../node_modules/.pnpm/@tiptap+core@3.20.1_@tiptap+pm@3.20.1/node_modules/@tiptap/core/dist/index.js`

_{Posted automatically by check-eager-graph · sizes are eager output bytes (shipped, post-tree-shake) from the esbuild metafile · part of #32479}

⚠️

Dist folder size — 🔺 +271.9 KiB (+0.0%)

Total size of the built frontend/dist folder (all assets), compared against the base branch.

Total: 1433.60 MiB · 🔺 +271.9 KiB (+0.0%)

✅ Playwright — all passed

All tests passed.

View test results →

greptile-apps · 2026-07-09T16:00:08Z

_{Reviews (1): Last reviewed commit: "feat(dashboards): reveal tile resize han..." | Re-trigger Greptile}

trunk-io · 2026-07-09T16:23:36Z

_{View Full Report ↗︎ ⋅ Docs}

deployment-status-posthog · 2026-07-09T17:56:37Z

Deploy status

Environment	Status	Deployed At	Workflow
dev	✅ Deployed	2026-07-09 17:56 UTC	Run
prod-us	✅ Deployed	2026-07-09 18:12 UTC	Run
prod-eu	✅ Deployed	2026-07-09 18:16 UTC	Run

MattPua self-assigned this Jul 9, 2026

MattPua marked this pull request as ready for review July 9, 2026 15:54

github-actions Bot had a problem deploying to preview-pr-69744 July 9, 2026 15:55 Failure

assign-reviewers-posthog Bot requested a review from a team July 9, 2026 15:55

greptile-apps Bot reviewed Jul 9, 2026

View reviewed changes

Comment thread frontend/src/lib/components/Cards/InsightCard/EditModeEdgeOverlay.test.tsx

andyzzhao approved these changes Jul 9, 2026

View reviewed changes

MattPua enabled auto-merge (squash) July 9, 2026 16:01

Merge branch 'master' into posthog-code/dashboard-border-hover-resize

b37c97b

github-actions Bot had a problem deploying to preview-pr-69744 July 9, 2026 16:30 Failure

Merge branch 'master' into posthog-code/dashboard-border-hover-resize

b0318d9

github-actions Bot deployed to preview-pr-69744 July 9, 2026 17:12 View deployment

MattPua merged commit 1d5a79e into master Jul 9, 2026
192 checks passed

MattPua deleted the posthog-code/dashboard-border-hover-resize branch July 9, 2026 17:32

inkeep Bot mentioned this pull request Jul 9, 2026

docs(dashboards): document hover-to-resize tile feature PostHog/posthog.com#18350

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(dashboards): reveal tile resize handles on border hover#69744

feat(dashboards): reveal tile resize handles on border hover#69744
MattPua merged 3 commits into
masterfrom
posthog-code/dashboard-border-hover-resize

MattPua commented Jul 9, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 9, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 9, 2026 •

edited

Loading

Uh oh!

greptile-apps Bot commented Jul 9, 2026

Uh oh!

Uh oh!

trunk-io Bot commented Jul 9, 2026 •

edited

Loading

Uh oh!

Uh oh!

deployment-status-posthog Bot commented Jul 9, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

MattPua commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Changes

How did you test this code?

🤖 Agent context

Uh oh!

github-actions Bot commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦔 Hogbox preview · ✅ ready

▶ Open the preview

Uh oh!

github-actions Bot commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🤖 CI report

Uh oh!

greptile-apps Bot commented Jul 9, 2026

Uh oh!

Uh oh!

trunk-io Bot commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

deployment-status-posthog Bot commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploy status

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

MattPua commented Jul 9, 2026 •

edited

Loading

github-actions Bot commented Jul 9, 2026 •

edited

Loading

github-actions Bot commented Jul 9, 2026 •

edited

Loading

trunk-io Bot commented Jul 9, 2026 •

edited

Loading

deployment-status-posthog Bot commented Jul 9, 2026 •

edited

Loading