Tweak room name display

src/app/components/ContentLinkBlock.svelte

@@ -59,9 +59,7 @@
 </script>
 
 {#if isRoomOrRelay}
-  <div>
-    <ContentLinkUrl {url} class="link-content whitespace-nowrap" />
-  </div>
+  <ContentLinkUrl {url} class="link-content whitespace-nowrap" />
 {:else}
   <Link {external} {href} class="my-2 block">
     <div class="overflow-hidden rounded-2xl">

src/app/components/ContentLinkUrl.svelte

@@ -4,7 +4,7 @@
   import LinkRound from "@assets/icons/link-round.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import Link from "@lib/components/Link.svelte"
-  import RoomNameWithImage from "@app/components/RoomNameWithImage.svelte"
+  import RoomName from "@app/components/RoomName.svelte"
   import {PLATFORM_URL} from "@app/env"
   import {isRoomId, splitRoomId} from "@app/groups"
   import {makeRoomPath, makeSpacePath} from "@app/routes"
@@ -50,7 +50,7 @@
 
 <Link {external} {href} class={className}>
   {#if roomReference}
-    <RoomNameWithImage {...roomReference} />
+    #<RoomName {...roomReference} />
   {:else if relayReference}
     <span class="text-primary">{displayRelayUrl(relayReference)}</span>
   {:else}

src/app/components/RoomNameWithImage.svelte

@@ -5,14 +5,15 @@
   interface Props {
     h: string
     url: string
+    size?: number
     class?: string
   }
 
-  const {url, h, ...props}: Props = $props()
+  const {url, h, size, ...props}: Props = $props()
 </script>
 
 <div class="inline-flex min-w-0 items-center gap-2 {props.class}">
-  <RoomImage {url} {h} />
+  <RoomImage {url} {h} {size} />
   <div class="min-w-0 overflow-hidden text-ellipsis">
     <RoomName {url} {h} />
   </div>

src/lib/components/base.css

@@ -351,7 +351,7 @@ body.keyboard-open .room__compose {
 
 /* link-content (tiptap pill) */
 .link-content {
-  @apply bg-surface text-content max-w-full overflow-hidden px-1 text-ellipsis whitespace-nowrap;
+  @apply bg-surface-more text-content max-w-full overflow-hidden px-1 text-ellipsis whitespace-nowrap;
   border-radius: 3px;
 }