From 4bfc67e5035f1704e90f53950cf292ae29d9db9e Mon Sep 17 00:00:00 2001 From: Jon Froehlich Date: Mon, 22 Jun 2026 18:10:55 -0700 Subject: [PATCH] Lift revealed publication chips above neighboring cards (#1377) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit On the landing page the horizontal publication card's .pub-download-links row (PDF/Cite/project chips) is only hidden with opacity:0, which still occupies layout space. The row can extend past the card's 129px box, and the landing grid is a flex-wrap row, so a card's chips can sit over the title of the card in the row below. With everything at the default stacking order the chips painted *behind* that content and looked tangled. Fix: on :hover/:focus-within, give the revealed chips position:relative and z-index:30 so they paint cleanly on top of whatever is below them. z-index is applied only on hover/focus, so the invisible (opacity:0) layer never sits over — and swallows clicks meant for — the card below. 30 clears the thumbnail (z-index:10) and award banner (z-index:20). Co-Authored-By: Claude Opus 4.8 (1M context) --- website/static/website/css/publications.css | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/website/static/website/css/publications.css b/website/static/website/css/publications.css index 4483421c..69d2ca7c 100644 --- a/website/static/website/css/publications.css +++ b/website/static/website/css/publications.css @@ -165,9 +165,20 @@ transition: opacity var(--transition-fast); } +/* On hover/focus, reveal the chips AND lift them onto a higher stacking + layer so they paint on top of whatever sits below them rather than + tangling behind it (#1377). The .pub-download-links row can extend past + the card's 129px box, and the landing grid is a flex-wrap row, so a + card's chips can overlap the title of the card in the row below; raising + z-index keeps the revealed chips legible and on top. z-index is applied + only on hover/focus so the invisible (opacity:0) layer never sits over — + and swallows clicks meant for — the card below. 30 clears the thumbnail + (z-index:10) and award banner (z-index:20). */ .pub-column-horiz-layout:hover .pub-download-links, .pub-column-horiz-layout:focus-within .pub-download-links { opacity: 1; + position: relative; + z-index: 30; }