incorporate page layout changes from dev and other cleanup

ios/App/App/Info.plist

@@ -25,9 +25,9 @@
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
 	<key>NSCameraUsageDescription</key>
-	<string>Flotilla uses the camera for video in voice rooms.</string>
+	<string>Flotilla uses the camera when you enable it in a voice room.</string>
 	<key>NSMicrophoneUsageDescription</key>
-	<string>Flotilla uses the microphone for voice chat in rooms.</string>
+	<string>Flotilla uses the microphone when you enable it in a voice room.</string>
 	<key>UIBackgroundModes</key>
 	<array>
 		<string>remote-notification</string>

src/app.css

@@ -30,7 +30,6 @@
   --saib: var(--safe-area-inset-bottom, env(safe-area-inset-bottom));
   --sail: var(--safe-area-inset-left, env(safe-area-inset-left));
   --sair: var(--safe-area-inset-right, env(safe-area-inset-right));
-  --video-call-panel-bg: #181e24;
 }
 
 @utility py-sai {

src/app/components/VideoCallContent.svelte

@@ -152,11 +152,11 @@
   const panelChrome = $derived(
     cx(
       variant === "mobile" &&
-        "cb top-[calc(var(--sait)+6rem)] cw z-compose bg-[var(--video-call-panel-bg)] fixed inset-x-0 flex min-h-0 flex-col gap-2 overflow-y-auto overflow-x-hidden px-2 pb-2 pt-1 md:hidden",
+        "flex min-h-0 w-full flex-1 flex-col gap-2 overflow-y-auto overflow-x-hidden bg-base-200 px-2 pt-4 md:hidden pb-[calc(3.5rem+var(--saib))]",
       variant === "desktop-split" &&
-        "cb ct cw-split-video z-compose bg-[var(--video-call-panel-bg)] fixed hidden min-h-0 flex-col gap-2 overflow-hidden p-2 md:flex",
+        "flex min-h-0 w-full min-w-0 flex-1 flex-col gap-2 overflow-hidden bg-base-200 px-2 pb-2 pt-4",
       variant === "desktop-full" &&
-        "cb ct cw z-compose bg-[var(--video-call-panel-bg)] fixed hidden min-h-0 flex-col gap-2 overflow-hidden p-2 md:flex",
+        "flex min-h-0 w-full min-w-0 flex-1 flex-col gap-2 overflow-hidden bg-base-200 px-2 pb-2 pt-4",
       className,
     ),
   )
@@ -246,7 +246,7 @@
         <div class="min-h-0 flex-1 overflow-hidden">
           {@render videoPanelBody()}
         </div>
-        <div class="shrink-0">
+        <div class="shrink-0 pb-2">
           <VoiceWidget />
         </div>
       </div>

src/app/components/VoiceWidget.svelte

@@ -123,7 +123,7 @@
   const onLayoutToggle = () => {
     if (!showVoiceLayoutToggle) return
     if (isMd) {
-      voiceDesktopRoomPanel.update(p => (p === "split" ? "chat" : "split"))
+      voiceDesktopRoomPanel.update(p => (p === "split" ? "video" : "split"))
     } else {
       voiceMobileRoomPanel.update(p => (p === "chat" ? "video" : "chat"))
     }

src/routes/spaces/[relay]/[h]/+page.svelte

@@ -489,9 +489,9 @@
               {id}
               class="flex items-center py-2 text-xs transition-colors"
               class:opacity-0={showFixedNewMessages}>
-          <div class="h-px grow bg-primary"></div>
+              <div class="h-px flex-grow bg-primary"></div>
               <p class="rounded-full bg-primary px-2 py-1 text-primary-content">New Messages</p>
-          <div class="h-px grow bg-primary"></div>
+              <div class="h-px flex-grow bg-primary"></div>
             </div>
           {:else if type === "date"}
             <Divider>{value}</Divider>