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

@@ -50,7 +50,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;
 }
 
 [data-theme] {
@@ -389,53 +388,6 @@ progress[value]::-webkit-progress-value {
   transition: width 0.5s;
 }
 
-/* content width for fixed elements */
-
-.cw {
-  @apply w-full md:left-[18.5rem] md:w-[calc(100%-18.5rem-var(--sair))];
-}
-
-.cw-video-call-content {
-  @apply w-full md:left-[calc(18.5rem+18rem)] md:w-[calc(100%-18.5rem-18rem-var(--sair))];
-}
-
-/* Voice: desktop split — plain CSS so / in calc is not parsed as Tailwind slash syntax */
-.cw-split-video {
-  width: 100%;
-}
-
-.cw-split-chat {
-  width: 100%;
-}
-
-@media (min-width: 768px) {
-  .cw-split-video {
-    left: 18.5rem;
-    right: auto;
-    width: calc((100vw - 18.5rem - var(--sair)) / 2);
-    max-width: none;
-  }
-
-  .cw-split-chat {
-    left: calc(18.5rem + (100vw - 18.5rem - var(--sair)) / 2);
-    right: auto;
-    width: calc((100vw - 18.5rem - var(--sair)) / 2);
-    max-width: none;
-  }
-}
-
-.cw-full {
-  @apply w-full md:left-[4rem] md:w-[calc(100%-4rem-var(--sair))];
-}
-
-.cb {
-  @apply md:bottom-sai bottom-[calc(var(--saib)+3.5rem)];
-}
-
-.ct {
-  @apply top-[calc(var(--sait)+5rem)] md:top-[calc(var(--sait)+3rem)];
-}
-
 .left-content {
   @apply md:left-[calc(18.5rem+var(--sail))];
 }
@@ -449,26 +401,13 @@ body.keyboard-open .hide-on-keyboard {
 /* chat view */
 
 .chat__compose {
-  @apply relative z-compose mb-14 flex-grow md:mb-0;
+  @apply relative z-compose mb-14 shrink-0 md:mb-0;
 }
 
 .chat__compose .chat__compose-inner {
   @apply min-w-0;
 }
 
-.chat__compose-zone.cw-video-call-content {
-  @apply md:left-[calc(18.5rem+18rem)] md:w-[calc(100%-18.5rem-18rem-var(--sair))];
-}
-
-@media (min-width: 768px) {
-  .chat__compose-zone.cw-split-chat {
-    left: calc(18.5rem + (100vw - 18.5rem - var(--sair)) / 2);
-    right: auto;
-    width: calc((100vw - 18.5rem - var(--sair)) / 2);
-    max-width: none;
-  }
-}
-
 .chat__scroll-down {
   @apply pb-sai fixed bottom-28 right-4 z-feature md:bottom-16;
 }

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/lib/components/PageContent.svelte

@@ -5,18 +5,15 @@
   interface Props {
     element?: Element
     children?: Snippet
-    /** Desktop voice: chat occupies the right half in split view. */
-    contentFrame?: "default" | "split-right"
     [key: string]: any
   }
 
-  let {children, element = $bindable(), contentFrame = "default", ...props}: Props = $props()
+  let {children, element = $bindable(), ...props}: Props = $props()
 
   const className = $derived(
     cx(
       props.class,
-      "scroll-container cb ct fixed z-feature overflow-y-auto overflow-x-hidden",
+      "scroll-container z-feature flex min-h-0 w-full min-w-0 flex-1 flex-col overflow-y-auto overflow-x-hidden",
-      contentFrame === "split-right" ? "cw-split-chat" : "cw",
     ),
   )
 </script>

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

@@ -77,10 +77,6 @@
     isVoiceRoom && $voiceState === VoiceState.Connected && $voiceMobileRoomPanel === "video",
   )
 
-  const pageContentFrame = $derived<"default" | "split-right">(
-    voiceConnectedHere && $voiceDesktopRoomPanel === "split" ? "split-right" : "default",
-  )
-
   const pageContentHiddenDesktopVideoOnly = $derived(
     voiceConnectedHere && $voiceDesktopRoomPanel === "video",
   )
@@ -422,157 +418,181 @@
   {/snippet}
 </SpaceBar>
 
-<PageContent
-  bind:element
-  onscroll={onScroll}
-  contentFrame={pageContentFrame}
-  class={cx(
-    showMobileVideoPanel
-      ? "hidden flex-col-reverse pt-4 md:flex md:flex-col-reverse"
-      : "flex flex-col-reverse pt-4",
-    pageContentHiddenDesktopVideoOnly && "md:hidden",
-  )}>
-  <div bind:this={dynamicPadding}></div>
-  {#if $room.isPrivate && $membershipStatus !== MembershipStatus.Granted}
-    <div class="py-20">
-      <div class="card2 col-8 m-auto max-w-md items-center text-center">
-        <p class="opacity-75">You aren't currently a member of this room.</p>
-        {#if $membershipStatus === MembershipStatus.Pending}
-          <Button class="btn btn-neutral btn-sm" disabled={leaving} onclick={leave}>
-            <Icon icon={ClockCircle} />
-            Access Pending
-          </Button>
-        {:else}
-          <Button class="btn btn-neutral btn-sm" disabled={joining} onclick={join}>
-            {#if joining}
-              <span class="loading loading-spinner loading-sm"></span>
-            {:else}
-              <Icon icon={Login2} />
-            {/if}
-            Join Room
-          </Button>
-        {/if}
-      </div>
-    </div>
-  {:else}
-    {#if loadingForward}
-      <p class="py-20 flex justify-center">
-        <Spinner loading={loadingForward}>Looking for messages...</Spinner>
-      </p>
-    {/if}
-    {#each elements as { type, id, value, showPubkey } (id)}
-      {#if type === "new-messages"}
-        <div
-          {id}
-          class="flex items-center py-2 text-xs transition-colors"
-          class:opacity-0={showFixedNewMessages}>
-          <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 flex-grow bg-primary"></div>
-        </div>
-      {:else if type === "date"}
-        <Divider>{value}</Divider>
-      {:else}
-        {@const event = $state.snapshot(value as TrustedEvent)}
-        {#if event.kind === ROOM_ADD_MEMBER}
-          <RoomItemAddMember {url} {event} />
-        {:else}
-          <div in:slide class="cv" class:-mt-1={!showPubkey}>
-            <RoomItem
-              {url}
-              {event}
-              {replyTo}
-              {showPubkey}
-              canEdit={canEditEvent}
-              onEdit={onEditEvent} />
-          </div>
-        {/if}
-      {/if}
-    {/each}
-    <p class="flex h-10 items-center justify-center py-20">
-      {#if loadingBackward}
-        <Spinner loading={loadingBackward}>Looking for messages...</Spinner>
-      {:else}
-        <Spinner>End of message history</Spinner>
-      {/if}
-    </p>
-  {/if}
-  <div class="h-screen"></div>
-</PageContent>
-
-{#if voiceConnectedHere}
-  <VideoCallContent
-    variant="desktop-split"
-    {url}
-    {h}
-    visible={$voiceDesktopRoomPanel === "split"} />
-  <VideoCallContent variant="desktop-full" {url} {h} visible={$voiceDesktopRoomPanel === "video"} />
-{/if}
-
-{#if isVoiceRoom && $voiceState === VoiceState.Connected}
-  <VideoCallContent variant="mobile" {url} {h} visible={$voiceMobileRoomPanel === "video"} />
-{/if}
-
 <div
   class={cx(
-    "chat__compose-zone chat__compose flex flex-col gap-1 bg-base-200 md:flex-row md:gap-0",
+    "flex min-h-0 flex-1 flex-col",
-    voiceConnectedHere && $voiceDesktopRoomPanel === "split" && "cw-split-chat",
+    voiceConnectedHere && $voiceDesktopRoomPanel === "split" && "md:flex-row",
-    pageContentHiddenDesktopVideoOnly && "md:hidden",
+  )}>
-    showMobileVideoPanel && "max-md:hidden",
+  {#if voiceConnectedHere}
-  )}
+    <VideoCallContent
-  bind:this={chatCompose}>
+      variant="desktop-split"
-  <div class="chat__compose-inner min-w-0 flex-1">
+      {url}
-    {#if $room.isPrivate && $membershipStatus !== MembershipStatus.Granted}
+      {h}
-      <!-- pass -->
+      visible={$voiceDesktopRoomPanel === "split"}
-    {:else if $room.isRestricted && $membershipStatus !== MembershipStatus.Granted}
+      class="hidden min-h-0 w-full min-w-0 flex-1 flex-col md:flex" />
-      <div class="bg-alt card m-4 flex flex-row items-center justify-between px-4 py-3">
+    <VideoCallContent
-        <p class="opacity-75">Only members are allowed to post to this room.</p>
+      variant="desktop-full"
-        {#if $membershipStatus === MembershipStatus.Pending}
+      {url}
-          <Button class="btn btn-neutral btn-sm" disabled={leaving} onclick={leave}>
+      {h}
-            <Icon icon={ClockCircle} />
+      visible={$voiceDesktopRoomPanel === "video"}
-            Access Pending
+      class="hidden min-h-0 w-full min-w-0 flex-1 flex-col md:flex" />
-          </Button>
-        {:else}
-          <Button class="btn btn-neutral btn-sm" disabled={joining} onclick={join}>
-            {#if joining}
-              <span class="loading loading-spinner loading-sm"></span>
-            {:else}
-              <Icon icon={Login2} />
-            {/if}
-            Ask to Join
-          </Button>
-        {/if}
-      </div>
-    {:else}
-      <div>
-        {#if parent}
-          <RoomComposeParent event={parent} clear={clearParent} verb="Replying to" />
-        {/if}
-        {#if share}
-          <RoomComposeParent event={share} clear={clearShare} verb="Sharing" />
-        {/if}
-        {#if eventToEdit}
-          <RoomComposeEdit clear={clearEventToEdit} />
-        {/if}
-      </div>
-      {#key eventToEdit}
-        <RoomCompose
-          {url}
-          {h}
-          {onSubmit}
-          {onEscape}
-          {onEditPrevious}
-          content={eventToEdit?.content}
-          bind:this={compose} />
-      {/key}
-    {/if}
-  </div>
-  {#if isVoiceRoom || $voiceState === VoiceState.Joining || $voiceState === VoiceState.Connected}
-    <div
-      class={cx("hide-on-keyboard flex-shrink-0 p-2 md:hidden", showMobileVideoPanel && "hidden")}>
-      <VoiceWidget />
-    </div>
   {/if}
+
+  <div
+    class={cx(
+      "flex min-h-0 min-w-0 flex-1 flex-col",
+      voiceConnectedHere && $voiceDesktopRoomPanel === "video" && "md:hidden",
+    )}>
+    {#if isVoiceRoom && $voiceState === VoiceState.Connected}
+      <VideoCallContent
+        variant="mobile"
+        {url}
+        {h}
+        visible={$voiceMobileRoomPanel === "video"}
+        class="md:hidden" />
+    {/if}
+
+    <PageContent
+      bind:element
+      onscroll={onScroll}
+      class={cx(
+        showMobileVideoPanel
+          ? "hidden flex-col-reverse pt-4 md:flex md:flex-col-reverse"
+          : "flex flex-col-reverse pt-4",
+        pageContentHiddenDesktopVideoOnly && "md:hidden",
+      )}>
+      <div bind:this={dynamicPadding}></div>
+      {#if $room.isPrivate && $membershipStatus !== MembershipStatus.Granted}
+        <div class="py-20">
+          <div class="card2 col-8 m-auto max-w-md items-center text-center">
+            <p class="opacity-75">You aren't currently a member of this room.</p>
+            {#if $membershipStatus === MembershipStatus.Pending}
+              <Button class="btn btn-neutral btn-sm" disabled={leaving} onclick={leave}>
+                <Icon icon={ClockCircle} />
+                Access Pending
+              </Button>
+            {:else}
+              <Button class="btn btn-neutral btn-sm" disabled={joining} onclick={join}>
+                {#if joining}
+                  <span class="loading loading-spinner loading-sm"></span>
+                {:else}
+                  <Icon icon={Login2} />
+                {/if}
+                Join Room
+              </Button>
+            {/if}
+          </div>
+        </div>
+      {:else}
+        {#if loadingForward}
+          <p class="py-20 flex justify-center">
+            <Spinner loading={loadingForward}>Looking for messages...</Spinner>
+          </p>
+        {/if}
+        {#each elements as { type, id, value, showPubkey } (id)}
+          {#if type === "new-messages"}
+            <div
+              {id}
+              class="flex items-center py-2 text-xs transition-colors"
+              class:opacity-0={showFixedNewMessages}>
+              <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 flex-grow bg-primary"></div>
+            </div>
+          {:else if type === "date"}
+            <Divider>{value}</Divider>
+          {:else}
+            {@const event = $state.snapshot(value as TrustedEvent)}
+            {#if event.kind === ROOM_ADD_MEMBER}
+              <RoomItemAddMember {url} {event} />
+            {:else}
+              <div in:slide class="cv" class:-mt-1={!showPubkey}>
+                <RoomItem
+                  {url}
+                  {event}
+                  {replyTo}
+                  {showPubkey}
+                  canEdit={canEditEvent}
+                  onEdit={onEditEvent} />
+              </div>
+            {/if}
+          {/if}
+        {/each}
+        <p class="flex h-10 items-center justify-center py-20">
+          {#if loadingBackward}
+            <Spinner loading={loadingBackward}>Looking for messages...</Spinner>
+          {:else}
+            <Spinner>End of message history</Spinner>
+          {/if}
+        </p>
+      {/if}
+      <div class="h-screen"></div>
+    </PageContent>
+
+    <div
+      class={cx(
+        "chat__compose-zone chat__compose flex flex-col gap-1 bg-base-200 md:flex-row md:gap-0",
+        pageContentHiddenDesktopVideoOnly && "md:hidden",
+        showMobileVideoPanel && "max-md:hidden",
+      )}
+      bind:this={chatCompose}>
+      <div class="chat__compose-inner min-w-0 flex-1">
+        {#if $room.isPrivate && $membershipStatus !== MembershipStatus.Granted}
+          <!-- pass -->
+        {:else if $room.isRestricted && $membershipStatus !== MembershipStatus.Granted}
+          <div class="bg-alt card m-4 flex flex-row items-center justify-between px-4 py-3">
+            <p class="opacity-75">Only members are allowed to post to this room.</p>
+            {#if $membershipStatus === MembershipStatus.Pending}
+              <Button class="btn btn-neutral btn-sm" disabled={leaving} onclick={leave}>
+                <Icon icon={ClockCircle} />
+                Access Pending
+              </Button>
+            {:else}
+              <Button class="btn btn-neutral btn-sm" disabled={joining} onclick={join}>
+                {#if joining}
+                  <span class="loading loading-spinner loading-sm"></span>
+                {:else}
+                  <Icon icon={Login2} />
+                {/if}
+                Ask to Join
+              </Button>
+            {/if}
+          </div>
+        {:else}
+          <div>
+            {#if parent}
+              <RoomComposeParent event={parent} clear={clearParent} verb="Replying to" />
+            {/if}
+            {#if share}
+              <RoomComposeParent event={share} clear={clearShare} verb="Sharing" />
+            {/if}
+            {#if eventToEdit}
+              <RoomComposeEdit clear={clearEventToEdit} />
+            {/if}
+          </div>
+          {#key eventToEdit}
+            <RoomCompose
+              {url}
+              {h}
+              {onSubmit}
+              {onEscape}
+              {onEditPrevious}
+              content={eventToEdit?.content}
+              bind:this={compose} />
+          {/key}
+        {/if}
+      </div>
+      {#if isVoiceRoom || $voiceState === VoiceState.Joining || $voiceState === VoiceState.Connected}
+        <div
+          class={cx(
+            "hide-on-keyboard flex-shrink-0 p-2 md:hidden",
+            showMobileVideoPanel && "hidden",
+          )}>
+          <VoiceWidget />
+        </div>
+      {/if}
+    </div>
+  </div>
 </div>
 
 {#if showScrollButton}