Adjust Modes Name CSS min-width

src/css/tabs/auxiliary.css

@@ -73,7 +73,6 @@
     background-color: #e4e4e4;
     border-bottom: 5px solid white;
     color: grey;
-    min-width: 140px;
 }
 
 .tab-auxiliary .mode .info .name {

src/js/port_handler.js

@@ -274,20 +274,11 @@ PortHandler.selectPort = function(ports) {
 
 PortHandler.setPortsInputWidth = function() {
 
-    function getWidthofText(text) {
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d');
-
-        context.font = getComputedStyle(document.body).font;
-
-        return Math.ceil(context.measureText(text).width);
-    }
-
     function findMaxLengthOption(selectEl) {
         let max = 0;
 
         $(selectEl.options).each(function () {
-            const textSize = getWidthofText(this.textContent);
+            const textSize = getTextWidth(this.textContent);
             if (textSize > max) {
                 max = textSize;
             }

src/js/tabs/auxiliary.js

@@ -293,6 +293,9 @@ TABS.auxiliary.initialize = function (callback) {
             }
         }
 
+        const length = Math.max(...(FC.AUX_CONFIG.map(el => el.length)));
+        $('.tab-auxiliary .mode .info').css('min-width', `${Math.round(length * getTextWidth('A'))}px`);
+
         $('a.addRange').click(function () {
             const modeElement = $(this).data('modeElement');
             // auto select AUTO option; default to 'OR' logic

src/js/utils/common.js

@@ -85,9 +85,19 @@ export function getMixerImageSrc(mixerIndex, reverseMotorDir, apiVersion)
     return `./resources/motor_order/${mixerList[mixerIndex - 1].image}${reverse}.svg`;
 }
 
+export function getTextWidth(text) {
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+
+    context.font = getComputedStyle(document.body).font;
+
+    return Math.ceil(context.measureText(text).width);
+}
+
 // TODO: these are temp binding while transition to module happens
 window.degToRad = degToRad;
 window.bytesToSize = bytesToSize;
 window.checkChromeRuntimeError = checkChromeRuntimeError;
 window.generateVirtualApiVersions = generateVirtualApiVersions;
 window.getMixerImageSrc = getMixerImageSrc;
+window.getTextWidth = getTextWidth;