Rework css on room view to avoid losing input visibility

src/app.css

@@ -329,3 +329,27 @@ emoji-picker {
 progress[value]::-webkit-progress-value {
   transition: width 0.5s;
 }
+
+/* content width for fixed elements */
+
+.cw {
+  @apply w-full md:w-[calc(100%-18.5rem)];
+}
+
+/* chat view */
+
+.chat__page-bar {
+  @apply cw !fixed top-0;
+}
+
+.chat__messages {
+  @apply cw fixed top-12 flex h-[calc(100%-10rem)] flex-col-reverse overflow-y-auto overflow-x-hidden md:h-[calc(100%-6rem)];
+}
+
+.chat__compose {
+  @apply cw fixed bottom-14 md:bottom-0;
+}
+
+.chat__scroll-down {
+  @apply fixed bottom-28 right-4 md:bottom-16;
+}

src/lib/components/PageBar.svelte

@@ -9,7 +9,7 @@
   const {...props}: Props = $props()
 </script>
 
-<div class="relative z-feature mx-2 rounded-xl pt-2 {props.class}">
+<div class="relative z-feature rounded-xl px-2 pt-2 {props.class}">
   <div
     class="flex min-h-12 items-center justify-between gap-4 rounded-xl bg-base-100 px-4 shadow-xl">
     <div class="flex items-center gap-4">

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

@@ -125,6 +125,7 @@
         </div>
       {/if}
     </div>
+    <Divider>Your Rooms</Divider>
     <div class="grid grid-cols-3 gap-2">
       <Link href={threadsPath} class="btn btn-primary">
         <div class="relative flex items-center gap-2">
@@ -167,6 +168,9 @@
           {/if}
         </Link>
       {/each}
+    </div>
+    <Divider>Other Rooms</Divider>
+    <div class="grid grid-cols-3 gap-2">
       {#each $otherRooms as room (room)}
         <Link href={makeRoomPath(url, room)} class="btn btn-neutral">
           <div class="relative flex min-w-0 items-center gap-2 overflow-hidden text-nowrap">

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

@@ -134,6 +134,8 @@
   let parent: TrustedEvent | undefined = $state()
   let element: HTMLElement | undefined = $state()
   let newMessages: HTMLElement | undefined = $state()
+  let parentPreview: HTMLElement | undefined = $state()
+  let dynamicPadding: HTMLElement | undefined = $state()
   let newMessagesSeen = false
   let showFixedNewMessages = $state(false)
   let showScrollButton = $state(false)
@@ -208,6 +210,16 @@
         loadingEvents = false
       },
     }))
+
+    const observer = new ResizeObserver(() => {
+      dynamicPadding!.style.minHeight = `${parentPreview!.offsetHeight}px`
+    })
+
+    observer.observe(parentPreview!)
+
+    return () => {
+      observer.unobserve(parentPreview!)
+    }
   })
 
   onDestroy(() => {
@@ -220,8 +232,7 @@
   })
 </script>
 
-<div class="relative flex h-full flex-col">
+<PageBar class="chat__page-bar">
-  <PageBar>
   {#snippet icon()}
     <div class="center">
       <Icon icon="hashtag" />
@@ -255,10 +266,9 @@
     </div>
   {/snippet}
 </PageBar>
-  <div
+
-    class="scroll-container -mt-2 flex flex-grow flex-col-reverse overflow-y-auto overflow-x-hidden py-2"
+<div class="chat__messages scroll-container" onscroll={onScroll} bind:this={element}>
-    onscroll={onScroll}
+  <div bind:this={dynamicPadding}></div>
-    bind:this={element}>
   {#each elements as { type, id, value, showPubkey } (id)}
     {#if type === "new-messages"}
       <div
@@ -290,6 +300,27 @@
     {/if}
   </p>
 </div>
+
+<div class="chat__compose bg-base-200">
+  <div bind:this={parentPreview}>
+    {#if parent}
+      <ChannelComposeParent event={parent} clear={clearParent} verb="Replying to" />
+    {/if}
+    {#if share}
+      <ChannelComposeParent event={share} clear={clearShare} verb="Sharing" />
+    {/if}
+  </div>
+  <ChannelCompose bind:this={compose} {onSubmit} />
+</div>
+
+{#if showScrollButton}
+  <div in:fade class="chat__scroll-down">
+    <Button class="btn btn-circle btn-neutral" onclick={scrollToBottom}>
+      <Icon icon="alt-arrow-down" />
+    </Button>
+  </div>
+{/if}
+
 {#if showFixedNewMessages}
   <div class="relative z-feature flex justify-center">
     <div transition:fly={{duration: 200}} class="fixed top-12">
@@ -299,21 +330,3 @@
     </div>
   </div>
 {/if}
-  <div>
-    {#if parent}
-      <ChannelComposeParent event={parent} clear={clearParent} verb="Replying to" />
-    {/if}
-    {#if share}
-      <ChannelComposeParent event={share} clear={clearShare} verb="Sharing" />
-    {/if}
-    <ChannelCompose bind:this={compose} {onSubmit} />
-  </div>
-</div>
-
-{#if showScrollButton}
-  <div in:fade class="fixed bottom-14 right-4">
-    <Button class="btn btn-circle btn-neutral" onclick={scrollToBottom}>
-      <Icon icon="alt-arrow-down" />
-    </Button>
-  </div>
-{/if}