From a8c5c1837d05dfeedcd7b88e12b923cf5ffb6d61 Mon Sep 17 00:00:00 2001
From: webmaster <oliver@odoo4projects.com>
Date: Tue, 3 Nov 2026 14:04:29 +0000
Subject: [PATCH] fix(freelancer-directory): the OCA Member Profile badge
 straddles the card's top-right corner
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The badge sat inside the frame (top/right: 0.85rem). It now straddles the
border — top: -0.7rem, right: -0.55rem — so the card's top and right border
lines run through it, like a tag on the corner.

The :has() header reserve (padding-top: 3.15rem) is no longer needed and is
removed: the badge now intrudes only ~12px into the card (was ~36px), so the
name clears it at the card's normal 20px padding — proven with a long-name
variant. At 375px the page keeps zero horizontal overflow (scrollWidth ==
clientWidth); the badge's 8px right protrusion has 21px of slack. Geometry is
identical in both renderers (built HTML and the JS list): badge offset
dt=-10px, dr=+8px. DOM order, the OCA predicate, the label and the link
attributes are unchanged.
---
 odoo-community-developers/index.html | 21 +++++++--------------
 1 file changed, 7 insertions(+), 14 deletions(-)

diff --git a/odoo-community-developers/index.html b/odoo-community-developers/index.html
index 372a5bf..5ed9f9a 100644
--- a/odoo-community-developers/index.html
+++ b/odoo-community-developers/index.html
@@ -687,13 +687,15 @@
       }
 
       /* The OCA Member Profile badge — a link built from a link the freelancer
-         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. */
+         supplied. It straddles the card's frame at the top-right corner: the top
+         and right border lines run through it, like a tag on the corner, rather
+         than sitting inside the frame. 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 {
         position: absolute;
-        top: 0.85rem;
-        right: 0.85rem;
+        top: -0.7rem;    /* half the pill sits above the card's top border */
+        right: -0.55rem; /* a little hangs past the right border — a corner tag */
         font-size: 0.72rem;
         line-height: 1.4;
         padding: 0.15rem 0.6rem;
@@ -703,15 +705,6 @@
         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);