ui: controlchange record ui fix

main.js

@@ -113,10 +113,10 @@ function initUi() {
 		$('#loopList').text('');
 		for (let i = 0; i < result.records.loop.length; i++) {
 			if (result.records.loop[i].length > 0) {
-				$('#loopList').append('<tr><td>Boucle n°' + (i + 1) + '</td><td>' + result.records.loop[i][result.records.loop[i].length - 1].time + 'ms</td><td>' + result.records.loop[i].length + '</td><td><button id="record" value="' + i + '">' + recordIcon + '</button><a>note:<span contenteditable style="min-width:20px;display: inline-block;"></span></a><button id="loopPlay" value="' + i + '">' + (result.records.info[i].isLoop ? pauseIcon : playIcon) + '</button><a>note:<span contenteditable style="min-width:20px;display: inline-block;"></span></a></td><td><button id="loopReset" value="' + i + '">' + trashIcon + '</button></td></tr>');
+				$('#loopList').append('<tr><td>Boucle n°' + (i + 1) + '</td><td>' + result.records.loop[i][result.records.loop[i].length - 1].time + 'ms</td><td>' + result.records.loop[i].length + '</td><td><button id="record" value="' + i + '">' + recordIcon + '</button><a>note:<span contenteditable class="spanEditable"></span></a><button id="loopPlay" value="' + i + '">' + (result.records.info[i].isLoop ? pauseIcon : playIcon) + '</button><a>note:<span contenteditable class="spanEditable"></span></a></td><td><button id="loopReset" value="' + i + '">' + trashIcon + '</button></td></tr>');
 			}
 			else {
-				$('#loopList').append('<tr><td>Boucle n°' + (i + 1) + '</td><td></td><td>0</td><td><button id="record" value="' + i + '">' + recordIcon + '</button><a>note:<span contenteditable style="min-width:20px;display: inline-block;"></span></a><button id="loopPlay" value="' + i + '">' + playIcon + '</button><a>note:<span contenteditable style="min-width:20px;display: inline-block;"></span></a></td><td><button id="loopReset" value="' + i + '">' + trashIcon + '</button></td></tr>');
+				$('#loopList').append('<tr><td>Boucle n°' + (i + 1) + '</td><td></td><td>0</td><td><button id="record" value="' + i + '">' + recordIcon + '</button><a>note:<span contenteditable class="spanEditable"></span></a><button id="loopPlay" value="' + i + '">' + playIcon + '</button><a>note:<span contenteditable class="spanEditable"></span></a></td><td><button id="loopReset" value="' + i + '">' + trashIcon + '</button></td></tr>');
 			}
 		}
 	});

style.css

@@ -239,6 +239,15 @@ a[title]:hover {
   display: none;
 }
 
-td span, td svg, td label {
+td span,
+td svg,
+td label {
   vertical-align: middle;
 }
+
+.spanEditable {
+  min-width: 20px;
+  display: inline-block;
+  padding-left: 2px;
+  padding-bottom: 2px;
+}