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

@@ -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>

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">