From 570085cb04b68e0a2bc78022e05fbb22db4321f4 Mon Sep 17 00:00:00 2001 From: webmaster Date: Tue, 3 Nov 2026 13:49:50 +0000 Subject: [PATCH] fix(freelancer-directory): the OCA Member Profile badge moves onto the card frame, top right MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- odoo-community-developers/index.html | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/odoo-community-developers/index.html b/odoo-community-developers/index.html index 7b47515..e82e680 100644 --- a/odoo-community-developers/index.html +++ b/odoo-community-developers/index.html @@ -336,6 +336,7 @@ display: flex; flex-direction: column; gap: 0.7rem; + position: relative; /* the OCA badge is anchored to the frame, not to the flow */ } .dev-card > :last-child { margin-bottom: 0; @@ -373,6 +374,7 @@ font-size: 1.3rem; color: var(--midnight); margin: 0; + overflow-wrap: anywhere; /* a name with no space in it cannot push the card open */ } .dev-focus { margin: 0.15rem 0 0; @@ -685,11 +687,13 @@ } /* The OCA Member Profile badge — a link built from a link the freelancer - supplied. It sits with the name, not in the links row. Never colour alone: - it is a filled pill and its own words are the link text. */ + supplied. It sits on the card's frame, top right, inset from the corner; + it stays in the DOM with the name (the name is read first). Never colour + alone: it is a filled pill and its own words are the link text. */ .dev-oca-badge { - display: inline-block; - margin-top: 0.3rem; + position: absolute; + top: 0.85rem; + right: 0.85rem; font-size: 0.72rem; line-height: 1.4; padding: 0.15rem 0.6rem; @@ -699,6 +703,15 @@ color: var(--midnight); font-weight: 600; } + /* Reserve the badge's band for the badge: the header starts below it, so the + name keeps the card's full width, wraps freely, and can never reach the + badge. A horizontal reserve was measured and rejected — at 375 px the card + leaves the name column 171 px, and the badge's 135 px would cut it to 42 px. + Without :has() there is no reserve; the badge then sits in the band above + the name's first line and still does not collide. */ + .dev-card:has(.dev-oca-badge) { + padding-top: 3.15rem; + } .dev-oca-badge:hover { background: rgba(201, 162, 39, 0.32); color: var(--midnight);