From 0b80440c9c10c254c8bd5e12175c96340dfb8e50 Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Sun, 14 Jun 2026 19:07:38 +0100
Subject: [PATCH] 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.
---
 .../course/components/course-list-row.svelte       | 14 ++++++++++++--
 .../src/lib/features/course/pages/courses.svelte   |  2 +-
 .../src/lib/features/lms/pages/dashboard.svelte    |  2 +-
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/apps/dashboard/src/lib/features/course/components/course-list-row.svelte b/apps/dashboard/src/lib/features/course/components/course-list-row.svelte
index f8ae8a1e..5c6c952f 100644
--- a/apps/dashboard/src/lib/features/course/components/course-list-row.svelte
+++ b/apps/dashboard/src/lib/features/course/components/course-list-row.svelte
@@ -84,6 +84,10 @@
 
   const hidden = $derived(new Set<string>(hiddenColumns));
 
+  const MAX_VISIBLE_TAGS = 3;
+  const visibleTags = $derived(tags.slice(0, MAX_VISIBLE_TAGS));
+  const remainingTagCount = $derived(Math.max(0, tags.length - MAX_VISIBLE_TAGS));
+
   const showActionsColumn = $derived(
     !hidden.has('actions') && (!isLMS || (isLMS && showPublicCourseLinks) || (isLMS && isExplore))
   );
@@ -163,7 +167,10 @@
   onclick={handleRowClick}
   role="row"
 >
-  <div class="grid w-full items-start gap-3" style="grid-template-columns: {gridTemplateColumns}">
+  <div
+    class="grid w-full grid-cols-1 items-start gap-x-3 gap-y-2 @3xl:grid-cols-[var(--row-cols)]"
+    style="--row-cols: {gridTemplateColumns}"
+  >
     <!-- Banner -->
     <div
       class="ui:border-border bg-muted relative size-28 shrink-0 overflow-hidden rounded-md border"
@@ -209,7 +216,7 @@
         {#if tags.length === 0}
           <span class="ui:text-muted-foreground text-xs">—</span>
         {:else}
-          {#each tags as tag (tag.id)}
+          {#each visibleTags as tag (tag.id)}
             <Badge variant="outline" class="max-w-[140px] truncate">
               <span
                 class="ui:bg-primary/60 inline-block h-1.5 w-1.5 shrink-0 rounded-full"
@@ -219,6 +226,9 @@
               {tag.name}
             </Badge>
           {/each}
+          {#if remainingTagCount > 0}
+            <Badge variant="secondary" class="shrink-0 tabular-nums">+{remainingTagCount}</Badge>
+          {/if}
         {/if}
       </div>
     {/if}
diff --git a/apps/dashboard/src/lib/features/course/pages/courses.svelte b/apps/dashboard/src/lib/features/course/pages/courses.svelte
index b7d63ce7..509f99e5 100644
--- a/apps/dashboard/src/lib/features/course/pages/courses.svelte
+++ b/apps/dashboard/src/lib/features/course/pages/courses.svelte
@@ -134,7 +134,7 @@
   {:else if isLMS || $courseMetaDeta.view === 'grid'}
     <CourseCardList {courses} {isExplore} {isLMS} {onCardClick} />
   {:else}
-    <ResourceListRow.Group>
+    <ResourceListRow.Group class="@container">
       {#each courses as courseData (courseData.id)}
         <CourseListRow
           id={courseData.id}
diff --git a/apps/dashboard/src/lib/features/lms/pages/dashboard.svelte b/apps/dashboard/src/lib/features/lms/pages/dashboard.svelte
index b24f81fd..af06e710 100644
--- a/apps/dashboard/src/lib/features/lms/pages/dashboard.svelte
+++ b/apps/dashboard/src/lib/features/lms/pages/dashboard.svelte
@@ -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}