Move inversion annotation boxes past fret labels

096e50c46a91e4121ce0cf901f7abd031eb3facc · Claude · Feb 6, 2026 16:20

Position annotation boxes at fbRight + 150 to avoid overlapping
with fret labels (at fbRight + 70) and symbols (at fbRight + 120).
Increased marginRight to 310 to accommodate the new position.

Layout:
- Fret labels: fbRight + 70 (= 390)
- Fret symbols: fbRight + 120 (= 440)
- Annotation boxes: fbRight + 150 (= 470)
- Box right edge: 610px
- SVG width: 630px

https://claude.ai/code/session_01VSHtwaMJKL1ZgH33JDcwbY

+5 −3 · 1 file changed

js/fretboard.js +5 −3

diff --git a/js/fretboard.js b/js/fretboard.js
index 9001d43..36c6960 100644
--- a/js/fretboard.js
+++ b/js/fretboard.js
@@ -212,6 +212,8 @@ function calculateMajorInversions(rootNote, tuningStrings, maxFret = 15) {
 function renderInversionsOnFretboard(svg, rootNote, tuning, fbLeft, fbTop, stringSpacing, fretHeight, numFrets, svgWidth) {
     const inversions = calculateMajorInversions(rootNote, tuning.strings, numFrets);
     const displayedNote = displayNote(rootNote);
+    const numStrings = tuning.strings.length;
+    const fbRight = fbLeft + (numStrings - 1) * stringSpacing;
 
     // Filter inversions that are fully visible
     const visibleInversions = inversions.filter(inv => {
@@ -246,8 +248,8 @@ function renderInversionsOnFretboard(svg, rootNote, tuning, fbLeft, fbTop, strin
             }
         });
 
-        // Annotation box on the right side
-        const annotationX = fbLeft + 5 * stringSpacing + 30;
+        // Annotation box on the right side (past fret labels and symbols)
+        const annotationX = fbRight + 150;
         const annotationY = fbTop + (inv.baseFret - 0.5) * fretHeight;
 
         if (inv.baseFret <= numFrets - 2) {
@@ -333,7 +335,7 @@ function generateFretboardSVG(tuningName) {
 
     // SVG dimensions
     const marginLeft = 100;
-    const marginRight = 250;  // Extra space for inversion annotation boxes (140px wide)
+    const marginRight = 310;  // Extra space for inversion annotation boxes (140px wide, positioned at fbRight+150)
     const marginTop = capo > 0 ? 160 : 140;  // Extra space for effective tuning display
     const marginBottom = 80;
     const stringSpacing = 55;