(skywalking-website) branch master updated: fix(ui): lift project cards above siblings while their dropdown is open

[wusheng]

This is an automated email from the ASF dual-hosted git repository.

wu-sheng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-website.git


The following commit(s) were added to refs/heads/master by this push:
     new e2d4785efdf fix(ui): lift project cards above siblings while their 
dropdown is open
e2d4785efdf is described below

commit e2d4785efdf5ab7f91d04765ee36c9d23e2bc498
Author: Wu Sheng <wu.sh...@foxmail.com>
AuthorDate: Sun May 24 13:59:50 2026 +0800

    fix(ui): lift project cards above siblings while their dropdown is open
    
    The 'versions' (docs) and '+N more' (downloads) <details> dropdowns
    extend below the card; an adjacent card's stacking context could paint
    its own controls over the open list. Give .docs-card / .dl-card a
    baseline z-index and raise the open card via :has(details[open]) so the
    dropdown always renders above its neighbors.
---
 assets/scss/_custom_docs.scss | 4 ++++
 assets/scss/_custom_home.scss | 3 +++
 2 files changed, 7 insertions(+)

diff --git a/assets/scss/_custom_docs.scss b/assets/scss/_custom_docs.scss
index e8419534453..ed5e5626b32 100644
--- a/assets/scss/_custom_docs.scss
+++ b/assets/scss/_custom_docs.scss
@@ -472,11 +472,15 @@
   }
   .docs-card {
     display: flex; flex-direction: column;
+    position: relative; z-index: 1;   // baseline stacking so :has() lift can 
raise opens above siblings
     background: #fff; border: 1px solid $line; border-radius: 14px; padding: 
16px 18px;
     scroll-margin-top: 84px;   // clear the sticky navbar when jumped to via 
#anchor
     transition: box-shadow .18s ease, border-color .18s ease, transform .18s 
ease;
     &:hover { box-shadow: 0 16px 40px -22px rgba(17,24,39,.24); border-color: 
#d6e4f5; transform: translateY(-2px); }
   }
+  // lift a card above its siblings while its versions dropdown is open,
+  // so the dropdown <ul> isn't covered by the next card in the grid
+  .docs-card:has(.docs-ver[open]) { z-index: 10; }
   // selected state when navigated to via a #project anchor
   .docs-card:target {
     border-color: $brand;
diff --git a/assets/scss/_custom_home.scss b/assets/scss/_custom_home.scss
index 02e8184d0b2..bbed0aac0d1 100644
--- a/assets/scss/_custom_home.scss
+++ b/assets/scss/_custom_home.scss
@@ -968,11 +968,14 @@ $brand-grad: linear-gradient(180deg, #479EEB 0%, #3788D0 
100%);
 
   .dl-card {
     display: flex; flex-direction: column;
+    position: relative; z-index: 1;   // baseline stacking so :has() lift can 
raise opens above siblings
     background: #fff; border: 1px solid $line; border-radius: 12px; padding: 
14px;
     scroll-margin-top: 84px;   // clear the sticky navbar when jumped to via 
#anchor
     transition: box-shadow .18s ease, border-color .18s ease;
     &:hover { box-shadow: 0 14px 34px -22px rgba(17,24,39,.22); border-color: 
#d6e4f5; }
   }
+  // lift a card above its siblings while a "+N more" dropdown is open
+  .dl-card:has(.dl-more[open]) { z-index: 10; }
   // selected state when navigated to via a #project anchor (e.g. the "Latest 
releases" panel)
   .dl-card:target {
     border-color: $brand;