FormSelectControl: minWidth can be redefined

src/apps/settings-modal/AppChatSettingsAI.tsx

@@ -144,7 +144,6 @@ export function AppChatSettingsAI() {
       options={_tokenCountingMethodOptions}
       value={tokenCountingMethod}
       onChange={setTokenCountingMethod}
-      selectSx={{ minWidth: 140 }}
     />
 
     <FormSelectControl
@@ -153,7 +152,6 @@ export function AppChatSettingsAI() {
       options={_keepThinkingBlocksOptions}
       value={chatKeepLastThinkingOnly ? 'last-only' : 'all'}
       onChange={(value) => setChatKeepLastThinkingOnly(value === 'last-only')}
-      selectSx={{ minWidth: 140 }}
     />
 
     <ListDivider inset='gutter'>Automatic AI Functions</ListDivider>

src/common/components/forms/FormSelectControl.tsx

@@ -35,7 +35,7 @@ export const FormSelectControl = <TValue extends string>(props: {
   value?: TValue;
   onChange: (value: TValue) => void;
   placeholder?: React.ReactNode;
-  selectSx?: SxProps;
+  selectSx?: SxProps; // overrides the minimum button width, if 'maxWidth' is set
 }) => {
   const selectedOption = props.options.find(option => option.value === props.value);
 
@@ -53,7 +53,7 @@ export const FormSelectControl = <TValue extends string>(props: {
         value={props.value}
         onChange={(_, value) => value && props.onChange(value as TValue)}
         placeholder={props.placeholder}
-        slotProps={_selectSlotProps}
+        slotProps={!(props.selectSx as any)?.['minWidth'] ? _selectSlotProps : undefined}
         sx={props.selectSx}
       >
         {props.options.map((option, idx) => (