Skip to content

fix: restore grid layout in PanelSearch broken by wrapper div#6977

Merged
kyle-ssg merged 2 commits intomainfrom
fix/panelsearch-grid-layout-broken
Mar 18, 2026
Merged

fix: restore grid layout in PanelSearch broken by wrapper div#6977
kyle-ssg merged 2 commits intomainfrom
fix/panelsearch-grid-layout-broken

Conversation

@talissoncosta
Copy link
Contributor

@talissoncosta talissoncosta commented Mar 18, 2026 •
edited
Loading

Thanks for submitting a PR! Please check the boxes below:

  • I have read the Contributing Guide.
  • I have added information to docs/ if required so people know about the feature.
  • I have filled in the "Changes" section below.
  • I have filled in the "How did you test this code" section below.

Changes

Fixes a regression introduced in 362a9f8 (#6927).

The wrapper <div> added around renderContainer(filteredItems) to scope loading opacity to list items (not the header) broke Bootstrap grid layouts because col-* items were no longer direct children of the row container, causing the Organisations page, Projects page, and Import page to display cards vertically instead of in a horizontal grid.

Fix: Move listClassName from the outer search-list div to the items wrapper div, so that the row class and opacity live on the same element. This preserves Kyle's intended opacity scoping while restoring correct Bootstrap grid behaviour.

Note: The nested ternary in the render block was extracted into a renderListContent helper. This was required because touching the file triggered the pre-existing no-nested-ternary lint error, and we opted to fix it properly rather than adding eslint-disable comments.

How did you test this code?

  • Verified the Organisations and Projects pages render cards in a horizontal grid layout instead of a vertical stack.
  • Verified loading opacity only applies to list items, not the header.

@talissoncosta talissoncosta requested a review from a team as a code owner March 18, 2026 11:11
@talissoncosta talissoncosta requested review from Zaimwa9 and removed request for a team March 18, 2026 11:11
claude[bot]
claude bot reviewed Mar 18, 2026
View reviewed changes
Copy link

@claude claude bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Code review skipped — your organization's overage spend limit has been reached.

Code review is billed via overage credits. To resume reviews, an organization admin can raise the monthly limit in Settings → Usage.

Once credits are available, reopen this pull request to trigger a review.

@vercel
Copy link

vercel bot commented Mar 18, 2026 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
flagsmith-frontend-preview Ready Ready Preview, Comment Mar 18, 2026 0:03am
flagsmith-frontend-staging Ready Ready Preview, Comment Mar 18, 2026 0:03am
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Ignored Ignored Preview Mar 18, 2026 0:03am

Request Review

@github-actions github-actions bot added front-end Issue related to the React Front End Dashboard fix labels Mar 18, 2026
@github-actions
Copy link
Contributor

github-actions bot commented Mar 18, 2026 •
edited
Loading

Docker builds report

Image Build Status Security report
ghcr.io/flagsmith/flagsmith-api-test:pr-6977 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-e2e:pr-6977 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-api:pr-6977 Finished ✅ Results ✅
ghcr.io/flagsmith/flagsmith:pr-6977 Finished ✅ Results ✅
ghcr.io/flagsmith/flagsmith-private-cloud:pr-6977 Finished ✅ Results ✅
ghcr.io/flagsmith/flagsmith-frontend:pr-6977 Finished ✅ Results ✅

@talissoncosta talissoncosta force-pushed the fix/panelsearch-grid-layout-broken branch from a870085 to 9bcb01c Compare March 18, 2026 11:14
@github-actions github-actions bot added fix and removed fix labels Mar 18, 2026
@github-actions
Copy link
Contributor

github-actions bot commented Mar 18, 2026 •
edited
Loading

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  10 passed

Details

stats  10 tests across 7 suites
duration  46.5 seconds
commit  a870085
info  🔄 Run: #15336 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  10 passed

Details

stats  10 tests across 7 suites
duration  48.1 seconds
commit  a870085
info  🔄 Run: #15336 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  16 passed

Details

stats  16 tests across 13 suites
duration  11.7 seconds
commit  a870085
info  🔄 Run: #15336 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  10 passed

Details

stats  10 tests across 7 suites
duration  11 seconds
commit  9bcb01c
info  🔄 Run: #15337 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  10 passed

Details

stats  10 tests across 7 suites
duration  27.6 seconds
commit  9bcb01c
info  🔄 Run: #15337 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  1 minute, 8 seconds
commit  a870085
info  🔄 Run: #15336 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  53.5 seconds
commit  9bcb01c
info  🔄 Run: #15337 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  2 passed

Details

stats  2 tests across 2 suites
duration  1 minute, 6 seconds
commit  9bcb01c
info  🔄 Run: #15337 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  10 passed

Details

stats  10 tests across 7 suites
duration  46.1 seconds
commit  6ee81da
info  🔄 Run: #15347 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  10 passed

Details

stats  10 tests across 7 suites
duration  48 seconds
commit  6ee81da
info  🔄 Run: #15347 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  16 passed

Details

stats  16 tests across 13 suites
duration  57.1 seconds
commit  6ee81da
info  🔄 Run: #15347 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  16 passed

Details

stats  16 tests across 13 suites
duration  28.1 seconds
commit  6ee81da
info  🔄 Run: #15347 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  10 passed

Details

stats  10 tests across 7 suites
duration  45.6 seconds
commit  1cd6dde
info  🔄 Run: #15349 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  10 passed

Details

stats  10 tests across 7 suites
duration  28 seconds
commit  1cd6dde
info  🔄 Run: #15349 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  2 passed

Details

stats  2 tests across 2 suites
duration  55.7 seconds
commit  1cd6dde
info  🔄 Run: #15349 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  2 passed

Details

stats  2 tests across 2 suites
duration  1 minute, 3 seconds
commit  1cd6dde
info  🔄 Run: #15349 (attempt 1)

@talissoncosta talissoncosta requested a review from kyle-ssg March 18, 2026 11:28
@kyle-ssg
Copy link
Member

kyle-ssg commented Mar 18, 2026

Ah, I see what caused this—that’s on me. However, this undoes the original problem I was trying to solve.

This means that when you are filtering features for example everything is getting an opacity change vs the header staying normal:

image

@talissoncosta
Copy link
Contributor Author

talissoncosta commented Mar 18, 2026

Good, thanks for the context @kyle-ssg, let me dig a bit deeper.

@talissoncosta @claude
fix: restore grid layout in PanelSearch without removing opacity wrapper
6ee81da 
The wrapper div added in 362a9f8 to scope loading opacity to list
items (not the header) broke Bootstrap grid layouts because col-*
items were no longer direct children of the row container.

Fix with CSS: make the wrapper div a flex container so it inherits
the grid behaviour from the parent row.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@talissoncosta talissoncosta force-pushed the fix/panelsearch-grid-layout-broken branch from 9bcb01c to 6ee81da Compare March 18, 2026 11:50
@github-actions github-actions bot added fix and removed fix labels Mar 18, 2026
@talissoncosta @claude
fix: move listClassName to items wrapper in PanelSearch
1cd6dde 
The wrapper div added in 362a9f8 to scope loading opacity to list
items broke Bootstrap grid layouts because col-* items were no longer
direct children of the row container.

Move listClassName from the outer search-list div to the items wrapper
so that the row class and opacity live on the same element. This fixes
the grid layout on Organisations, Projects, and Import pages while
preserving the scoped loading opacity.

Also extracts the nested ternary into a renderListContent helper for
readability and to satisfy the linter.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@github-actions github-actions bot added fix and removed fix labels Mar 18, 2026
@kyle-ssg
Copy link
Member

kyle-ssg commented Mar 18, 2026

Thanks latest looks good @talissoncosta

talissoncosta
talissoncosta commented Mar 18, 2026
View reviewed changes
@kyle-ssg kyle-ssg merged commit 51fc019 into main Mar 18, 2026
27 checks passed
@kyle-ssg kyle-ssg deleted the fix/panelsearch-grid-layout-broken branch March 18, 2026 12:12
@flagsmithdev flagsmithdev mentioned this pull request Mar 18, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@claude claude[bot] claude[bot] left review comments

@kyle-ssg kyle-ssg kyle-ssg approved these changes

@Zaimwa9 Zaimwa9 Awaiting requested review from Zaimwa9 Zaimwa9 is a code owner automatically assigned from Flagsmith/flagsmith-front-end

Assignees

No one assigned

Labels

fix front-end Issue related to the React Front End Dashboard

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@talissoncosta @kyle-ssg