From 75fb9490e03120e805bbd4674716971ac7796245 Mon Sep 17 00:00:00 2001
From: Joao Correia <joao.correia@ecrop.dev>
Date: Sun, 2 Mar 2025 14:27:17 +0000
Subject: [PATCH] some more slight improvements to exam changes logs

---
 src/pages/approval-workflows/[id]/index.tsx | 16 ++++++++++------
 src/utils/exam.differences.ts               |  7 -------
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/pages/approval-workflows/[id]/index.tsx b/src/pages/approval-workflows/[id]/index.tsx
index a898eeb1..a814cf22 100644
--- a/src/pages/approval-workflows/[id]/index.tsx
+++ b/src/pages/approval-workflows/[id]/index.tsx
@@ -386,7 +386,7 @@ export default function Home({ user, initialWorkflow, id, workflowAssignees, wor
             {/* Side panel */}
             <AnimatePresence mode="wait">
                 <LayoutGroup key="sidePanel">
-                    <section className={`absolute inset-y-0 right-0 h-full bg-mti-purple-ultralight bg-opacity-50 shadow-xl shadow-mti-purple transition-all duration-300 overflow-hidden ${isPanelOpen ? 'w-[500px]' : 'w-0'}`}>
+                    <section className={`absolute inset-y-0 right-0 h-full overflow-y-auto bg-mti-purple-ultralight bg-opacity-50 shadow-xl shadow-mti-purple transition-all duration-300 overflow-hidden ${isPanelOpen ? 'w-[500px]' : 'w-0'}`}>
                         {isPanelOpen && selectedStep && (
                             <motion.div
                                 className="p-6"
@@ -551,12 +551,16 @@ export default function Home({ user, initialWorkflow, id, workflowAssignees, wor
                                                     transition={{ duration: 0.3 }}
                                                     className="overflow-hidden mt-2"
                                                 >
-                                                    <div className="p-3 border border-gray-300 rounded-xl bg-white bg-opacity-80 overflow-y-auto max-h-40">
+                                                    <div className="p-3 border border-gray-300 rounded-xl bg-white bg-opacity-80 overflow-y-auto max-h-[300px]">
                                                         {currentWorkflow.steps[selectedStepIndex].examChanges?.length ? (
                                                             currentWorkflow.steps[selectedStepIndex].examChanges!.map((change, index) => (
-                                                                <p key={index} className="whitespace-pre-wrap text-sm text-gray-500 mb-2">
-                                                                    {change}
-                                                                </p>
+                                                                <>
+                                                                    <p key={index} className="whitespace-pre-wrap text-sm text-gray-500 mb-2">
+                                                                        <span className="text-mti-purple-light text-lg">{change.charAt(0)}</span>
+                                                                        {change.slice(1)}
+                                                                    </p>
+                                                                    <hr className="my-3 h-[3px] bg-mti-purple-light rounded-full w-full" />
+                                                                </>
                                                             ))
                                                         ) : (
                                                             <p className="text-normal text-opacity-70 text-gray-500">No changes made so far.</p>
@@ -573,7 +577,7 @@ export default function Home({ user, initialWorkflow, id, workflowAssignees, wor
                                         value={comments}
                                         onChange={(e) => setComments(e.target.value)}
                                         placeholder="Input comments here"
-                                        className="w-full h-40 p-2 border-2 rounded-xl shadow-lg focus:border-mti-purple focus:outline-none mt-3 resize-none"
+                                        className="w-full h-[200px] p-2 border-2 rounded-xl shadow-lg focus:border-mti-purple focus:outline-none mt-3 resize-none"
                                     />
 
                                     <Button
diff --git a/src/utils/exam.differences.ts b/src/utils/exam.differences.ts
index 7d9fe40f..24543bd1 100644
--- a/src/utils/exam.differences.ts
+++ b/src/utils/exam.differences.ts
@@ -129,7 +129,6 @@ function compareObjects(oldObj: any, newObj: any, path: (string | number)[], dif
             }
 
             const oldIndexMap = new Map(oldObj.map((item: any, index: number) => [getIdentifier(item), index]));
-            let reorderDetected = false;
             // Process items in the new array using their order.
             for (let i = 0; i < newObj.length; i++) {
                 const newItem = newObj[i];
@@ -138,9 +137,6 @@ function compareObjects(oldObj: any, newObj: any, path: (string | number)[], dif
                     if (oldIndexMap.has(identifier)) {
                         const oldIndex = oldIndexMap.get(identifier)!;
                         const oldItem = oldObj[oldIndex];
-                        if (oldIndex !== i) {
-                            reorderDetected = true;
-                        }
                         compareObjects(oldItem, newItem, path.concat(`#${i + 1}`), differences);
                     } else {
                         differences.push(`• Added new ${getArrayItemLabel(path)} #${i + 1} at ${pathToHumanReadable(path)}\n`);
@@ -150,9 +146,6 @@ function compareObjects(oldObj: any, newObj: any, path: (string | number)[], dif
                     compareObjects(oldObj[i], newItem, path.concat(`#${i + 1}`), differences);
                 }
             }
-            if (reorderDetected) {
-                differences.push(`• Reordered Items at ${pathToHumanReadable(path)}\n`);
-            }
         } else {
             // For arrays that are not identifier-based, compare element by element.
             const maxLength = Math.max(oldObj.length, newObj.length);