fix(course): make course list-row responsive and cap visible tags

The rigid 7-track grid always rendered in one row, so when the list was squeezed the tag track shrank below the badge widths and tags overflowed into the lessons/exercises column. Make the ResourceListRow.Group a container query and stack each row's grid into a single column below 48rem, passing the column template via a CSS variable so the responsive override applies. Also cap the row at 3 tags with a +N pill.
2026-06-15 08:29:44 +01:00
parent 8503e8595e
commit 0b80440c9c
3 changed files with 14 additions and 4 deletions
@@ -424,7 +424,7 @@
          <Spinner class="size-6" />
        </div>
      {:else}
-        <ResourceListRow.Group>
+        <ResourceListRow.Group class="@container">
          {#each coursesApi.recommendedCourses as course (course.id)}
            <CourseListRow
              id={course.id}