Display voice widget in chat rooms on mobile

src/app.css

@@ -422,6 +422,14 @@ body.keyboard-open .hide-on-keyboard {
   @apply cb cw fixed z-compose;
 }
 
+.chat__compose-zone {
+  @apply cb cw fixed z-compose;
+}
+
+.chat__compose-zone .chat__compose-inner {
+  @apply min-w-0;
+}
+
 .chat__scroll-down {
   @apply pb-sai fixed bottom-28 right-4 z-feature md:bottom-16;
 }

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

@@ -47,6 +47,8 @@
     PROTECTED,
     userSettingsValues,
   } from "@app/core/state"
+  import VoiceWidget from "@app/components/VoiceWidget.svelte"
+  import {currentVoiceSession} from "@app/voice"
   import {makeFeed} from "@app/core/requests"
   import {popKey} from "@lib/implicit"
   import {checked} from "@app/util/notifications"
@@ -444,7 +446,10 @@
   {/if}
 </PageContent>
 
-<div class="chat__compose bg-base-200" bind:this={chatCompose}>
+<div
+  class="chat__compose-zone flex flex-col gap-1 bg-base-200 md:flex-row md:gap-0"
+  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}
@@ -492,6 +497,12 @@
       {/key}
     {/if}
   </div>
+  {#if $currentVoiceSession}
+    <div class="hide-on-keyboard flex-shrink-0 p-2 md:hidden">
+      <VoiceWidget />
+    </div>
+  {/if}
+</div>
 
 {#if showScrollButton}
   <div in:fade class="chat__scroll-down">