fix(devtools): enhance Select component UX in user preferences

The clickable area was limited to the text of the selected option, not the entire visible button area. This made the component feel unresponsive.

I was unable to directly stretch the select element to expand its clickable area, and so added a span.

Initially, an unintended side effect of the change caused the button's width to change dynamically with the selection, losing the stable width behavior of the original select element.

To restore this, a hidden `<span>` sets a consistent width based on the longest option.

Author: teamleaderleo

packages/next/src/client/components/react-dev-overlay/ui/components/errors/dev-tools-indicator/dev-tools-info/user-preferences.tsx

@@ -1,4 +1,4 @@
-import { useState, type HTMLProps } from 'react'
+import React, { useState, type HTMLProps } from 'react'
 import { css } from '../../../../../utils/css'
 import EyeIcon from '../../../../icons/eye-icon'
 import { STORAGE_KEY_POSITION, STORAGE_KEY_THEME } from '../../../../../shared'
@@ -237,14 +237,40 @@ export function UserPreferences({
 function Select({
   children,
   prefix,
+  value,
   ...props
 }: {
   prefix?: React.ReactNode
-} & Omit<React.HTMLProps<HTMLSelectElement>, 'prefix'>) {
+  value?: string | number
+} & Omit<React.HTMLProps<HTMLSelectElement>, 'prefix' | 'value'>) {
+  let displayValue = ''
+  let longestText = ''
+
+  React.Children.forEach(children, (child) => {
+    if (
+      React.isValidElement<React.OptionHTMLAttributes<HTMLOptionElement>>(child)
+    ) {
+      const childText = child.props.children as string
+      if (childText.length > longestText.length) {
+        longestText = childText
+      }
+      if (child.props.value === value) {
+        displayValue = childText
+      }
+    }
+  })
+
   return (
     <div className="select-button">
       {prefix}
-      <select {...props}>{children}</select>
+      <div className="select-value-wrapper">
+        <span>{longestText}</span>
+        <span>{displayValue}</span>
+      </div>
+
+      <select value={value} {...props}>
+        {children}
+      </select>
       <ChevronDownIcon />
     </div>
   )
@@ -328,12 +354,17 @@ export const DEV_TOOLS_INFO_USER_PREFERENCES_STYLES = css`
   }
 
   .select-button {
+    position: relative;
     &:focus-within {
       outline: var(--focus-ring);
     }
 
     select {
       all: unset;
+      position: absolute;
+      inset: 0;
+      opacity: 0;
+      cursor: pointer;
     }
 
     option {
@@ -342,6 +373,17 @@ export const DEV_TOOLS_INFO_USER_PREFERENCES_STYLES = css`
     }
   }
 
+  .select-value-wrapper {
+    display: grid;
+  }
+
+  .select-value-wrapper > span {
+    grid-area: 1 / 1;
+  }
+  .select-value-wrapper > span:first-child {
+    visibility: hidden;
+  }
+
   :global(.icon) {
     width: 18px;
     height: 18px;