diff --git a/services/web/frontend/js/features/project-list/components/project-list-lumiere.tsx b/services/web/frontend/js/features/project-list/components/project-list-lumiere.tsx
index ccb44c0fba..37c2309443 100644
--- a/services/web/frontend/js/features/project-list/components/project-list-lumiere.tsx
+++ b/services/web/frontend/js/features/project-list/components/project-list-lumiere.tsx
@@ -171,17 +171,19 @@ const ProjectCard = memo(function ProjectCard({
{date}
-
-
-
- {project.compiler === 'quarto' ? (
-
- ) : (
-
- )}
-
-
-
+
+ {/* Actions live outside .lumiere-card so Popper dropdowns are not
+ clipped by the card's backdrop-filter / transform context. */}
+
+
+
+ {project.compiler === 'quarto' ? (
+
+ ) : (
+
+ )}
+
+
)
diff --git a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss
index e3695f109a..8b3a3a462a 100644
--- a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss
+++ b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss
@@ -537,14 +537,28 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
}
}
- // Action strip — icon buttons that fade in when the card is hovered
+ // Action strip — lives *outside* .lumiere-card so the dropdown menus inside
+ // are not trapped by the card's backdrop-filter and transform (both of which
+ // create a new containing block for position:fixed, clipping Popper menus).
+ // position:absolute on the wrapper (which has no transform/filter) lets any
+ // position:fixed child escape to the viewport as expected.
.lumiere-card-actions {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ z-index: 2;
display: flex;
align-items: center;
justify-content: center;
gap: 2px;
padding: 3px 6px 5px;
+ // Solid background — intentionally no backdrop-filter here, which would
+ // also create a fixed containing block and trap the Popper dropdown.
+ background: rgba(255, 255, 255, 0.97);
border-top: 1px solid rgba($lum-teal, 0.10);
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 10px;
opacity: 0;
transition: opacity 0.15s ease;
@@ -561,8 +575,8 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
}
}
- .lumiere-card:hover .lumiere-card-actions,
- .lumiere-card:focus-within .lumiere-card-actions {
+ .lumiere-card-wrapper:hover .lumiere-card-actions,
+ .lumiere-card-wrapper:focus-within .lumiere-card-actions {
opacity: 1;
}