improve XG display letters support

package.json

@@ -1,6 +1,6 @@
 {
   "name": "SpessaSynth",
-  "version": "3.24.0",
+  "version": "3.24.1",
   "type": "module",
   "scripts": {
     "start": "node src/website/server/server.js",

src/website/css/top_part.css

@@ -47,6 +47,7 @@ input[type="file"] {
 #title.xg_sysex_display {
     max-width: 16ch !important;
     word-break: break-all;
+    text-align: start !important;
     white-space: pre-wrap !important;
 }
 

src/website/js/sequencer_ui/sequencer_ui.js

@@ -276,41 +276,53 @@ class SequencerUI
                 this.mainTitleMessageDisplay.classList.add("sysex_display");
                 this.mainTitleMessageDisplay.classList.remove("xg_sysex_display");
                 let textData = data.displayData;
-                // remove "Display Letters" byte before decoding
+                // remove "Display Letters" byte before decoding for XG display
                 if (data.displayType === 1)
                 {
                     textData = textData.slice(1);
                 }
+                // decode the text
                 let text = this.decodeTextFix(textData.buffer);
+
                 // XG is type 1, apply some fixes to it.
+                // XG Displays have a special behavior, we try to mimic it here
+                // reference video:
+                // https://www.youtube.com/watch?v=_mR7DV1E4KE
                 // first of all, extract the "Display Letters" byte
                 if (data.displayType === 1)
                 {
                     const displayLetters = data.displayData[0];
+                    // XG Display Letters:
+                    // the screen is monospace,
+                    // two rows, 16 characters each (max)
+                    // since this is XG data, apply the XG display style
+                    this.mainTitleMessageDisplay.classList.add("xg_sysex_display");
 
-                    // if type is 0x06, set css white-space to pre-wrap
-                    // max width to 10ch
                     // 0x0c where c are the amount of spaces prepended
                     const spaces = displayLetters & 0x0F;
                     for (let i = 0; i < spaces; i++)
                     {
                         text = " " + text;
                     }
 
+                    // at 16 characters, add a newline
+                    if (text.length >= 16)
+                    {
+                        text = text.slice(0, 16) + "\n" + text.slice(16);
+                    }
+
                     // if type is 0x1x, add a newline
                     if ((displayLetters & 0x10) > 1)
                     {
-                        console.log("newline");
                         text = "\n" + text;
                     }
 
-                    // since this is XG data, apply the XG display style
-                    this.mainTitleMessageDisplay.classList.add("xg_sysex_display");
                 }
 
 
                 if (text.trim().length === 0)
                 {
+                    // set the text to invisible character to keep the height
                     this.mainTitleMessageDisplay.innerText = "‎ ";
                 }
                 else