fix: adjust zIndex for AppBar in AppLayout component

[carlh7777]

Summary

On mobile widths (< md), the fixed header/search area showed an unwanted border/stacking overlap because the AppBar was rendered under adjacent sticky content.
This updates the mobile AppBar z-index in AppLayout so it consistently layers above nearby header-row content and removes the visual border artifact.

Type of Change

• Bug fix
• New feature
• Refactor
• Documentation
• Other (describe below)

Related Issues

fix #287

Screenshots

Checklist

• New components are modularized/separated where sensible
• Uses predefined theme (e.g. no hardcoded colors)
• Responsive/mobile checked
• Tested against the test API
• npm run format and npm run lint:fix have been run
• npm run build passes
• Screenshots included for any UI/visual changes

Implementation Notes

• Updated mobile AppBar style in src/components/layout/AppLayout.tsx to use a higher zIndex (1300).
• Root cause: mobile AppBar default layer (MuiAppBar-positionFixed) was lower than nearby sticky header/search container, causing visible overlap/border artifact.
• Scope is intentionally minimal: only stacking context adjustment, no layout/spacing logic changes.

Behavior

• Before: thin red/visual border overlap appears around the top search/header region on mobile.
• After: mobile header remains visually on top; border artifact no longer appears.
• Desktop behavior: unchanged.

Edge Cases

• Mobile breakpoint transitions (md boundary) still behave as expected.
• No impact to drawer open/close behavior beyond improved stacking order.
• No accessibility behavior changes (pure visual stacking fix).

[carlh7777]

@anderdc could you please review the pr?

[carlh7777]

@anderdc could you please approve workflows and review this PR?
This is a small UI fix (AppBar z-index on mobile), no layout impact. Thanks!

[anderdc]

zIndex: 1300 will break modals/dialogs

MUI's z-index scale: AppBar=1100, Drawer=1200, Modal=1300. Setting the AppBar to 1300 means it renders over any Modal or Dialog in the app.

The root cause is the sticky header row at line 148 of AppLayout.tsx sitting at zIndex: 1200, which is above the default AppBar (1100). Fix options:

• Lower the sticky header's z-index below 1100 (e.g. 1099)
• Set AppBar to 1201 — above the sticky element but below modals
• Use theme.zIndex.appBar + 1 for a relative value

Also: the "Closes" field in the PR body is empty — no issue linked.

[anderdc]

To clarify — we don't actually use modals today so 1300 won't break anything right now. But the simpler fix is to lower the sticky header's z-index (line 148) to something like 500 instead of bumping the AppBar above it. That way everything stays well below MUI's built-in layers.

[carlh7777]

@anderdc Thanks for the review — updated as suggested.

I removed the AppBar z-index override and lowered the sticky search header z-index in AppLayout (line ~148) to 500 so it stays below MUI’s default layers.

This resolves the mobile overlap issue in #287 while keeping the z-index hierarchy aligned with MUI.

Could you please recheck when you have a moment?