diff --git a/AGENTS.md b/AGENTS.md index 6bb24c6a..642d84e3 100644 --- a/AGENTS.md +++ b/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)`. diff --git a/src/app/components/ThreadPost.svelte b/src/app/components/ThreadPost.svelte index 2d960d9e..177b9df2 100644 --- a/src/app/components/ThreadPost.svelte +++ b/src/app/components/ThreadPost.svelte @@ -43,16 +43,16 @@
-
+
{formatTimestamp(event.created_at)}
-
+