fix(inbox): left-align search, right-align filters, drop filter banner - #72538
Conversation
The inbox report list's filter bar stretched the search input with flex-1, so the filter popovers trailed it rather than sitting right-aligned. The search now anchors left at a natural width while the Sort/Source/Priority controls and refresh anchor right. Also removes the "Filters are applied - some reports may be hidden." banner. Users understand filtering; the banner only added noise. Generated-By: PostHog Code Task-Id: c4d69aa4-c160-45bc-b996-8442772a71ad
|
Hey @pauldambra! 👋 It looks like your git author email on this PR isn't your
You can fix it for this repo with: git config user.email "you@posthog.com"Or set it globally with |
🦔 Hogbox preview · ✅ ready▶ Open the preview
commit |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 810e99fb69
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
🤖 CI report
|
| File | Size | Δ vs base |
|---|---|---|
render-query/src/render-query/render-query.js |
21.22 MiB | 🔺 +1.9 KiB (+0.0%) |
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.23 MiB · 22 files | no change | ███░░░░░░░ 28.6% of 4.29 MiB |
authenticated shell (every logged-in page)src/scenes/AuthenticatedShell.tsx |
8.18 MiB · 2,999 files | 🔺 +1.8 KiB (+0.0%) | █████████░ 88.5% 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 |
| 762 B | src/index.tsx |
Largest files eagerly shipped from src/scenes/AuthenticatedShell.tsx
| Size | File |
|---|---|
| 281.3 KiB | ../node_modules/.pnpm/posthog-js@1.404.1/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 |
| 235.8 KiB | src/taxonomy/core-filter-definitions-by-group.json |
| 223.4 KiB | ../node_modules/.pnpm/posthog-js@1.404.1/node_modules/posthog-js/dist/module.js |
| 167.1 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 |
| 93.2 KiB | ../packages/quill/packages/quill/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 — 🔺 +44.8 KiB (+0.0%)
Total size of the built frontend/dist folder (all assets), compared against the base branch.
Total: 1352.11 MiB · 🔺 +44.8 KiB (+0.0%)
Wrapping the Sort/Source/Priority/Refresh controls in a right-aligned div removed the outer row's per-control flex-wrap behavior, so on narrow viewports (or with long active labels) the group could exceed the container width and clip. The group now flex-wraps and is capped at max-w-full, with justify-end keeping it right-aligned. Generated-By: PostHog Code Task-Id: c4d69aa4-c160-45bc-b996-8442772a71ad
![stamphog[bot]](https://avatars.githubusercontent.com/in/3000332?s=60&v=4){kind=small}
There was a problem hiding this comment.
Purely presentational change to inbox filter bar layout (CSS alignment) and removal of an informational banner — no logic, data, or API changes. The one Codex P2 comment (controls not wrapping) is already addressed in the diff via the added flex-wrap on the grouped container.
- 👍 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 | ✓ | 168L, 2F substantive — within ceiling |
| tier | ✓ | T1-agent / T1c-medium (168L, 2F, single-area, fix) |
| stamphog 2.0.0b3 | .stamphog/policy.yml @ b9db384 · reviewed head 0569c1e |
1 participant
HUMAN
noticed this in a thread
when showing a list of things we put the search on the left and the actions on the right
telling me that filters might filter felt patronising :)
ROBOT
Problem
On the inbox report-list tabs (pull requests / reports / not actionable / archived), the filter bar's search input used
flex-1, so it stretched to fill available width and the Sort/Source/Priority filter popovers trailed it instead of sitting right-aligned. A separate banner ("Filters are applied – some reports may be hidden.") showed under the bar whenever any filter was active, restating what users already understand filtering does.Changes
InboxSearchFilterBar.tsx): the search input now anchors left at a natural width (min-w-[220px] max-w-[420px]), and the Sort / Source / Priority popovers plus Refresh are grouped in a right-aligned container (ml-auto). The row still wraps gracefully on narrow widths.InboxReportList.tsx): deleted theActiveFiltersBannercomponent and the now-unusedLemonBannerimport. The "Clear" affordance is gone; each filter chip still shows its active value inline and can be toggled off directly.How did you test this code?
Visual layout change only; no logic, props, or state changed. I could not run
pnpm --filter=@posthog/frontend fixortypescript:checkin this environment (nonode_modules, noflox), so the frontend lint/typecheck gates are unverified locally. The edits are self-contained (no new imports, no signature changes), so there's nothing type-risky. No tests or stories referenced the removed banner, so nothing broke.Automatic notifications
Docs update
No docs reference the inbox filter bar layout or the removed banner.
🤖 Agent context
Autonomy: Fully autonomous
frontend/src/scenes/inbox/.ml-auto(only the first margin-auto takes effect), so the whole control cluster anchors to the right edge as a unit.max-w-[420px]rather thanflex-1so it doesn't push the filters back toward the middle on wide viewports.Created with PostHog Code