Skip to content

Commit 9a05178

Browse files
committed
fix(programa): use is:global for filter CSS to cross Astro component scope
The 'only favourites' filter was toggling the button state and adding the .filter-favorites-only class to the list view, but the session cards were not being hidden. Reason: the CSS rule was in ProgramaPage.astro and Astro's scoped styles injected data-astro-cid-nm3rvpko into every selector, including .schedule-list and li. But those elements are rendered by ScheduleList.astro which has its own data-astro-cid-zmszfzov, so the selector never matched. Fix: extract the filter CSS into an is:global block so the selector reaches across the component boundary. Verified end-to-end with Playwright: - 0 favourites: 56/56 hidden (everything is filtered out) - 1 favourite set: 1 visible, 55 hidden - Toggle off: 56 visible again
1 parent 4b6277e commit 9a05178

1 file changed

Lines changed: 8 additions & 0 deletions

File tree

src/components/ProgramaPage.astro

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,6 +143,14 @@ const schedule = await getSchedule()
143143
.schedule-view.hidden {
144144
display: none;
145145
}
146+
</style>
147+
148+
<style is:global>
149+
/* Hide non-favourite session cards when the favourites filter is on.
150+
The .schedule-list and its <li> children are rendered by
151+
ScheduleList.astro (its own Astro scope, data-astro-cid-zmszfzov),
152+
so we use is:global here to let this rule reach across component
153+
boundaries. */
146154
#schedule-list-view.filter-favorites-only .schedule-list li:not(.is-favorite) {
147155
display: none;
148156
}

0 commit comments

Comments
 (0)