FIX: chỉnh sửa UI volume của master strip

app/static/js/app.jsx

@@ -909,7 +909,7 @@ const MasterStripConsole = ({ masterVolume, setMasterVolume, showMasteringModal,
   }, []);
 
   return React.createElement("div", {
-    className: "flex flex-col items-stretch w-[340px] shrink-0 strip-bg rounded-lg p-3 text-slate-300 select-none shadow-2xl relative"
+    className: "flex flex-col items-stretch w-[300px] shrink-0 strip-bg rounded-lg p-2 text-slate-300 select-none shadow-2xl relative overflow-hidden"
   },
     React.createElement("div", { className: "space-y-1.5 mb-2" },
       React.createElement("button", {
@@ -935,7 +935,8 @@ const MasterStripConsole = ({ masterVolume, setMasterVolume, showMasteringModal,
           title: "Kéo chuột để chỉnh Pan (Left/Right)",
           onPointerDown: handlePanPointerDown,
           onPointerMove: handlePanPointerMove,
-          onPointerUp: handlePanPointerUp
+          onPointerUp: handlePanPointerUp,
+          onDoubleClick: function() { setPan(0); if (panPointerRef.current) panPointerRef.current.style.transform = 'rotate(0deg)'; }
         }, React.createElement("div", {
           ref: panPointerRef,
           id: "panPointer",
@@ -945,12 +946,12 @@ const MasterStripConsole = ({ masterVolume, setMasterVolume, showMasteringModal,
         React.createElement("span", { className: "text-[8px] font-mono text-slate-500 w-5 text-left" },
           pan > 0 ? 'R' + Math.round(pan * 100) : ''
         ),
-        React.createElement("span", { ref: React.createRef ? null : null, className: "text-[10px] font-bold font-mono text-slate-200 ml-0.5" },
+        React.createElement("span", { ref: React.createRef ? null : null, className: "text-[10px] font-bold font-mono text-slate-200 ml-8" },
           masterVolume <= -50 ? '-inf' : (masterVolume > 0 ? '+' : '') + masterVolume.toFixed(1)
         )
       )
     ),
-      React.createElement("div", { className: "flex gap-2 my-2 justify-between items-stretch shrink-0", style: {height: '150px'} },
+      React.createElement("div", { className: "flex gap-1 my-1 justify-between items-stretch min-h-0", style: {flex: '1 1 0%'} },
         React.createElement("div", { className: "flex-1 flex flex-col bg-black/80 p-1.5 rounded border border-slate-800/90 relative shadow-inner" },
           React.createElement("div", { className: "flex-1 flex items-stretch justify-between min-h-0" },
             React.createElement("div", { className: "flex flex-col h-full text-[8px] font-mono text-slate-400 select-none pr-1 text-right border-r border-slate-800/60 overflow-hidden" },
@@ -977,7 +978,7 @@ const MasterStripConsole = ({ masterVolume, setMasterVolume, showMasteringModal,
       ),
       React.createElement("div", { className: "w-16 flex items-stretch gap-1 bg-slate-900/60 p-1 rounded border border-slate-800" },
         React.createElement("div", {
-          className: "flex-1 flex flex-col items-center justify-center relative fader-track rounded py-2 px-0.5"
+          className: "flex-1 flex flex-col items-center justify-center relative fader-track rounded"
         },
           React.createElement("div", { className: "w-0.5 flex-1 bg-slate-700 absolute" }),
           React.createElement("input", {
@@ -992,11 +993,17 @@ const MasterStripConsole = ({ masterVolume, setMasterVolume, showMasteringModal,
             onChange: function(e) { handleFaderChange(parseFloat(e.target.value)); }
           })
         ),
-        React.createElement("div", { className: "flex flex-col text-[7px] font-mono text-slate-500 select-none pr-0.5 overflow-hidden" },
+        React.createElement("div", { className: "relative w-5 text-[7px] font-mono text-slate-500 select-none overflow-hidden" },
-           React.createElement("span", { className: "flex-1 flex items-center justify-start" }, "+12"), React.createElement("span", { className: "flex-1 flex items-center justify-start" }, "+6"), React.createElement("span", { className: "flex-1 flex items-center justify-start" }, "0"), React.createElement("span", { className: "flex-1 flex items-center justify-start" }, "-6"),
+          React.createElement("span", { className: "absolute", style: {top: '0%', right: '2px'} }, "+12"),
-           React.createElement("span", { className: "flex-1 flex items-center justify-start" }, "-12"), React.createElement("span", { className: "flex-1 flex items-center justify-start" }, "-24"), React.createElement("span", { className: "flex-1 flex items-center justify-start" }, "-36"), React.createElement("span", { className: "flex-1 flex items-center justify-start" }, "-54")
+          React.createElement("span", { className: "absolute", style: {top: '8.3%', right: '2px'} }, "+6"),
-         )
+          React.createElement("span", { className: "absolute", style: {top: '16.7%', right: '2px'} }, "0"),
-      ),
+          React.createElement("span", { className: "absolute", style: {top: '25%', right: '2px'} }, "-6"),
+          React.createElement("span", { className: "absolute", style: {top: '33.3%', right: '2px'} }, "-12"),
+          React.createElement("span", { className: "absolute", style: {top: '50%', right: '2px'} }, "-24"),
+          React.createElement("span", { className: "absolute", style: {top: '66.7%', right: '2px'} }, "-36"),
+          React.createElement("span", { className: "absolute", style: {top: '91.7%', right: '2px'} }, "-54")
+        )
+       ),
       React.createElement("div", { className: "w-8 flex flex-col justify-between text-[10px] font-bold" },
         React.createElement("button", {
           id: "monoBtn",
@@ -1045,8 +1052,11 @@ const MasterStripConsole = ({ masterVolume, setMasterVolume, showMasteringModal,
         )
       )
     ),
-    React.createElement("div", { className: "mt-1 pt-1 border-t border-slate-800 flex flex-col items-center" },
+    React.createElement("div", { className: "text-center text-[10px] font-bold font-mono text-slate-200 shrink-0" },
-      React.createElement("div", { className: "flex justify-between w-full text-[9px] font-mono mb-0.5" },
+      masterVolume <= -50 ? '-inf' : (masterVolume > 0 ? '+' : '') + masterVolume.toFixed(1)
+    ),
+    React.createElement("div", { className: "shrink-0 border-t border-slate-800 flex flex-col items-center" },
+      React.createElement("div", { className: "flex justify-between w-full text-[9px] font-mono py-0.5" },
         React.createElement("span", { className: "text-emerald-400" }, "RMS"),
         React.createElement("span", { ref: rmsValRef, className: "text-emerald-400 font-bold" }, "-inf")
       ),