fix(replay): tidy up saved-filters filter editor UI - #70569
Conversation
Address three visual nits in the session-replay filter editor: - reduce the height of the "Loaded saved filter" box and stop forcing it wide - stop clipping the event pill count badge (overflow: visible) - align every row on px-2 so the toggle and Save button share the same right edge Generated-By: PostHog Code Task-Id: 26791017-b395-4b78-af34-ffbbd78c2255
ksvat
added
the
skip-agent-review
ksvat
removed
the
skip-agent-review
ksvat
added
the
stamphog
Graphite App
🦔 Hogbox preview · ✅ ready▶ Open the preview
commit |
![stamphog[bot]](https://avatars.githubusercontent.com/in/3000332?s=60&v=4){kind=small}
There was a problem hiding this comment.
Purely cosmetic CSS/className tidy-up in session replay filter UI, no behavior change, contained to owning team, well within trivial tier.
- Author wrote 0% of the modified lines and has 11 merged PRs in these paths (familiarity MODERATE).
- 👍 on the PR from hex-security-app[bot].
Gate mechanics and policy version
| Gate | Result | |
|---|---|---|
| prerequisites | ✓ | all clear |
| deny-list | ✓ | no deny categories matched |
| size | ✓ | 15L, 2F substantive — within ceiling |
| tier | ✓ | T1-agent / T1a-trivial (15L, 2F, single-area, fix) |
| stamphog 2.0.0b3 | .stamphog/policy.yml @ f379998 · reviewed head ea5ff1c |
|
✅ Visual changes approved by @ksvat — baseline updated in 6 changed. |
🤖 CI report
|
| File | Size | Δ vs base |
|---|---|---|
posthog-app/src/scenes/cohorts/Cohort.js |
35.4 KiB | 🔺 +1005 B (+2.9%) |
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.21 MiB · 22 files | 🟢 -36 B (-0.0%) | ███░░░░░░░ 28.1% of 4.29 MiB |
authenticated shell (every logged-in page)src/scenes/AuthenticatedShell.tsx |
8.11 MiB · 2,973 files | 🔺 +1 B (+0.0%) | █████████░ 87.6% 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 |
|---|---|
| 278.6 KiB | ../node_modules/.pnpm/posthog-js@1.399.4/node_modules/posthog-js/dist/rrweb.js |
| 267.7 KiB | ../node_modules/.pnpm/@posthog+icons@0.38.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/@posthog/icons/dist/posthog-icons.es.js |
| 234.9 KiB | src/taxonomy/core-filter-definitions-by-group.json |
| 221.8 KiB | ../node_modules/.pnpm/posthog-js@1.399.4/node_modules/posthog-js/dist/module.js |
| 164.0 KiB | src/queries/validators.js |
| 154.3 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.9 KiB | src/lib/api.ts |
| 93.3 KiB | ../node_modules/.pnpm/prosemirror-view@1.40.1/node_modules/prosemirror-view/dist/index.js |
| 90.6 KiB | ../node_modules/.pnpm/@tiptap+core@3.20.6_@tiptap+pm@3.20.6/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 — 🔺 +25.8 KiB (+0.0%)
Total size of the built frontend/dist folder (all assets), compared against the base branch.
Total: 1278.81 MiB · 🔺 +25.8 KiB (+0.0%)
ksvat
added
the
update-snapshots
Graphite App
6 updated Run: 8c8b70fc-e4ce-4a38-811e-1bb95b17f2ef Co-authored-by: ksvat <147102038+ksvat@users.noreply.github.com>
New commits pushed (delta classified non_trivial_delta) — stamphog approval dismissed; re-review running automatically.
There was a problem hiding this comment.
Purely cosmetic spacing/overflow CSS and snapshot-hash changes in session replay filters, matching the description exactly with no behavior change; author is on the owning team and a visual-review bot already approved the snapshot diff.
- Author wrote 0% of the modified lines and has 110 merged PRs in these paths (familiarity MODERATE).
- 👍 on the PR from hex-security-app[bot].
Gate mechanics and policy version
| Gate | Result | |
|---|---|---|
| prerequisites | ✓ | all clear |
| deny-list | ✓ | no deny categories matched |
| size | ✓ | 27L, 3F substantive — within ceiling |
| tier | ✓ | T1-agent / T1b-small (27L, 3F, single-area, fix) |
| stamphog 2.0.0b3 | .stamphog/policy.yml @ 722cab5 · reviewed head 6631cd8 |
1 participant
Problem
A coworker reviewing the session-replay Saved filters filter editor flagged three small visual nits:
Pageviewgets cut off.Changes
All cosmetic, no behavior change.
RecordingsUniversalFiltersEmbed.tsx): dropped the "Loaded saved filter:" row frompy-3topy-2so it matches the neighboring rows, and removedflex-1 basis-3/5from the label wrapper so the box only takes the width it needs.UniversalFilterButton.scss): changed the pill fromoverflow: hiddentooverflow: visibleso the absolutely-positioned count badge isn't clipped at the top-right corner. Label truncation is unaffected, it happens in JS viamidEllipsis, not via this overflow.RecordingsUniversalFiltersEmbed.tsx): standardized every row onpx-2. Addedpx-2to the "Match … filters" row and removed themr-2toggle wrapper, and changed the footer row frompx-1topx-2. The toggle and the Save button now line up on the same right edge as the applied-filters pills.Note
UniversalFilterButton.scssis shared across insights, logs, error tracking, and experiments filter bars. The overflow change is low risk (the badge is meant to overflow, and truncation is JS-side), but the one spot worth eyeballing there is the close-button hover background at a pill's rounded corner.How did you test this code?
I (Claude, agent-assisted) made className/SCSS-only edits and ran the frontend formatter over them. I did not run the app or capture screenshots, and there are no automated tests for these purely visual changes. Manual visual verification is still needed:
Automatic notifications
🤖 Agent context
Autonomy: Human-driven (agent-assisted)
Kim relayed a coworker's screenshot feedback on the replay saved-filters editor. I traced each of the three nits to specific className/SCSS in
RecordingsUniversalFiltersEmbed.tsxand the sharedUniversalFilterButton.scss, then applied the minimal fixes. No skills were invoked (pure styling change). The one judgment call was the badge fix: rather than repositioning the sharedIconWithCountbadge or scoping a new class, I flipped the pill'soverflowtovisible, since truncation is already handled in JS bymidEllipsisso the container overflow was only clipping the badge. Called out the shared-component blast radius in the note above so reviewers know where to look.Created with PostHog Code