Calculate minimum width of controller-friendly <select> elements

src/assets/css/settings-dialog.styl

@@ -300,6 +300,7 @@
         text-align: left;
         align-self: center;
         margin-bottom: 0 !important;
+        flex: 1;
 
         + * {
             margin: 0 0 0 auto;

src/assets/css/web-components.styl

@@ -4,12 +4,16 @@
     flex: 0 1 auto;
 
     select {
-        display: none !important;
+        // Render offscreen instead of "display: none" so we could get its size
+        position: absolute !important;
+        top: -9999px !important;
+        left: -9999px !important;
+        visibility: hidden !important;
     }
 
     > div, button.bx-select-value {
-        min-width: 110px;
-        text-align: center;
+        min-width: 120px;
+        text-align: left;
         margin: 0 8px;
         line-height: 24px;
         vertical-align: middle;
@@ -53,7 +57,7 @@
 
         span {
             flex: 1;
-            text-align: center;
+            text-align: left;
             display: inline-block;
         }
 

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

@@ -1,9 +1,11 @@
 import { GamepadKey } from "@/enums/mkb";
+import { PrefKey } from "@/enums/pref-keys";
 import { EmulatedMkbHandler } from "@/modules/mkb/mkb-handler";
 import { BxEvent } from "@/utils/bx-event";
 import { STATES } from "@/utils/global";
 import { CE, isElementVisible } from "@/utils/html";
 import { setNearby } from "@/utils/navigation-utils";
+import { getPref } from "@/utils/settings-storages/global-settings-storage";
 
 export enum NavigationDirection {
     UP = 1,
@@ -154,6 +156,43 @@ export class NavigationDialogManager {
 
         // Hide dialog when the Guide menu is shown
         window.addEventListener(BxEvent.XCLOUD_GUIDE_MENU_SHOWN, e => this.hide());
+
+        // Calculate minimum width of controller-friendly <select> elements
+        if (getPref(PrefKey.UI_CONTROLLER_FRIENDLY)) {
+            const observer = new MutationObserver(mutationList => {
+                if (mutationList.length === 0 || mutationList[0].addedNodes.length === 0) {
+                    return;
+                }
+
+                // Get dialog
+                const $dialog = mutationList[0].addedNodes[0];
+                if (!$dialog || !($dialog instanceof HTMLElement)) {
+                    return;
+                }
+
+                // Find un-calculated <select> elements
+                const $selects = $dialog.querySelectorAll('.bx-select:not([data-calculated]) select');
+                $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});
+        }
     }
 
     handleEvent(event: Event) {