Fix DM compose bar being hidden/cut off on mobile (#335)

Co-authored-by: Aditya Chaudhary <30+useradityaa@noreply.coracle.social>

src/app/components/Chat.svelte

@@ -26,6 +26,7 @@
   import Icon from "@lib/components/Icon.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
+  import PageContent from "@lib/components/PageContent.svelte"
   import Divider from "@lib/components/Divider.svelte"
   import Button from "@lib/components/Button.svelte"
   import ProfileName from "@app/components/ProfileName.svelte"
@@ -263,7 +264,8 @@
   </div>
 </PageBar>
 
-<div class="flex flex-col-reverse gap-4 py-2 bg-surface scroll-container h-screen overflow-y-auto">
+<div class="room flex min-h-0 min-w-0 flex-1 flex-col">
+  <PageContent class="flex flex-col-reverse gap-4 py-2 bg-surface !mb-0">
     {#if missingRelayLists.length > 0}
       <div class="py-12">
         <div class="card flex flex-col gap-2 m-auto max-w-md items-center text-center">
@@ -294,7 +296,8 @@
           onEdit={onEditEvent} />
       {/if}
     {/each}
-  <p class="m-auto flex h-10 max-w-sm flex-col items-center justify-center gap-4 py-20 text-center">
+    <p
+      class="m-auto flex h-10 max-w-sm flex-col items-center justify-center gap-4 py-20 text-center">
       <Spinner {loading}>
         {#if loading}
           Looking for messages...
@@ -304,10 +307,9 @@
       </Spinner>
       {@render info?.()}
     </p>
-  <div class="h-screen"></div>
+  </PageContent>
-</div>
 
-<div class="room__compose bg-surface">
+  <div class="room__compose bg-surface">
     <div>
       {#if parent}
         <ChatComposeParent event={parent} clear={clearParent} verb="Replying to" />
@@ -326,4 +328,5 @@
         draftKey={eventToEdit ? undefined : draftKey}
         disabled={Boolean(missingRelayLists.length)} />
     {/key}
+  </div>
 </div>