Fix tour arrow overlap with modal text content (#5296)

* Fix tour arrow overlap and update abc tests

- Move arrows to the edges of the dialog (right: 25px, left: 10px) to prevent overlap.
- Increase clearance in the help dialog body to avoid collision with arrows.
- Update abc.test.js to match the current precise output format of the abc engine.

* Revert abc.test.js changes to focus PR on navigation arrow fix only

* Fix abc.test.js to match upstream master

Remove unintended whitespace changes in test expectations

* Fix Prettier formatting in abc.test.js

The ESLint workflow failed because abc.test.js had Prettier formatting issues (unquoted numeric object keys). This commit fixes only the code style without changing test behavior or any functional code.

---------

Co-authored-by: Vanshika <vanshika@198625@gmail.com>

Author: vanshika2720

css/activities.css

@@ -1051,12 +1051,12 @@ table {
 }
 
 #right-arrow {
-  left: 385px;
+  right: 25px;
   background: url("../header-icons/right-arrow.png");
 }
 
 #left-arrow {
-  left: 5px;
+  left: 10px;
   background: url("../header-icons/left-arrow.png");
 }
 
@@ -1177,12 +1177,14 @@ table {
 
 #helpBodyDiv {
   position: relative;
-  left: 45px;
+  margin: 0 auto !important;
+  left: 0 !important;
   border: 0 !important;
   overflow-x: hidden;
   overflow-y: auto;
-  width: 350px;
-  padding: 1rem 1rem 0 0;
+  width: calc(100% - 130px) !important;
+  max-width: 350px;
+  padding: 1rem 1rem 0 1rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -2107,7 +2109,7 @@ table {
 
 #right-arrow {
     left: auto !important;  /* Unset the old fixed pixel value */
-    right: 10px !important; /* Stick to the right edge */
+    right: 25px !important; /* Stick to the right edge */
 }
 
 /* --- Desktop View (Screens wider than 900px) --- */
@@ -2138,7 +2140,8 @@ table {
 
     /* Fix the inner text box width so it doesn't overflow */
     #helpBodyDiv {
-        width: 100% !important;
+        width: calc(100% - 110px) !important;
+        margin: 0 auto !important;
         left: 0 !important;
         padding: 0 10px;
         box-sizing: border-box; 

js/__tests__/abc.test.js

@@ -53,10 +53,10 @@ describe("processABCNotes - Basic Note Processing", () => {
 
     beforeEach(() => {
         logo = {
-            notationNotes: { "0": "" },
+            notationNotes: { 0: "" },
             notation: {
                 notationStaging: {
-                    "0": [
+                    0: [
                         [["G♯4"], 4, 0, null, null, -1, false],
                         [["F4"], 4, 0, null, null, -1, false],
                         [["G♯4"], 2, 0, null, null, -1, false]
@@ -88,7 +88,7 @@ describe("processABCNotes - Advanced Note Handling", () => {
     let logo;
 
     beforeEach(() => {
-        logo = { notationNotes: { "0": "" }, notation: { notationStaging: { "0": [] } } };
+        logo = { notationNotes: { 0: "" }, notation: { notationStaging: { 0: [] } } };
     });
 
     it("should handle frequency (number) inputs", () => {
@@ -125,7 +125,7 @@ describe("processABCNotes - Advanced Note Handling", () => {
 describe("processABCNotes - Control Strings", () => {
     let logo;
     beforeEach(() => {
-        logo = { notationNotes: { "0": "" }, notation: { notationStaging: { "0": [] } } };
+        logo = { notationNotes: { 0: "" }, notation: { notationStaging: { 0: [] } } };
     });
 
     it("should handle all string commands correctly", () => {
@@ -182,7 +182,7 @@ describe("processABCNotes - Control Strings", () => {
 describe("processABCNotes - Chords", () => {
     let logo;
     beforeEach(() => {
-        logo = { notationNotes: { "0": "" }, notation: { notationStaging: { "0": [] } } };
+        logo = { notationNotes: { 0: "" }, notation: { notationStaging: { 0: [] } } };
     });
 
     it("should handle chords correctly (Start, Middle, End)", () => {
@@ -218,7 +218,7 @@ describe("processABCNotes - Chords", () => {
 describe("processABCNotes - Tuplet Handling", () => {
     let logo;
     beforeEach(() => {
-        logo = { notationNotes: { "0": "" }, notation: { notationStaging: { "0": [] } } };
+        logo = { notationNotes: { 0: "" }, notation: { notationStaging: { 0: [] } } };
     });
 
     it("should process standard tuplets correctly", () => {
@@ -270,7 +270,7 @@ describe("processABCNotes - Edge Cases for 100% Coverage", () => {
     let logo;
 
     beforeEach(() => {
-        logo = { notationNotes: { "0": "" }, notation: { notationStaging: { "0": [] } } };
+        logo = { notationNotes: { 0: "" }, notation: { notationStaging: { 0: [] } } };
     });
 
     it("should handle array of notes in NOTATIONNOTE field", () => {
@@ -321,10 +321,10 @@ describe("saveAbcOutput", () => {
         activity = {
             logo: {
                 notationOutput: "",
-                notationNotes: { "0": "" },
+                notationNotes: { 0: "" },
                 notation: {
                     notationStaging: {
-                        "0": [[["G♯4"], 4, 0, null, null, -1, false]]
+                        0: [[["G♯4"], 4, 0, null, null, -1, false]]
                     }
                 }
             },
@@ -353,10 +353,10 @@ describe("saveAbcOutput", () => {
 describe("processABCNotes - Tuplet Handling", () => {
     it("should process tuplets correctly", () => {
         const logo = {
-            notationNotes: { "0": "" },
+            notationNotes: { 0: "" },
             notation: {
                 notationStaging: {
-                    "0": [
+                    0: [
                         [["G♯4"], 4, 0, 3, 2, -1, false],
                         [["F4"], 4, 0, 3, 2, -1, false],
                         [["G♯4"], 4, 0, 3, 2, -1, false]