Size the thread detail post off its own column, not the screen

AGENTS.md

@@ -134,6 +134,7 @@ callbacks and hot paths.
 - When dynamically building classes, use `cx` from `classnames` rather than embedded ternaries or svelte 4's old `class:` syntax.
 - When creating forms, use `FieldInline` or `Field` instead of custom elements/tailwindcss
 - Do not define svelte event handlers inline, instead name them and put them in the script section of templates
+- Size a component off its own container, not the screen: put `@container` on the element and use `@md:`/`@2xl:`, rather than `sm:`/`md:`. The navs are `hidden md:flex` and take 326px out of the page at `md`, so a `md:` breakpoint inside a page turns a wide layout on at the exact width where the page column gets narrower. Screen breakpoints are for chrome that appears or disappears with the viewport.
 - Write a `{#if}`/`{:else if}` chain rather than hoisting display strings into a lookup `Record` in the script section.
 - Avoid using `as`, except where necessary. Instead, annotate function parameters, and ensure upstream values are typed correctly.
 - To read a tag, prefer the domain reader's getter (`note.content()`, `roomMeta.name()`) over touching tags at all. Where there's no reader, use `tagValue(spec, tags)` / `tagValues(spec, tags)` from `@welshman/util` rather than reaching into the tag array yourself — that means no `tags.find(nthEq(0, name))?.[1]`. Build the spec with the narrowest helper that fits: `hexTags("p")`, `relayTags(["r", "relay"])`, `addressTags("a")`, `kindTags("k")`, `topicTags("t")`, or plain `tagSpec("h")` when the value needs no validation. Reserve `nthEq` for cases with no spec equivalent, such as `partition(nthEq(0, "imeta"), tags)`.

src/app/components/ThreadPost.svelte

@@ -43,16 +43,16 @@
 <article
   id="post-{event.id}"
   data-event={event.id}
-  class="bg-surface border-b"
+  class="bg-surface border-b @container"
   style="border-color: var(--line)">
-  <div class="flex flex-col md:flex-row">
+  <div class="flex flex-col @2xl:flex-row">
     <aside
-      class="bg-surface flex shrink-0 flex-row items-center gap-3 border-b p-3 md:w-40 md:flex-col md:items-center md:border-b-0 md:border-r md:p-4 md:text-center"
+      class="bg-surface flex shrink-0 flex-row items-center gap-3 border-b p-3 @2xl:w-40 @2xl:flex-col @2xl:items-center @2xl:border-b-0 @2xl:border-r @2xl:p-4 @2xl:text-center"
       style="border-color: var(--line)">
       <Button onclick={openProfile}>
-        <ProfileCircle pubkey={event.pubkey} {url} size={10} class="md:size-14" />
+        <ProfileCircle pubkey={event.pubkey} {url} size={10} class="@2xl:size-14" />
       </Button>
-      <div class="flex min-w-0 flex-col gap-1 md:items-center">
+      <div class="flex min-w-0 flex-col gap-1 @2xl:items-center">
         <Button onclick={openProfile} class="text-bold truncate min-w-0 text-sm">
           {$profileDisplay}
         </Button>
@@ -60,13 +60,13 @@
           <span class="truncate min-w-0 text-xs opacity-75">{displayHandle($handle)}</span>
         {/if}
         {#if isOp}
-          <Badge variant="primary" class="w-fit self-start md:self-center">OP</Badge>
+          <Badge variant="primary" class="w-fit self-start @2xl:self-center">OP</Badge>
         {/if}
       </div>
     </aside>
     <div class="flex min-w-0 grow flex-col">
       <div
-        class="bg-surface flex flex-wrap items-center justify-between gap-2 border-b px-3 py-2 text-xs sm:px-4 sm:text-sm"
+        class="bg-surface flex flex-wrap items-center justify-between gap-2 border-b px-3 py-2 text-xs @lg:px-4 @lg:text-sm"
         style="border-color: var(--line)">
         <span class="opacity-75">{formatTimestamp(event.created_at)}</span>
         <Button
@@ -76,11 +76,11 @@
           Permalink
         </Button>
       </div>
-      <div class="px-3 py-4 sm:px-4">
+      <div class="px-3 py-4 @lg:px-4">
         <Content showEntire {event} {url} />
       </div>
       <div
-        class="bg-surface flex shrink-0 flex-col gap-2 border-t px-3 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-4"
+        class="bg-surface flex shrink-0 flex-col gap-2 border-t px-3 py-3 @lg:flex-row @lg:items-center @lg:justify-between @lg:px-4"
         style="border-color: var(--line)">
         <Button class="button button-neutral button-xs w-fit gap-1" onclick={reply}>
           <Icon icon={Reply} size={4} />