fix(admin-ui/priorities): wrap long source labels in override picker (#2790)

Long device names (e.g. a Raymarine/Furuno label that includes the full
sourceRef) were clipped to a single line in the path-override Source
picker, forcing the column too wide and hiding the rest of the name.
Let the selected value and the menu options wrap across lines and grow
the control vertically so the full label stays readable.

Co-authored-by: dirkwa <dirkwahrtheit@gmail.com>

Author: dirkwa

packages/server-admin-ui/src/views/ServerConfig/PrefsEditor.tsx

@@ -6,7 +6,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faArrowUp } from '@fortawesome/free-solid-svg-icons/faArrowUp'
 import { faArrowDown } from '@fortawesome/free-solid-svg-icons/faArrowDown'
 import { faTrash } from '@fortawesome/free-solid-svg-icons/faTrash'
-import Select from 'react-select'
+import Select, { type StylesConfig } from 'react-select'
 import { useStore, useSourceStatus, useSourceStatusLoaded } from '../../store'
 import { type SourcesData } from '../../utils/sourceLabels'
 import { DEFAULT_FALLBACK_MS } from '../../utils/sourceGroups'
@@ -51,6 +51,37 @@ function isFanOut(priorities: Priority[]): boolean {
   return priorities.length === 1 && priorities[0].sourceRef === FANOUT_SOURCEREF
 }
 
+// react-select's default single-line control height.
+const SELECT_MIN_HEIGHT = 38
+// Above Bootstrap's modal/dropdown layers so the portalled menu stays on top.
+const MENU_PORTAL_Z_INDEX = 9999
+
+// Long device labels (e.g. "Raymarine E70310 (ttyUSB0.c078915de76…)")
+// otherwise get clipped to a single line. Let the selected value and the
+// menu options wrap so the full name + sourceRef stays readable in the
+// narrow priorities column, and grow the control vertically to fit.
+const wrappingSelectStyles: StylesConfig<SelectOption, false> = {
+  control: (base) => ({
+    ...base,
+    minHeight: SELECT_MIN_HEIGHT,
+    height: 'auto'
+  }),
+  valueContainer: (base) => ({ ...base, flexWrap: 'wrap' }),
+  singleValue: (base) => ({
+    ...base,
+    whiteSpace: 'normal',
+    overflow: 'visible',
+    textOverflow: 'clip',
+    wordBreak: 'break-word'
+  }),
+  option: (base) => ({
+    ...base,
+    whiteSpace: 'normal',
+    wordBreak: 'break-word'
+  }),
+  menuPortal: (base) => ({ ...base, zIndex: MENU_PORTAL_Z_INDEX })
+}
+
 export const PrefsEditor: React.FC<PrefsEditorProps> = ({
   path,
   priorities,
@@ -222,6 +253,7 @@ export const PrefsEditor: React.FC<PrefsEditorProps> = ({
                     <div style={{ flex: 1 }}>
                       <Select
                         menuPortalTarget={document.body}
+                        styles={wrappingSelectStyles}
                         options={availableOptions}
                         value={
                           sourceRef