Fix not calculating controller-friendly <select>'s size when switching tab

src/modules/controller-shortcut.ts

@@ -314,6 +314,7 @@ export class ControllerShortcut {
         const $selectProfile = CE<HTMLSelectElement>('select', {class: 'bx-shortcut-profile', autocomplete: 'off'});
 
         const $profile = PREF_CONTROLLER_FRIENDLY_UI ? BxSelectElement.wrap($selectProfile) : $selectProfile;
+        $profile.classList.add('bx-full-width');
 
         const $container = CE('div', {
             'data-has-gamepad': 'false',
@@ -390,6 +391,8 @@ export class ControllerShortcut {
 
             if (PREF_CONTROLLER_FRIENDLY_UI) {
                 const $bxSelect = BxSelectElement.wrap($select);
+                $bxSelect.classList.add('bx-full-width');
+
                 $div.appendChild($bxSelect);
                 setNearby($row, {
                     focus: $bxSelect,

src/modules/ui/dialog/navigation-dialog.ts

@@ -171,30 +171,44 @@ export class NavigationDialogManager {
                 }
 
                 // Find un-calculated <select> elements
-                const $selects = $dialog.querySelectorAll('.bx-select:not([data-calculated]) select');
+                this.calculateSelectBoxes($dialog);
-                $selects.forEach($select => {
-                    const rect = $select.getBoundingClientRect();
-                    const $parent = $select.parentElement! as HTMLElement;
-                    $parent.dataset.calculated = 'true';
-
-                    let $label;
-                    let width = Math.ceil(rect.width);
-
-                    if (($select as HTMLSelectElement).multiple) {
-                        $label = $parent.querySelector('.bx-select-value') as HTMLElement;
-                        width += 15;  // Add checkbox's width
-                    } else {
-                        $label = $parent.querySelector('div') as HTMLElement;
-                    }
-
-                    // Set min-width
-                    $label.style.minWidth = width + 'px';
-                });
             });
             observer.observe(this.$container, {childList: true});
         }
     }
 
+    calculateSelectBoxes($root: HTMLElement) {
+        const $selects = $root.querySelectorAll('.bx-select:not([data-calculated]) select');
+        $selects.forEach($select => {
+            const $parent = $select.parentElement! as HTMLElement;
+
+            // Don't apply to select.bx-full-width elements
+            if ($parent.classList.contains('bx-full-width')) {
+                $parent.dataset.calculated = 'true';
+                return;
+            }
+
+            const rect = $select.getBoundingClientRect();
+
+            let $label;
+            let width = Math.ceil(rect.width);
+            if (!width) {
+                return;
+            }
+
+            if (($select as HTMLSelectElement).multiple) {
+                $label = $parent.querySelector('.bx-select-value') as HTMLElement;
+                width += 20;  // Add checkbox's width
+            } else {
+                $label = $parent.querySelector('div') as HTMLElement;
+            }
+
+            // Set min-width
+            $label.style.minWidth = width + 'px';
+            $parent.dataset.calculated = 'true';
+        });
+    }
+
     handleEvent(event: Event) {
         switch (event.type) {
             case 'keydown':

src/modules/ui/dialog/settings-dialog.ts

@@ -943,6 +943,11 @@ export class SettingsNavigationDialog extends NavigationDialog {
             for (const $child of Array.from(this.$settings.children)) {
                 if ($child.getAttribute('data-tab-group') === settingTab.group) {
                     $child.classList.remove('bx-gone');
+
+                    // Calculate size of controller-friendly select boxes
+                    if (getPref(PrefKey.UI_CONTROLLER_FRIENDLY)) {
+                        this.dialogManager.calculateSelectBoxes($child as HTMLElement);
+                    }
                 } else {
                     $child.classList.add('bx-gone');
                 }