Reduce size taken by grade chips in activity tables (#6668)

hypothesis · Sep 10, 2024 · 26ae6da · 26ae6da
1 parent 29b783e
commit 26ae6da
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/lms/static/scripts/frontend_apps/components/dashboard/AssignmentActivity.tsx b/lms/static/scripts/frontend_apps/components/dashboard/AssignmentActivity.tsx
@@ -1,3 +1,4 @@
+import classnames from 'classnames';
 import { useMemo } from 'preact/hooks';
 import { useLocation, useParams, useSearch } from 'wouter-preact';
 
@@ -199,7 +200,17 @@ export default function AssignmentActivity() {
                 )
               );
             case 'auto_grading_grade':
-              return <GradeStatusChip grade={stats.auto_grading_grade ?? 0} />;
+              return (
+                <div
+                  className={classnames(
+                    // Add a bit of vertical negative margin to avoid the chip
+                    // component to make rows too tall
+                    '-my-0.5',
+                  )}
+                >
+                  <GradeStatusChip grade={stats.auto_grading_grade ?? 0} />
+                </div>
+              );
             default:
               return '';
           }

diff --git a/lms/static/scripts/frontend_apps/components/dashboard/test/AssignmentActivity-test.js b/lms/static/scripts/frontend_apps/components/dashboard/test/AssignmentActivity-test.js
@@ -384,8 +384,9 @@ describe('AssignmentActivity', () => {
             .find('OrderableActivityTable')
             .props()
             .renderItem({ auto_grading_grade }, 'auto_grading_grade');
+          const gradeChip = mount(item).find('GradeStatusChip');
 
-          assert.equal(mount(item).prop('grade'), auto_grading_grade ?? 0);
+          assert.equal(gradeChip.prop('grade'), auto_grading_grade ?? 0);
         });
       },
     );