Public Access
webmaster
570085cb04
The badge was an inline-block inside .dev-head, below the name. It is now absolutely positioned in the card's top-right corner, inset 0.85rem from both edges (inside the 1rem radius, nothing clipped), with .dev-card as its positioning context. The badge keeps its DOM home with the name (h3 then a), so a screen reader still reads the freelancer's name first; only the paint position moved. No markup change in either renderer — the build-time HTML and the runtime liveCard() path both already emit the badge inside .dev-id, so the CSS change covers them identically (verified: byte-identical geometry at 375 and 1280). No overlap at any width: .dev-card:has(.dev-oca-badge) reserves the badge's band by padding the header down, so the name keeps the card's full width and wraps freely instead of running under the badge. A horizontal reserve was measured and rejected — at 375 px it left the name column 42 px. Longest live name (Oliver - The OC Guy) and a deliberately long name both clear by 0 px of overlap; .dev-name gains overflow-wrap: anywhere so a name with no space in it cannot push the card open. Untouched: the OCA_link predicate, the data-oca attribute and the OCA filter (1 of 2 when set to OCA member), the label, href, target and rel.