Fix voice room icon getting truncated in PageBar

src/app/components/RoomImage.svelte

@@ -25,7 +25,7 @@
 </script>
 
 {#if isVoiceRoom}
-  <div class="flex items-center gap-1 shrink-0">
+  <div class="flex shrink-0 items-center gap-1.5">
     <Icon
       icon={typeIconSrc}
       size={size + 1}

src/app/components/RoomName.svelte

@@ -12,6 +12,6 @@
   const room = deriveRoom(url, h)
 </script>
 
-<span class="ellipsize {props.class}">
+<span class="ellipsize min-w-0 {props.class}">
   {$room?.name || h}
 </span>

src/app/components/SpaceBar.svelte

@@ -12,12 +12,13 @@
 
   interface Props {
     back?: () => unknown
+    icon?: Snippet
     title?: Snippet
     action?: Snippet
     [key: string]: any
   }
 
-  const {back = () => goto(makeSpacePath(url)), title, action, ...props}: Props = $props()
+  const {back = () => goto(makeSpacePath(url)), icon, title, action, ...props}: Props = $props()
 
   const url = decodeRelay($page.params.relay!)
 </script>
@@ -27,10 +28,17 @@
     <Button onclick={back} class="place-self-start pr-3 md:hidden">
       <Icon icon={ArrowLeft} size={7} />
     </Button>
-    <div class="ellipsize whitespace-nowrap flex flex-grow items-center justify-between gap-4">
+    <div class="flex min-w-0 flex-grow items-center justify-between gap-4">
-      <div class="flex flex-col">
+      <div class="flex min-w-0 flex-col">
-        <div class="flex gap-2 items-center">
+        <div class="flex min-w-0 items-center gap-2">
-          {@render title?.()}
+          {#if icon}
+            <div class="shrink-0">{@render icon?.()}</div>
+            <div class="ellipsize min-w-0 whitespace-nowrap">{@render title?.()}</div>
+          {:else}
+            <div class="ellipsize min-w-0 flex items-center gap-2 whitespace-nowrap">
+              {@render title?.()}
+            </div>
+          {/if}
         </div>
         <div class="text-xs text-primary md:hidden">
           {displayRelayUrl(url)}

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

@@ -358,8 +358,10 @@
 </script>
 
 <SpaceBar>
-  {#snippet title()}
+  {#snippet icon()}
     <RoomImage {url} {h} />
+  {/snippet}
+  {#snippet title()}
     <RoomName {url} {h} />
   {/snippet}
   {#snippet action()}