Top tweets from the IdentityMD ecosystem.
","title":"fidelity: the \"top tweets\" ranking is faked by sampling four profiles, and a bigger tweet is missing"},{"citation":"resolved","description":"Now: Every card shows at most 25 words and ends in \"…\", labelled \"Post excerpt\". The Polymarket card keeps the question and cuts the answer. Three cards start mid-tweet with no leading mark, including \"they pick up jobs, check each other's work\" where nothing says who \"they\" are. One quote is reworded by layout: the original \"the winners are in 🏆 congrats to all 15\" is shown split over two lines without the emoji. At 580px and below, src/styles.css:200 also collapses the author's line breaks.\nChange to: Put each tweet's complete text in `excerpt` in src/posts.ts, with t.co links dropped and entities decoded. Delete the .excerpt-end span and the \"Post excerpt\" label at PostCard.tsx:21, and delete \"Cards show short excerpts.\" at src/components/AboutDialog.tsx:27. Delete `white-space:normal` at src/styles.css:200. The first card grows, and search, sort and the start of the first tweet stay on the first screen.\nWhy: The brief asks for a site \"showing the top tweets\". The cut is labelled honestly, so this is not faked, but the visitor has to leave the site to learn what a tweet said.","line":20,"path":"src/components/PostCard.tsx","reproduction":"Width: 390 and 1440. Steps: load the page, read card #04 and press \"Load 6 more posts\", then compare with https://cdn.syndication.twimg.com/tweet-result?id=","title":"fidelity: all 12 tweets are cut to fragments, several lose their point or their subject"},{"citation":"resolved","description":"Now: At 580px and below the art is set to opacity .6 (.5 at 360px and below, src/styles.css:206), clipped on its right edge, and covered by the .hero-copy:before gradient at src/styles.css:195. Apart from the small logo, the hero is the only place the characters appear, and here the blaster is hard to read.\nChange to: In this rule use `.hero-art{width:58%;max-height:180px;bottom:0;inset-inline-end:-14px;z-index:0}`, removing clip-path and opacity. Delete the `.hero-copy:before` rule at src/styles.css:195 and `opacity:.5` at src/styles.css:206. Set `.hero p{max-width:18ch}` here so the line stops short of the art.\nWhy: The brief's look is \"a theme of pepes armed with AI\", and a phone is where most visitors will see it.","line":194,"path":"src/styles.css","reproduction":"Width: 390. Steps: load the page and read computed styles on .hero-art. Evidence: opacity 0.6 at 390, 0.5 at 320, against 1 at 768 and above; shots/390.png shows faded art. I injected the replacement CSS in Chromium: the art box is 181 to 383 by 192 to 309, the hero text ends at x=189, the drawn figures start near x=222, and scrollWidth stays 390. Same result at 320 with scrollWidth 320. The hero height does not change.","severity":"medium","snippet":".hero-art{width:70%;max-height:180px;bottom:0;inset-inline-end:-45px;clip-path:inset(0 24px 0 0);opacity:.6;z-index:0}","title":"fidelity: the armed Pepes are dimmed to 60% and masked on phones"},{"citation":"resolved","description":"Now: The page is #0b130e and cards are #101b13. Only the hero (#15281b) reads as green, and the rest of a long page reads as black with a green cast.\nChange to: --green-950:#0f2116;--green-925:#14291b;--green-900:#183020;--green-850:#1e3826;--green-800:#2a4a30;--green-700:#3a5a3e; and set theme-color at index.html:6 to #0f2116.\nWhy: The brief's look is \"dark green\". This is one token row and adds no new tokens.","line":5,"path":"src/styles.css","reproduction":"Width: 1440 and 390. Steps: load the page and read the computed background of the root element. Evidence: rgb(11,19,14), HSL 6% lightness, with green only 8 levels above red and 5 above blue; shots/1440-full.png shows it as near-black from the first card down. I injected the replacement tokens at 390 and the page reads green. Calculated contrast stays above the bar: #a5b7a7 on #14291b 7.29:1, on #1e3826 6.02:1; #e8eee7 on #14291b 13.07:1; #b3ed78 on #1e3826 9.28:1.","severity":"medium","snippet":"--green-950:#0b130e;--green-925:#101b13;--green-900:#132118;--green-850:#182b1d;--green-800:#203723;--green-700:#2e4732;","title":"fidelity: the page background reads as black, not dark green"},{"citation":"resolved","description":"Now: The #01 to #12 rank is shown at 581px and up, and display:none below that. On a phone the order is unexplained, and the rank is missing from the accessibility tree too.\nChange to: Delete `.post-rank{display:none}` from this rule. The rank sits in the existing header row, and nothing else moves.\nWhy: The brief asks for \"the top tweets\". The rank is what shows that they are ranked, and a cut must not hide data people need.","line":199,"path":"src/styles.css","reproduction":"Width: 390. Steps: load the page and look at the first card header. Evidence: computed display of .post-rank is none at 390 and 320, block at 768; the ariaSnapshot of the first card contains no rank. With the rule removed in Chromium, \"#01\" sits beside the X mark at 390 and scrollWidth stays 390 (320 at 320).","severity":"medium","snippet":".post-rank{display:none}","title":"fidelity: phones hide the rank on a site about top tweets"},{"citation":"resolved","description":"Now: At 900px and below the whole sidebar is hidden: the \"Explore IdentityMD\" link, the one-line explanation of what IdentityMD is, the People list and the collection note. The About dialog links only to an X search, so a phone visitor has no route to the project and no plain sentence saying what it is.\nChange to: Delete `.sidebar{display:none}` so the sidebar stacks under the feed in the existing one-column grid, and add `.topics-section{display:none}` in its place, because the Topic select already covers that list.\nWhy: A cut never hides what people need. A visitor to a page of tweets about IdentityMD needs to learn what it is and reach it.","line":187,"path":"src/styles.css","reproduction":"Width: 390 and 768. Steps: load the page, query a[href*=\"imd.fun\"] and .person-row, then open \"Snapshot\" and read the dialog links. Evidence at 390: 1 imd.fun link in the DOM and 0 visible; 0 of 4 person rows visible; the dialog's only external link is the X search. With the sidebar shown in Chromium it stacks at y=2340 with scrollWidth 390, and the same at 320 with scrollWidth 320.","severity":"medium","snippet":".sidebar{display:none}","title":"bug: below 900px the only link to IdentityMD disappears with the sidebar"},{"citation":"resolved","description":"Now: Every hashchange resets search, topic and limit. The hero button and \"The feed\" link are plain #feed anchors, so the first click erases what the visitor typed. The hash is then already #feed, so a second click erases nothing.\nChange to: In updateView, reset only when the view changes: compute `const next = location.hash === '#saved' ? 'saved' : 'feed'` and run the reset line only when `next` differs from the view held in state, for example through a ref updated alongside setView. Plain scrolling to #feed then keeps the filters.\nWhy: Using the main button once should move the visitor to the feed. It should not silently discard their input, and the same control should not behave two ways.","line":48,"path":"src/App.tsx","reproduction":"Width: 390, Chromium 156 and WebKit 27.2. Steps: load the page with no hash, type \"oracle\" in Search tweets, press \"Explore the feed\", scroll up, type \"oracle\" again, press it again. Evidence in both browsers: first press goes from \"3 posts found\" to \"12 posts\" with an empty input; second press keeps the input as \"oracle\". Expected: the search stays both times.","severity":"medium","snippet":"setQuery(''); setTopic('All topics'); setLimit(6);","title":"bug: \"Explore the feed\" wipes a typed search the first time only"},{"citation":"resolved","description":"Now: The select keeps appearance:auto. In Playwright WebKit it paints a grey fill outside the palette, cuts the final letter of \"All topics\" and grows to 54px beside a 48px search box, so the two labels sit 6px apart. In Chromium the heights are 46 and 48, a 2px mismatch. This was measured in the Linux WebKit build, not on an iPhone.\nChange to: Add `appearance:none` with a chevron as an inline SVG `background-image` positioned at the right, in a colour from the existing palette, and keep the existing right padding for it. In the 580px rule at src/styles.css:197 add `.topic-field select{min-height:48px}` to match the 48px search wrapper there.\nWhy: This is on the first screen, and a form control should read the same in both browsers. WebKit is the Safari engine, so it should be checked there.","line":83,"path":"src/styles.css","reproduction":"Width: 390, WebKit 27.2. Steps: load the page and screenshot .filter-controls at 3x. Evidence: select height 54, computed appearance auto, .input-wrap height 48, Topic label y=386 against Search label y=392; the screenshot shows \"All topic\" with the last letter cut and a grey fill, though the computed background is rgb(16,27,19). Chromium at 390: 46 against 48.","severity":"medium","snippet":".topic-field select{width:100%;min-height:46px;padding:10px 30px 10px 13px;border:1px solid var(--color-control-border);border-radius:var(--radius-control);background:var(--color-surface);color:var(--color-text);font-size:var(--text-small);line-height:1.5;cursor:pointer}","title":"bug: in WebKit the Topic select clips its value and breaks the control row"},{"citation":"resolved","description":"Now: Besides \"The swamp has signal.\" the page carries \"Armed with AI. Fueled by the swarm.\" in a chip over the artwork's feet, \"Big ideas. Very green energy.\", \"Small frogs. Big intelligence.\", \"A good place to be green.\" and \"Independent. Community-made.\" The feed is headed \"From the timeline\", which names nothing on the page.\nChange to: Delete the hero-caption span at this line (it is absolutely positioned, so nothing shifts and the art's feet are uncovered). Delete the \"Big ideas. Very green energy.\" paragraph and rename \"Find your corner\" to \"Topics\" at line 135, so the list moves up. Replace \"A good place to be green.\" at line 143 with \"the swamp\". Rename \"From the timeline\" to \"Tweets\" at line 118. Keep \"Small frogs. Big intelligence.\" as the only line besides the headline.\nWhy: Cut the stack, not the best line. A fact or a noun beats an adjective, and a heading names what it covers.","line":113,"path":"src/App.tsx","reproduction":"Width: 1440. Steps: load the page and scroll to the footer. Evidence: the probe's slogans check lists 3 two-beat lines, which is at its limit of 3, and the footer adds 2 more voice lines. The caption box runs from x=1041 to 1293 and y=384 to 414, inside the art box at x=721 to 1301 and y=106 to 426.","severity":"medium","snippet":"✳ Armed with AI. Fueled by the swarm.","title":"taste: five voice lines compete with the headline"},{"citation":"resolved","description":"Now: The About dialog says \"This is an independent community site.\" and the footer says \"Independent. Community-made.\" at src/App.tsx:143. The brief says nothing about who made or backs the site, and this site was built on commission through the IdentityMD network.\nChange to: Delete the sentence here, so the fact reads \"{posts.length} selected posts. Collected on {SNAPSHOT_DATE}.\" Delete the footer span at src/App.tsx:143; the footer's space-between layout then leaves the brand on the left and the button on the right.\nWhy: Copy must be true and stay true, with no claim about how the content was made unless the brief says so. Readers of a token-related feed may rely on a claim of independence.","line":25,"path":"src/components/AboutDialog.tsx","reproduction":"Width: 390. Steps: press \"Snapshot\" and read \"The collection\"; at 1440 read the footer centre. Evidence: both strings render as quoted, and the brief contains neither \"independent\" nor \"community\".","severity":"medium","snippet":"This is an independent community site.","title":"fidelity: the site says it is independent, which the brief never says"},{"citation":"resolved","description":"Now: At 390 the placeholder is clipped to \"People, topics, or ke\". At 320 it loses more.\nChange to: placeholder=\"Keywords\". The visible \"Search tweets\" label already says what the box does.\nWhy: Text cut off by a control looks broken, and this sits on the first screen.","line":120,"path":"src/App.tsx","reproduction":"Width: 390 and 320, Chromium and WebKit. Steps: load the page and look at the search box. Evidence: text width 206px against 145px of room at 390 and 93px at 320. \"Keywords\" measures 70px, which fits both; \"Name or keyword\" measures 125px and would still clip at 320.","severity":"low","snippet":"placeholder=\"People, topics, or keywords…\"","title":"bug: the search placeholder is cut off on phones"},{"citation":"resolved","description":"Now: Each article takes its name from the h3, which includes the hidden link text, so all three of a person's cards are announced identically as \"Adam on X (opens new tab)\". The heading has the same name. aria-label on the role-less stats div at line 23 is dropped, so \"Engagement at the snapshot date\" is never exposed.\nChange to: Replace aria-labelledby with `aria-label={`Post by ${post.author}, ${dateFormatter.format(new Date(post.date))}`}`. Add role=\"group\" to the .post-stats div at line 23 so its label is exposed.\nWhy: WCAG 4.1.2: a landmark or group name should identify its item, and a name on a generic element is not reliably exposed.","line":8,"path":"src/components/PostCard.tsx","reproduction":"Width: 390, Chromium. Steps: run locator('.post-card').first().ariaSnapshot(). Evidence: `article \"Adam on X (opens new tab)\"`, `heading \"Adam on X (opens new tab)\" [level=3]`, and the stats appear as plain `text: \"Post excerpt Replies: 35 Reposts: 93 Likes: 400\"` with no group name. Expected: \"Post by Adam, Oct 7\" and a named group.","severity":"low","snippet":"{post.excerpt} …