src/app/components/RoomNameWithImage.svelte

@@ -11,11 +11,7 @@
   const {url, h, ...props}: Props = $props()
 </script>
 
-<div class="flex grow items-center justify-between gap-4 {props.class}">
-  <div class="flex items-center gap-2">
-    <RoomImage {url} {h} />
-    <div class="min-w-0 overflow-hidden text-ellipsis">
-      <RoomName {url} {h} />
-    </div>
-  </div>
+<div class="flex min-w-0 items-center gap-2 {props.class}">
+  <RoomImage {url} {h} />
+  <RoomName {url} {h} />
 </div>

src/app/components/SpaceBar.svelte

@@ -23,20 +23,20 @@
 </script>
 
 <PageBar {...props}>
-  <div class="flex">
-    <Button onclick={back} class="place-self-start pr-3 md:hidden">
-      <Icon icon={ArrowLeft} size={7} />
+  <div class="flex min-w-0 flex-1 items-center gap-1">
+    <Button onclick={back} class="btn btn-ghost btn-square shrink-0 md:hidden">
+      <Icon icon={ArrowLeft} size={6} />
     </Button>
-    <div class="ellipsize whitespace-nowrap flex grow items-center justify-between gap-4">
-      <div class="flex flex-col">
-        <div class="flex gap-2 items-center">
+    <div class="flex min-w-0 flex-1 items-center justify-between gap-2">
+      <div class="flex min-w-0 flex-col gap-0.5">
+        <div class="flex min-w-0 items-center gap-2">
           {@render title?.()}
         </div>
-        <div class="text-xs text-primary md:hidden">
+        <div class="truncate text-xs leading-4 text-primary md:hidden">
           {displayRelayUrl(url)}
         </div>
       </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 class="rounded-xl bg-base-100 p-4 shadow-md h-20 md:h-12 flex flex-col justify-center">
+<div
+  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

@@ -24,9 +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 RoomImage from "@app/components/RoomImage.svelte"
   import RoomName from "@app/components/RoomName.svelte"
   import SpaceSearch from "@app/components/SpaceSearch.svelte"
   import ThunkToast from "@app/components/ThunkToast.svelte"
@@ -468,7 +468,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>