From fb38a07e37af1f3cf3470a852a9acf071679703b Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Fri, 23 Jan 2026 17:49:57 +0100
Subject: [PATCH] fix: Ensure header displays on mobile

- Add flex-shrink-0 to prevent header from being compressed
- Increase header z-index to z-30 to stay above map elements
- Add relative positioning to header

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/room/InstallBanner.tsx | 2 +-
 src/components/room/RoomHeader.tsx    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/room/InstallBanner.tsx b/src/components/room/InstallBanner.tsx
index 336a0da..5027f95 100644
--- a/src/components/room/InstallBanner.tsx
+++ b/src/components/room/InstallBanner.tsx
@@ -36,7 +36,7 @@ export default function InstallBanner() {
 
   return (
     <>
-      <div className="bg-rmaps-primary/20 border-b border-rmaps-primary/30 px-4 py-2 flex items-center justify-between text-sm">
+      <div className="bg-rmaps-primary/20 border-b border-rmaps-primary/30 px-4 py-2 flex items-center justify-between text-sm flex-shrink-0">
         <div className="flex items-center gap-2">
           <span className="text-lg">📲</span>
           <span className="text-white/90">Install rMaps for the best experience</span>
diff --git a/src/components/room/RoomHeader.tsx b/src/components/room/RoomHeader.tsx
index 33adc87..c68a610 100644
--- a/src/components/room/RoomHeader.tsx
+++ b/src/components/room/RoomHeader.tsx
@@ -22,7 +22,7 @@ export default function RoomHeader({
   syncUrl,
 }: RoomHeaderProps) {
   return (
-    <header className="bg-rmaps-dark/95 backdrop-blur border-b border-white/10 px-4 py-3 flex items-center justify-between z-10">
+    <header className="bg-rmaps-dark/95 backdrop-blur border-b border-white/10 px-4 py-3 flex items-center justify-between z-30 flex-shrink-0 relative">
       {/* Left: Room info */}
       <div className="flex items-center gap-3">
         <a href="/" className="text-xl font-bold">