Avoid filters layout changes when clear button appears (#6487)

hypothesis · Jul 30, 2024 · 92badc7 · 92badc7
1 parent 0514078
commit 92badc7
Showing 1 changed file with 4 additions and 1 deletion.
diff --git a/lms/static/scripts/frontend_apps/components/dashboard/DashboardActivityFilters.tsx b/lms/static/scripts/frontend_apps/components/dashboard/DashboardActivityFilters.tsx
@@ -60,12 +60,13 @@ export default function DashboardActivityFilters({
   );
 
   return (
-    <div className="flex gap-2 md:w-1/2">
+    <div className="flex gap-2 flex-wrap">
       <MultiSelect
         disabled={courses.isLoading}
         value={selectedCourseIds}
         onChange={onCoursesChange}
         aria-label="Select courses"
+        containerClasses="!w-auto min-w-[180px]"
         buttonContent={
           courses.isLoading ? (
             <>...</>
@@ -92,6 +93,7 @@ export default function DashboardActivityFilters({
         value={selectedAssignmentIds}
         onChange={onAssignmentsChange}
         aria-label="Select assignments"
+        containerClasses="!w-auto min-w-[180px]"
         buttonContent={
           assignments.isLoading ? (
             <>...</>
@@ -121,6 +123,7 @@ export default function DashboardActivityFilters({
         value={selectedStudentIds}
         onChange={onStudentsChange}
         aria-label="Select students"
+        containerClasses="!w-auto min-w-[180px]"
         buttonContent={
           students.isLoading ? (
             <>...</>