diff --git a/css/activities.css b/css/activities.css
index 1e64fefc23..196b0553e4 100644
--- a/css/activities.css
+++ b/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; 
diff --git a/js/__tests__/abc.test.js b/js/__tests__/abc.test.js
index f707582f64..31fe184ab4 100644
--- a/js/__tests__/abc.test.js
+++ b/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", () => {
@@ -229,7 +229,7 @@ describe("processABCNotes - Tuplet Handling", () => {
         ];
 
         processABCNotes(logo, "0");
-        expect(logo.notationNotes["0"]).toBe("(1:1G^ 2G^ 2G^ 2  ");
+        expect(logo.notationNotes["0"]).toBe("(1:1G^ 2G^ 2G^ 2 ");
     });
 
     it("should handle array of notes (chords) inside tuplets", () => {
@@ -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]
@@ -366,7 +366,7 @@ describe("processABCNotes - Tuplet Handling", () => {
         };
 
         processABCNotes(logo, "0");
-        expect(logo.notationNotes["0"]).toBe("(1:1G^ 2G^ 2G^ 2  ");
+        expect(logo.notationNotes["0"]).toBe("(1:1G^ 2G^ 2G^ 2 ");
     });
 });