Bug Description
Two layout bugs on the admin dashboard pages (Users, Payments, Activity Logs):
1. Settings dropdown renders behind page content
On any admin page, opening the Settings dropdown (Dark Mode / Toggle Brightness) causes it to render behind the tab bar (Users/Payments/Activity Logs) instead of on top of it.
Cause: The outer <Navbar> in NavBar.jsx has no position or z-index set, so it doesn't establish its own stacking context — page content below can render above the dropdown despite its own high z-index.
Fix: Add position: 'relative', zIndex: 1040 to the Navbar's style object.
2. Activity Logs filter panel overflows its container
On the Activity Logs page, the filter row (Search / Role / Activity / From / To / Order / Rows) overflows past the card's right edge instead of staying within its border.
Cause: In ActivityLogs.css, .activity-filter-panel uses a fixed 7-column grid (minmax(220px, 1.6fr) repeat(6, minmax(120px, 0.7fr))), which doesn't fit in narrower containers and doesn't wrap.
Fix: Change grid-template-columns to repeat(auto-fit, minmax(140px, 1fr)) so filter boxes reflow onto new rows instead of overflowing.
Proposed Fix
I've fixed both issues locally and confirmed:
- Settings dropdown now renders cleanly above all page content
- Filter panel wraps properly and stays within the card border
Happy to open a PR if assigned.
Bug Description
Two layout bugs on the admin dashboard pages (Users, Payments, Activity Logs):
1. Settings dropdown renders behind page content
On any admin page, opening the Settings dropdown (Dark Mode / Toggle Brightness) causes it to render behind the tab bar (Users/Payments/Activity Logs) instead of on top of it.
Cause: The outer
<Navbar>inNavBar.jsxhas nopositionorz-indexset, so it doesn't establish its own stacking context — page content below can render above the dropdown despite its own high z-index.Fix: Add
position: 'relative', zIndex: 1040to the Navbar's style object.2. Activity Logs filter panel overflows its container
On the Activity Logs page, the filter row (Search / Role / Activity / From / To / Order / Rows) overflows past the card's right edge instead of staying within its border.
Cause: In
ActivityLogs.css,.activity-filter-paneluses a fixed 7-column grid (minmax(220px, 1.6fr) repeat(6, minmax(120px, 0.7fr))), which doesn't fit in narrower containers and doesn't wrap.Fix: Change
grid-template-columnstorepeat(auto-fit, minmax(140px, 1fr))so filter boxes reflow onto new rows instead of overflowing.Proposed Fix
I've fixed both issues locally and confirmed:
Happy to open a PR if assigned.