Filters hidden behind course glimpses on mobile/tablet view

[NamFra]

Bug Report

Problematic Behavior
On mobile and tablet views, course glimpses are rendered above other interface elements. When the user opens the filters panel, it appears behind the glimpses, making the filters unusable.

Expected behavior/code
The filters should appear on top of the course glimpses to remain accessible and usable.

Steps to Reproduce

1. Open the course catalog on a mobile or tablet viewport
2. Open the filters panel
3. Observe that the filters are rendered below the course glimpses

Environment

• Richie version: 3.1.2
• Platform: Chromium browsers, Firefox (mobile and tablet responsive view)

Possible Solution
The issue seems to originate from the following CSS rule introduced in this commit 4056f41

richie/src/frontend/scss/objects/_course_glimpses.scss

Line 89 in ebf3a45

z-index: 1;

Additional context/Screenshots
This video shows that removing z-index: 1 from .course-glimpse__body causes the filters panel to reappear correctly:

richie-overlapping_glimpses.webm

However, simply removing the z-index degrades the visual rendering of the course glimpse:

Fixing this may require additional CSS adjustments, possibly around the following lines:

richie/src/frontend/scss/objects/_course_glimpses.scss

Lines 330 to 354 in ebf3a45

	.course-glimpse-footer,
	.course-glimpse__large-footer {
	@include r-button-colors(r-theme-val(course-glimpse, footer), $apply-border: true);
	display: flex;
	padding: 0 $course-glimpse-content-padding-sides;
	border-bottom-left-radius: $border-radius-lg;
	border-bottom-right-radius: $border-radius-lg;
	font-size: 0.7rem;
	justify-content: space-between;
	flex-wrap: wrap;
	position: relative;
	z-index: 0;
	transition: transform 0.25s $r-ease-out;
	&:after {
	content: '';
	position: absolute;
	display: block;
	top: -15px;
	height: 30px;
	left: 0;
	right: 0;
	@include r-button-colors(r-theme-val(course-glimpse, footer), $apply-border: true);
	z-index: -1;
	}

💪