Fix navbar/filter layout bugs and replace native alerts with Toast in Login

[teja-311]

Description

This PR contains two separate, focused commits:

Commit 1: Fix Settings dropdown z-index overlap and Activity Logs filter panel overflow

Fixes #24

• Added position: relative and zIndex: 1040 to <Navbar> in NavBar.jsx so the Settings dropdown reliably renders above page content instead of behind the admin tab bar.
• Changed .activity-filter-panel grid in ActivityLogs.css from a fixed 7-column layout to repeat(auto-fit, minmax(140px, 1fr)) so filter fields wrap onto new rows instead of overflowing the card border.

Commit 2: Add reusable Toast component and replace native alerts in Login.jsx

Fixes #36

Login.jsx used window.alert() / alert() for all user feedback (8 call sites: empty field validation, login success/failure, forgot password, reset password). Native alerts block the page and can't be styled.

Added a new reusable Toast.jsx component:

• Auto-dismisses after 3 seconds
• Manual close (×) button
• Supports success / error / info styling variants
• No external dependencies

Replaced all 8 alert() calls in Login.jsx with showToast(message, type), backed by local component state and a <Toast /> render at the top of the component.

Note: this PR also supersedes the earlier closed PR #30, which contained just the CSS fixes for #24 and those changes are now included here as Commit 1, combined with the more substantial Toast implementation as requested.

Before / After

Settings dropdown:

Filter panel overflow:

Native alert → Toast (Login flow):

learnhub.login.flow.mp4

Steps to Test

1. Log in as Admin → open Settings on any admin tab → confirm the dropdown renders above the content, not behind it
2. Go to Activity Logs → confirm the filter row wraps within the card instead of overflowing
3. Go to the Login page:
   • Submit with empty fields → red error toast appears, auto-dismisses after ~3s
   • Submit with invalid credentials → red toast appears → try manually closing it with the × button
   • Click "Forgot password?" → submit with empty email → red toast appears
   • Log in with a valid demo account → redirects directly to dashboard

Build Verification

Ran npm run dev in frontend. builds and runs cleanly with no new warnings or errors.

Type of Change

• 🐛 Bug fix (non-breaking change which fixes an issue)
• ✨ New feature (non-breaking change which adds functionality)

Checklist

• My code follows the style guidelines of this project.
• I have performed a self-review of my own code.
• I have commented my code, particularly in hard-to-understand areas.
• I have made corresponding changes to the documentation.
• My changes generate no new warnings or console errors.
• I have tested my changes locally and verified they work as expected.
• Any dependent changes have been merged and published in downstream modules.

[udaycodespace]

Description

This PR contains two separate, focused commits:

Commit 1: Fix Settings dropdown z-index overlap and Activity Logs filter panel overflow

Fixes #24

• Added position: relative and zIndex: 1040 to <Navbar> in NavBar.jsx so the Settings dropdown reliably renders above page content instead of behind the admin tab bar.
• Changed .activity-filter-panel grid in ActivityLogs.css from a fixed 7-column layout to repeat(auto-fit, minmax(140px, 1fr)) so filter fields wrap onto new rows instead of overflowing the card border.

Commit 2: Add reusable Toast component and replace native alerts in Login.jsx

Fixes #36

Login.jsx used window.alert() / alert() for all user feedback (8 call sites: empty field validation, login success/failure, forgot password, reset password). Native alerts block the page and can't be styled.

Added a new reusable Toast.jsx component:

• Auto-dismisses after 3 seconds
• Manual close (×) button
• Supports success / error / info styling variants
• No external dependencies

Replaced all 8 alert() calls in Login.jsx with showToast(message, type), backed by local component state and a <Toast /> render at the top of the component.

Note: this PR also supersedes the earlier closed PR #30, which contained just the CSS fixes for #24 and those changes are now included here as Commit 1, combined with the more substantial Toast implementation as requested.

Before / After

Settings dropdown:

Filter panel overflow:

Native alert → Toast (Login flow):

learnhub.login.flow.mp4

Steps to Test

1. Log in as Admin → open Settings on any admin tab → confirm the dropdown renders above the content, not behind it

2. Go to Activity Logs → confirm the filter row wraps within the card instead of overflowing

3. Go to the Login page:

   • Submit with empty fields → red error toast appears, auto-dismisses after ~3s
   • Submit with invalid credentials → red toast appears → try manually closing it with the × button
   • Click "Forgot password?" → submit with empty email → red toast appears
   • Log in with a valid demo account → redirects directly to dashboard

Build Verification

Ran npm run dev in frontend. builds and runs cleanly with no new warnings or errors.

Type of Change

• 🐛 Bug fix (non-breaking change which fixes an issue)
• ✨ New feature (non-breaking change which adds functionality)

Checklist

• My code follows the style guidelines of this project.
• I have performed a self-review of my own code.
• I have commented my code, particularly in hard-to-understand areas.
• I have made corresponding changes to the documentation.
• My changes generate no new warnings or console errors.
• I have tested my changes locally and verified they work as expected.
• Any dependent changes have been merged and published in downstream modules.

LGTM!