Mobile layout: fixed AppBar stacks under sticky global search row (border / overlap artifact)

[carlh7777]

Description

On mobile (< md), the fixed AppBar and the sticky global search row in AppLayout use conflicting z-index values. The sticky search wrapper sits above MUI’s default fixed AppBar (z-index: 1100), so the search/header region can paint on top of the app bar and show a visible border or stacking overlap.

Affected areas

1. Sticky global search vs mobile AppBar
   File: src/components/layout/AppLayout.tsx
   • Mobile AppBar: position="fixed" (MUI default z-index: 1100).
   • Wrapper around GlobalSearchBar: position: sticky with zIndex: 1200.
   • Root cause: sticky layer is above fixed app bar in the same stacking context.

Steps to Reproduce

Open the app in a viewport below the md breakpoint (or on a phone).
Go to a route that shows the global search bar.
Scroll so the search row sticks under the top.
Observe the top region: overlap/border artifact where sticky content meets the fixed AppBar.

Expected Behavior

Fixed mobile AppBar stays visually above sticky in-page chrome (search row).
No spurious border/overlap between the two.
Avoid raising AppBar to modal-level z-index (e.g. 1300) so future Modal/Dialog usage is not regressed.

Actual Behavior

Sticky search/header area can appear above the fixed AppBar, producing a visible overlap/border artifact on mobile.

Environment

Browser: (Chrome / Safari / …)
Viewport: below md breakpoint
(Optional) OS / device