From 26ae6da9e3e58b46c56bbf8bdaab5319a0e08e4a Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Tue, 10 Sep 2024 11:58:43 +0200
Subject: [PATCH] Reduce size taken by grade chips in activity tables (#6668)

---
 .../components/dashboard/AssignmentActivity.tsx     | 13 ++++++++++++-
 .../dashboard/test/AssignmentActivity-test.js       |  3 ++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/lms/static/scripts/frontend_apps/components/dashboard/AssignmentActivity.tsx b/lms/static/scripts/frontend_apps/components/dashboard/AssignmentActivity.tsx
index cf27d2b372..6bc7f43878 100644
--- 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
index 0472e43fb4..35ddf281bd 100644
--- 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);
         });
       },
     );