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,67 +264,69 @@
   </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">
-  {#if missingRelayLists.length > 0}
+  <PageContent class="flex flex-col-reverse gap-4 py-2 bg-surface !mb-0">
-    <div class="py-12">
+    {#if missingRelayLists.length > 0}
-      <div class="card flex flex-col gap-2 m-auto max-w-md items-center text-center">
+      <div class="py-12">
-        <p class="flex gap-2 text-lg text-error">
+        <div class="card flex flex-col gap-2 m-auto max-w-md items-center text-center">
-          <Icon icon={Danger} />
+          <p class="flex gap-2 text-lg text-error">
-          Direct messages are not enabled
+            <Icon icon={Danger} />
-        </p>
+            Direct messages are not enabled
-        <p>
+          </p>
-          Ask
+          <p>
-          {#each missingRelayLists as pubkey (pubkey)}
+            Ask
-            <ProfileLink {pubkey} />
+            {#each missingRelayLists as pubkey (pubkey)}
-          {/each}
+              <ProfileLink {pubkey} />
-          to enable direct messaging by opening this conversation in their $app.
+            {/each}
-        </p>
+            to enable direct messaging by opening this conversation in their $app.
+          </p>
+        </div>
       </div>
-    </div>
-  {/if}
-  {#each elements as { type, id, value, showPubkey } (id)}
-    {#if type === "date"}
-      <Divider>{value}</Divider>
-    {:else}
-      <ChatMessage
-        event={$state.snapshot(value as TrustedEvent)}
-        {pubkeys}
-        {showPubkey}
-        {replyTo}
-        canEdit={canEditEvent}
-        onEdit={onEditEvent} />
     {/if}
-  {/each}
+    {#each elements as { type, id, value, showPubkey } (id)}
-  <p class="m-auto flex h-10 max-w-sm flex-col items-center justify-center gap-4 py-20 text-center">
+      {#if type === "date"}
-    <Spinner {loading}>
+        <Divider>{value}</Divider>
-      {#if loading}
-        Looking for messages...
       {:else}
-        End of message history
+        <ChatMessage
+          event={$state.snapshot(value as TrustedEvent)}
+          {pubkeys}
+          {showPubkey}
+          {replyTo}
+          canEdit={canEditEvent}
+          onEdit={onEditEvent} />
       {/if}
-    </Spinner>
+    {/each}
-    {@render info?.()}
+    <p
-  </p>
+      class="m-auto flex h-10 max-w-sm flex-col items-center justify-center gap-4 py-20 text-center">
-  <div class="h-screen"></div>
+      <Spinner {loading}>
-</div>
+        {#if loading}
+          Looking for messages...
+        {:else}
+          End of message history
+        {/if}
+      </Spinner>
+      {@render info?.()}
+    </p>
+  </PageContent>
 
-<div class="room__compose bg-surface">
+  <div class="room__compose bg-surface">
-  <div>
+    <div>
-    {#if parent}
+      {#if parent}
-      <ChatComposeParent event={parent} clear={clearParent} verb="Replying to" />
+        <ChatComposeParent event={parent} clear={clearParent} verb="Replying to" />
-    {/if}
+      {/if}
-    {#if eventToEdit}
+      {#if eventToEdit}
-      <ChatComposeEdit clear={clearEventToEdit} />
+        <ChatComposeEdit clear={clearEventToEdit} />
-    {/if}
+      {/if}
+    </div>
+    {#key eventToEdit}
+      <ChatCompose
+        bind:this={compose}
+        {onSubmit}
+        {onEscape}
+        {onEditPrevious}
+        initialValues={eventToEdit}
+        draftKey={eventToEdit ? undefined : draftKey}
+        disabled={Boolean(missingRelayLists.length)} />
+    {/key}
   </div>
-  {#key eventToEdit}
-    <ChatCompose
-      bind:this={compose}
-      {onSubmit}
-      {onEscape}
-      {onEditPrevious}
-      initialValues={eventToEdit}
-      draftKey={eventToEdit ? undefined : draftKey}
-      disabled={Boolean(missingRelayLists.length)} />
-  {/key}
 </div>