ui: improve the clip vision model picker layout

invokeai/backend/model_manager/probe.py

@@ -9,16 +9,23 @@ from picklescan.scanner import scan_file_path
 
 import invokeai.backend.util.logging as logger
 from invokeai.app.util.misc import uuid_string
-from invokeai.backend.model_hash.model_hash import (HASHING_ALGORITHMS,
-                                                    ModelHash)
+from invokeai.backend.model_hash.model_hash import HASHING_ALGORITHMS, ModelHash
 from invokeai.backend.util.util import SilenceWarnings
 
-from .config import (AnyModelConfig, BaseModelType,
-                     ControlAdapterDefaultSettings,
-                     InvalidModelConfigException, MainModelDefaultSettings,
-                     ModelConfigFactory, ModelFormat, ModelRepoVariant,
-                     ModelSourceType, ModelType, ModelVariantType,
-                     SchedulerPredictionType)
+from .config import (
+    AnyModelConfig,
+    BaseModelType,
+    ControlAdapterDefaultSettings,
+    InvalidModelConfigException,
+    MainModelDefaultSettings,
+    ModelConfigFactory,
+    ModelFormat,
+    ModelRepoVariant,
+    ModelSourceType,
+    ModelType,
+    ModelVariantType,
+    SchedulerPredictionType,
+)
 from .util.model_util import lora_token_vector_length, read_checkpoint_meta
 
 CkptType = Dict[str | int, Any]

invokeai/frontend/web/src/features/controlAdapters/components/parameters/ParamControlAdapterModel.tsx

@@ -102,9 +102,13 @@ const ParamControlAdapterModel = ({ id }: ParamControlAdapterModelProps) => {
   );
 
   return (
-    <Tooltip label={value?.description}>
-      <Flex flexDirection="row" gap={2}>
-        <FormControl isDisabled={!isEnabled} isInvalid={!value || mainModel?.base !== modelConfig?.base}>
+    <Flex sx={{ gap: 2 }}>
+      <Tooltip label={value?.description}>
+        <FormControl
+          isDisabled={!isEnabled}
+          isInvalid={!value || mainModel?.base !== modelConfig?.base}
+          sx={{ width: '100%' }}
+        >
           <Combobox
             options={options}
             placeholder={t('controlnet.selectModel')}
@@ -113,18 +117,22 @@ const ParamControlAdapterModel = ({ id }: ParamControlAdapterModelProps) => {
             noOptionsMessage={noOptionsMessage}
           />
         </FormControl>
-        {modelConfig?.type === 'ip_adapter' && modelConfig.format === 'checkpoint' && (
-          <FormControl isDisabled={!isEnabled} isInvalid={!value || mainModel?.base !== modelConfig?.base}>
-            <Combobox
-              options={clipVisionOptions}
-              placeholder={t('controlnet.selectCLIPVisionModel')}
-              value={clipVisionModel}
-              onChange={onCLIPVisionModelChange}
-            />
-          </FormControl>
-        )}
-      </Flex>
-    </Tooltip>
+      </Tooltip>
+      {modelConfig?.type === 'ip_adapter' && modelConfig.format === 'checkpoint' && (
+        <FormControl
+          isDisabled={!isEnabled}
+          isInvalid={!value || mainModel?.base !== modelConfig?.base}
+          sx={{ width: 'max-content', minWidth: 28 }}
+        >
+          <Combobox
+            options={clipVisionOptions}
+            placeholder={t('controlnet.selectCLIPVisionModel')}
+            value={clipVisionModel}
+            onChange={onCLIPVisionModelChange}
+          />
+        </FormControl>
+      )}
+    </Flex>
   );
 };