Polish Matching Activity Editing

Author: ji-mmyliu

backend/services/implementations/activityService.ts

@@ -86,28 +86,12 @@ class ActivityService {
             mediaType: "text",
             context: "",
           },
-          {
-            id: "7",
-            mediaType: "text",
-            context: "",
-          },
-          {
-            id: "8",
-            mediaType: "text",
-            context: "",
-          },
-          {
-            id: "9",
-            mediaType: "text",
-            context: "",
-          },
         ];
         activityData = {
           ...baseActivity,
           media: {
             "1": [media[0], media[1], media[2]],
             "2": [media[3], media[4], media[5]],
-            "3": [media[6], media[7], media[8]],
           },
           correctAnswers: [
             ["1", "4", "7"],

frontend/src/components/course_authoring/matching/LongRightArrow.tsx

@@ -8,7 +8,7 @@ const LongRightArrow = ({ labelText }: { labelText?: string }) => {
         sx={{
           position: "relative",
           flex: 1,
-          minWidth: "80px",
+          minWidth: "35px",
           display: "flex",
           alignItems: "center",
           justifyContent: "center",

frontend/src/components/course_authoring/matching/MatchingRow.tsx

@@ -70,7 +70,7 @@ const MediaDisplay = ({
   // mediaItem.mediaType === "text"
   return (
     <TextField
-      sx={{ width: "231.8px", maxHeight: "64px" }}
+      sx={{ width: "180px", maxHeight: "64px" }}
       placeholder="[Click here to edit]"
       defaultValue={mediaItem.context}
       onChange={(e) => onChange(e.target.value)}
@@ -106,15 +106,15 @@ const MatchingRow = ({
   return (
     <Stack
       direction="row"
-      gap="16px"
+      gap="10px"
       alignItems="center"
       minHeight="52px"
       maxHeight="80px"
       sx={{ width: "100%" }}
     >
       <Stack
         direction="row"
-        gap="28px"
+        gap="10px"
         alignItems="center"
         minHeight="52px"
         maxHeight="80px"

frontend/src/components/feedback/feedback-admin-view/FeedbackAdminViewSidebar.tsx

@@ -46,7 +46,7 @@ const FeedbackAdminUnitSidebarItem = ({
       </ListItemButton>
       <Collapse in={open} timeout="auto" unmountOnExit>
         <List component="div" disablePadding>
-          {unit.modules.map((module) => (
+          {unit.modules.map((module, index) => (
             <ListItemButton
               key={module.id}
               sx={{
@@ -63,9 +63,7 @@ const FeedbackAdminUnitSidebarItem = ({
                 alignItems="center"
                 alignSelf="stretch"
               >
-                <Typography variant="bodyMedium">
-                  {module.displayIndex}.
-                </Typography>
+                <Typography variant="bodyMedium">{index + 1}.</Typography>
                 <Typography
                   variant={
                     module.id === selectedModuleId