diff --git a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss index 7fc0640d99..9a437efdf1 100644 --- a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss +++ b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss @@ -863,6 +863,25 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi background: rgba($lum-teal, 0.09) !important; } } + + // ⋮ dropdown toggle — restyled from the table variant to match Lumière + .dropdown-table-button-toggle { + padding: 0.2rem 0.35rem; + border-radius: 6px; + background: transparent; + border: none; + color: $lum-text-muted; + line-height: 1; + transition: background-color 0.15s ease, color 0.15s ease; + + &:hover, + &:focus, + &[aria-expanded='true'] { + background: rgba($lum-teal, 0.09); + color: $lum-teal; + outline: none; + } + } } .lumiere-compact-row:hover .lumiere-compact-actions .action-btn, @@ -874,6 +893,26 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi @media (max-width: 767px) { + // Stack the header vertically so nothing overflows the viewport width. + // Without this, lumiere-header-actions (flex-shrink:0) forces the flex + // container wider than the screen. + .lumiere-header { + flex-direction: column; + align-items: stretch; + gap: 0.5rem; + } + + .lumiere-header-actions { + width: 100%; + flex-shrink: 1; + min-width: 0; + + form.project-search { + flex: 1; + min-width: 0; + } + } + // Compact row: 2-line layout // Row 1: [checkbox] [name+tags] [⋮ action] // Row 2: [checkbox] [format · owner · date] @@ -930,6 +969,14 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi } } + // ── Touch devices: card actions always visible (no hover cursor on phones) ── + + @media (hover: none) { + .lumiere-card-actions { + opacity: 1; + } + } + // ── Mobile toolbar: filter pills + zoom control ─────────────────────────── .lumiere-mobile-toolbar {