Fix the home inbox card layout on mobile (#696)

src/app/components/ContentCode.svelte

@@ -4,14 +4,16 @@
   type Props = {
     value: string
     isBlock: boolean
+    singleLine?: boolean
   }
 
-  const {value, isBlock}: Props = $props()
+  const {value, isBlock, singleLine = false}: Props = $props()
 </script>
 
 <code
   class={cx(
-    "bg-surface-more text-content w-full overflow-auto whitespace-pre rounded px-1 text-sm",
+    "bg-surface-more text-content w-full overflow-auto rounded px-1 text-sm",
+    singleLine ? "whitespace-nowrap" : "whitespace-pre",
     {
       block: isBlock,
     },

src/app/components/ContentLinkInline.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import cx from "classnames"
   import {displayUrl} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
   import {preventDefault, stopPropagation} from "@lib/html"
@@ -12,9 +13,12 @@
   type Props = {
     url: string
     event: TrustedEvent
+    singleLine?: boolean
   }
 
-  const {url, event}: Props = $props()
+  const {url, event, singleLine = false}: Props = $props()
+
+  const className = cx("link-content", {"whitespace-normal wrap-anywhere": !singleLine})
 
   const fileType = getUrlContentType(url, event)
 
@@ -24,13 +28,10 @@
 
 {#if url.match(/\.(jpe?g|png|gif|webp)$/) || IMAGE_CONTENT_TYPES.includes(fileType)}
   <!-- Use a real link so people can copy the href -->
-  <a
+  <a href={url} class={className} onclick={stopPropagation(preventDefault(expand))}>
-    href={url}
-    class="link-content whitespace-normal wrap-anywhere"
-    onclick={stopPropagation(preventDefault(expand))}>
     <Icon icon={LinkRound} size={3} class="inline-block" />
     {displayUrl(url)}
   </a>
 {:else}
-  <ContentLinkUrl {url} class="link-content whitespace-normal wrap-anywhere" />
+  <ContentLinkUrl {url} class={className} />
 {/if}

src/app/components/ContentMinimal.svelte

@@ -135,11 +135,12 @@
         {:else if isCode(parsed)}
           <ContentCode
             value={parsed.value}
-            isBlock={isStartAndEnd(i) || parsed.value.includes("\n")} />
+            {singleLine}
+            isBlock={!singleLine && (isStartAndEnd(i) || parsed.value.includes("\n"))} />
         {:else if isCashu(parsed) || isInvoice(parsed)}
           <ContentToken value={parsed.value} />
         {:else if isLink(parsed)}
-          <ContentLinkInline url={parsed.value.url.toString()} {event} />
+          <ContentLinkInline url={parsed.value.url.toString()} {event} {singleLine} />
         {:else if isProfile(parsed)}
           <ContentMention value={parsed.value} {url} />
         {:else if isQuote(parsed)}

src/app/components/HomeInboxItemCard.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type {Snippet} from "svelte"
-  import {formatTimestamp} from "@welshman/lib"
+  import {LOCALE, formatTimestampAsTime, now, secondsToDate} from "@welshman/lib"
   import type {TrustedEvent} from "@welshman/util"
   import Link from "@lib/components/Link.svelte"
   import NoteContentMinimal from "@app/components/NoteContentMinimal.svelte"
@@ -18,14 +18,25 @@
   }
 
   const {path, event, url, icon, title, subtitle}: Props = $props()
+
+  const shortDate = (ts: number) =>
+    Intl.DateTimeFormat(LOCALE, {dateStyle: "short"}).format(secondsToDate(ts))
+
+  const timestamp = $derived(
+    shortDate(event.created_at) === shortDate(now())
+      ? formatTimestampAsTime(event.created_at)
+      : shortDate(event.created_at),
+  )
 </script>
 
 <Link href={path} class="card card-sm card-interactive flex items-center gap-3">
   {@render icon()}
   <div class="flex min-w-0 flex-1 flex-col gap-0.5">
-    <div class="flex min-w-0 items-baseline gap-2 text-sm">
+    <div class="flex min-w-0 items-center gap-2 text-sm">
       <strong class="truncate">{@render title()}</strong>
-      <span class="truncate opacity-50">{@render subtitle()}</span>
+      <span class="min-w-0 flex-1 truncate opacity-50">{@render subtitle()}</span>
+      <span class="shrink-0 text-xs opacity-50">{timestamp}</span>
+      <UnreadDot {path} class="shrink-0" />
     </div>
     <div class="flex min-w-0 items-center gap-1 text-sm opacity-75">
       <div class="flex max-w-1/2 shrink-0 items-center">
@@ -43,8 +54,4 @@
       </div>
     </div>
   </div>
-  <div class="flex shrink-0 items-center gap-2 text-xs opacity-50">
-    {formatTimestamp(event.created_at)}
-    <UnreadDot {path} />
-  </div>
 </Link>