fix: mobile room chat header layout

src/app/components/RoomImage.svelte

@@ -10,9 +10,10 @@
     url: string
     size?: number
     fallbackIcon?: string
+    class?: string
   }
 
-  const {url, h, size = 5, fallbackIcon = Hashtag}: Props = $props()
+  const {url, h, size = 5, fallbackIcon = Hashtag, class: className}: Props = $props()
 
   const room = deriveRoom(url, h)
   const isVoiceRoom = $derived($room.livekit)
@@ -23,11 +24,11 @@
     <Icon size={size + 1} icon={Volume} />
     {#if $room.picture}
       <span class="text-base">/</span>
-      <ImageIcon src={$room.picture} {size} alt="" class="rounded-lg" />
+      <ImageIcon src={$room.picture} {size} alt="" class={className || "rounded-lg"} />
     {/if}
   </div>
 {:else if $room.picture}
-  <ImageIcon src={$room.picture} {size} alt="" class="rounded-lg" />
+  <ImageIcon src={$room.picture} {size} alt="" class={className || "rounded-lg"} />
 {:else}
-  <Icon icon={fallbackIcon} {size} />
+  <Icon icon={fallbackIcon} {size} class={className} />
 {/if}

src/app/components/RoomNameWithImage.svelte

@@ -5,17 +5,24 @@
   interface Props {
     h: string
     url: string
+    imageClass?: string
+    nameClass?: string
+    size?: number
+    subtitle?: string
     class?: string
   }
 
-  const {url, h, ...props}: Props = $props()
+  const {url, h, imageClass, nameClass, size = 5, subtitle, ...props}: Props = $props()
 </script>
 
-<div class="flex grow items-center justify-between gap-4 {props.class}">
+<div class="flex min-w-0 items-center gap-2 {props.class}">
-  <div class="flex items-center gap-2">
+  <RoomImage {url} {h} {size} class={imageClass} />
-    <RoomImage {url} {h} />
+  {#if subtitle}
-    <div class="min-w-0 overflow-hidden text-ellipsis">
+    <div class="min-w-0">
-      <RoomName {url} {h} />
+      <RoomName {url} {h} class={nameClass} />
+      <div class="truncate text-xs leading-4 text-primary">{subtitle}</div>
     </div>
-  </div>
+  {:else}
+    <RoomName {url} {h} class={nameClass} />
+  {/if}
 </div>

src/app/components/SpaceBar.svelte

@@ -14,29 +14,38 @@
     back?: () => unknown
     title?: Snippet
     action?: Snippet
+    hideRelayUrl?: boolean
     [key: string]: any
   }
 
-  const {back = () => goto(makeSpacePath(url)), title, action, ...props}: Props = $props()
+  const {
+    back = () => goto(makeSpacePath(url)),
+    title,
+    action,
+    hideRelayUrl = false,
+    ...props
+  }: Props = $props()
 
   const url = decodeRelay($page.params.relay!)
 </script>
 
 <PageBar {...props}>
-  <div class="flex">
+  <div class="flex min-w-0 flex-1 items-center gap-1">
-    <Button onclick={back} class="place-self-start pr-3 md:hidden">
+    <Button onclick={back} class="btn btn-ghost btn-square shrink-0 md:hidden">
-      <Icon icon={ArrowLeft} size={7} />
+      <Icon icon={ArrowLeft} size={6} />
     </Button>
-    <div class="ellipsize whitespace-nowrap flex grow items-center justify-between gap-4">
+    <div class="flex min-w-0 flex-1 items-center justify-between gap-2">
-      <div class="flex flex-col">
+      <div class="flex min-w-0 flex-col gap-0.5">
-        <div class="flex gap-2 items-center">
+        <div class="flex min-w-0 items-center gap-2">
           {@render title?.()}
         </div>
-        <div class="text-xs text-primary md:hidden">
+        {#if !hideRelayUrl}
-          {displayRelayUrl(url)}
+          <div class="truncate text-xs leading-4 text-primary md:hidden">
-        </div>
+            {displayRelayUrl(url)}
+          </div>
+        {/if}
       </div>
-      <div class="flex gap-2 items-start">
+      <div class="flex shrink-0 items-center gap-1">
         {@render action?.()}
       </div>
     </div>

src/lib/components/PageBar.svelte

@@ -9,8 +9,11 @@
   const {children, ...props}: Props = $props()
 </script>
 
-<div data-component="PageBar" class="relative z-nav p-2 -mb-4 {props.class}">
+<div
-  <div class="rounded-xl bg-base-100 p-4 shadow-md h-20 md:h-12 flex flex-col justify-center">
+  data-component="PageBar"
+  class="relative z-nav -mx-sai -mt-sai shrink-0 md:mx-0 md:-mb-4 md:mt-0 md:p-2 {props.class}">
+  <div
+    class="border-base-300 bg-base-100 flex min-h-[calc(4rem+var(--sait))] items-center border-b px-4 pb-2 pt-sai md:h-12 md:min-h-0 md:rounded-xl md:border-0 md:p-4 md:shadow-md">
     {@render children?.()}
   </div>
 </div>

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

@@ -9,7 +9,7 @@
   import {now, ifLet, int, formatTimestampAsDate, ago, MINUTE} from "@welshman/lib"
   import type {MakeNonOptional} from "@welshman/lib"
   import type {TrustedEvent, EventContent} from "@welshman/util"
-  import {makeEvent, makeRoomMeta, MESSAGE, ROOM_ADD_MEMBER} from "@welshman/util"
+  import {displayRelayUrl, makeEvent, makeRoomMeta, MESSAGE, ROOM_ADD_MEMBER} from "@welshman/util"
   import AltArrowDown from "@assets/icons/alt-arrow-down.svg?dataurl"
   import ClockCircle from "@assets/icons/clock-circle.svg?dataurl"
   import InfoCircle from "@assets/icons/info-circle.svg?dataurl"
@@ -24,10 +24,9 @@
   import SpaceBar from "@app/components/SpaceBar.svelte"
   import RoomCompose from "@app/components/RoomCompose.svelte"
   import RoomComposeParent from "@app/components/RoomComposeParent.svelte"
-  import RoomImage from "@app/components/RoomImage.svelte"
   import RoomDetail from "@app/components/RoomDetail.svelte"
   import RoomItem from "@app/components/RoomItem.svelte"
-  import RoomName from "@app/components/RoomName.svelte"
+  import RoomNameWithImage from "@app/components/RoomNameWithImage.svelte"
   import SpaceSearch from "@app/components/SpaceSearch.svelte"
   import ThunkToast from "@app/components/ThunkToast.svelte"
   import RoomItemAddMember from "@src/app/components/RoomItemAddMember.svelte"
@@ -429,10 +428,17 @@
   })
 </script>
 
-<SpaceBar>
+<SpaceBar hideRelayUrl>
   {#snippet title()}
-    <RoomImage {url} {h} />
+    <RoomNameWithImage
-    <RoomName {url} {h} />
+      {url}
+      {h}
+      size={8}
+      imageClass="rounded-full"
+      nameClass="font-semibold"
+      subtitle={displayRelayUrl(url)}
+      class="md:hidden" />
+    <RoomNameWithImage {url} {h} class="hidden md:flex" />
   {/snippet}
   {#snippet action()}
     <SpaceSearch {url} {h} />
@@ -468,7 +474,7 @@
       bind:element
       onscroll={onScroll}
       class={cx(
-        "flex-col-reverse pb-0! pt-4",
+        "flex-col-reverse pb-0! pt-2 md:pt-4",
         showMobileVideoPanel ? "hidden md:flex md:flex-col-reverse" : "flex",
         pageContentHiddenDesktopVideoOnly && "md:hidden",
       )}>

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

@@ -316,7 +316,7 @@
   {/snippet}
 </SpaceBar>
 
-<PageContent bind:element onscroll={onScroll} class="flex flex-col-reverse pt-4 pb-0!">
+<PageContent bind:element onscroll={onScroll} class="flex flex-col-reverse pt-2 pb-0! md:pt-4">
   {#if loadingForward}
     <p class="py-20 flex justify-center">
       <Spinner loading={loadingForward}>Looking for messages...</Spinner>