Improved design of filter dropdown in members#26976
Conversation
ref https://linear.app/ghost/issue/BER-3498/dropdown-improvements - Search field for finding options was missing in the filter dropdown. This is especially important for great UX when paid-memberships are turned on. - The height of the filter dropdown was too small. Making it larger helps scanning options fast.
|
WalkthroughThe pull request modifies two components in the members view. The 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/posts/src/views/members/components/members-filters.tsx`:
- Line 153: Filters currently uses selectedFieldForOptions?.className ||
popoverContentClassName, so any field-specific className in member-fields.ts
(e.g., name, email, label, last_seen_at) overrides and ignores your new popover
styles; update the Filters component to merge the two class strings instead of
choosing one—compute mergedPopoverClass = [selectedFieldForOptions?.className ||
'', popoverContentClassName].filter(Boolean).join(' ') (or equivalent utility)
and use that for the popover so field-specific widths stay but the w-[280px],
translate-x-[-32px], and command-list max-height are applied; alternatively, if
you prefer field-level control, add those popover styles into each field's
className in member-fields.ts.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: aae1f0f9-352e-4624-812b-9773f00eab84
📒 Files selected for processing (2)
apps/posts/src/views/members/components/members-filters.tsxapps/posts/src/views/members/components/members-header-search.tsx
| keyboardShortcut="f" | ||
| popoverAlign={hasFilters ? 'start' : 'end'} | ||
| popoverAlign={'start'} | ||
| popoverContentClassName='w-[280px] translate-x-[-32px] [&_[data-slot=command-list]]:max-h-[450px]' |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "1) Locate member filter field definitions:"
mapfile -t member_filter_files < <(fd 'use-member-filter-fields\.(ts|tsx)$')
printf ' - %s\n' "${member_filter_files[@]:-<none found>}"
echo
echo "2) Check whether those definitions set per-field className:"
if [ ${`#member_filter_files`[@]} -gt 0 ]; then
rg -n -C3 'className\s*:' "${member_filter_files[@]}" || true
fi
echo
echo "3) Confirm Filters popover class fallback behavior:"
rg -n -C3 'selectedFieldForOptions\?\.className\s*\|\|\s*popoverContentClassName' apps/shade/src/components/ui/filters.tsxRepository: TryGhost/Ghost
Length of output: 174
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "=== Step 1: Locate member filter field definitions ==="
fd 'use-member-filter-fields' --type f
echo ""
echo "=== Step 2: Check Filters component for the fallback logic ==="
rg 'selectedFieldForOptions\?\.className.*popoverContentClassName' apps/shade/src/components/ui/ -A 2 -B 2Repository: TryGhost/Ghost
Length of output: 816
🏁 Script executed:
#!/bin/bash
echo "=== Inspecting use-member-filter-fields.ts for field definitions ==="
cat apps/posts/src/views/members/use-member-filter-fields.ts
echo ""
echo "=== Checking for className definitions in the fields ==="
rg -n 'className' apps/posts/src/views/members/use-member-filter-fields.tsRepository: TryGhost/Ghost
Length of output: 18945
🏁 Script executed:
#!/bin/bash
echo "=== Locating member-fields definitions ==="
fd 'member-fields' --type f
echo ""
echo "=== Checking member-fields for className property on field configs ==="
rg -n 'className\s*:' apps/posts/src/views/members/member-fields.tsRepository: TryGhost/Ghost
Length of output: 885
🏁 Script executed:
#!/bin/bash
echo "=== Getting context around className definitions in member-fields.ts ==="
rg -B5 'className\s*:\s*['\''"]w-' apps/posts/src/views/members/member-fields.ts | head -80Repository: TryGhost/Ghost
Length of output: 2315
Popover sizing classes will be ignored for fields with their own className.
Filters uses selectedFieldForOptions?.className || popoverContentClassName || 'w-[220px]', so fields like name (w-48), email (w-64), label, last_seen_at, and others that define className in member-fields.ts will bypass your new popoverContentClassName entirely. These fields won't receive the width adjustment (w-[280px]), translation (translate-x-[-32px]), or max-height constraint for the command list—creating inconsistent popover sizing/positioning across filter fields.
Either remove className from field definitions and rely solely on popoverContentClassName, or merge the new popover styles into each field's existing className.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/posts/src/views/members/components/members-filters.tsx` at line 153,
Filters currently uses selectedFieldForOptions?.className ||
popoverContentClassName, so any field-specific className in member-fields.ts
(e.g., name, email, label, last_seen_at) overrides and ignores your new popover
styles; update the Filters component to merge the two class strings instead of
choosing one—compute mergedPopoverClass = [selectedFieldForOptions?.className ||
'', popoverContentClassName].filter(Boolean).join(' ') (or equivalent utility)
and use that for the popover so field-specific widths stay but the w-[280px],
translate-x-[-32px], and command-list max-height are applied; alternatively, if
you prefer field-level control, add those popover styles into each field's
className in member-fields.ts.
1 participant
ref https://linear.app/ghost/issue/BER-3498/dropdown-improvements