style: column wrapper srollable style

src/pages/llmodels/forms/backend.tsx

@@ -118,6 +118,11 @@ const BackendFields: React.FC = () => {
     return option.title;
   };
 
+  const backendVersionLabelRender = (option: any) => {
+    console.log('backendVersionLabelRender option:', option);
+    return option.title;
+  };
+
   const renderVersionOptions = (values: any[], label: string) => {
     if (!values || values.length === 0) {
       return null;
@@ -188,7 +193,8 @@ const BackendFields: React.FC = () => {
           <SealSelect
             allowClear
             showSearch
-            labelRender={labelRender}
+            allowNull
+            labelRender={backendVersionLabelRender}
             placeholder={intl.formatMessage({
               id: 'models.form.backendVersion.holder'
             })}
@@ -216,6 +222,19 @@ const BackendFields: React.FC = () => {
               </dl>
             }
           >
+            {(backendVersions.builtIn.length > 0 ||
+              backendVersions.custom.length > 0) && (
+              <Select.Option
+                key="auto"
+                value={null}
+                title={intl.formatMessage({ id: 'common.options.auto' })}
+                label={intl.formatMessage({
+                  id: 'common.options.auto'
+                })}
+              >
+                {intl.formatMessage({ id: 'common.options.auto' })}
+              </Select.Option>
+            )}
             {renderVersionOptions(
               backendVersions.builtIn,
               intl.formatMessage({ id: 'backend.builtin' })

src/pages/llmodels/forms/index.tsx

@@ -95,8 +95,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     onClusterChange,
     onOk
   } = props;
-  const { getScrollElementScrollableHeight, osInstance, scrollEventElement } =
-    useWrapperContext();
+  const { getScrollElementScrollableHeight } = useWrapperContext();
   const { backendOptions, getBackendOptions } = useQueryBackends();
   const { getGPUOptionList, gpuOptions, workerLabelOptions } =
     useGenerateGPUOptions();
@@ -105,8 +104,6 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
   const [activeKey, setActiveKey] = React.useState<string[]>([]);
   const [target, setTarget] = React.useState<string>(TABKeysMap.BASIC);
 
-  console.log('scroller instance in form:', osInstance, scrollEventElement);
-
   const segmentOptions = [
     {
       value: TABKeysMap.BASIC,
@@ -226,7 +223,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
     });
     form.setFieldsValue({
       env: null,
-      backend_version: '', // don't set default version here, let the user select it
+      backend_version: null, // don't set default version here, let the user select it
       backend_parameters: option.default_backend_param || [],
       ...updateKVCacheConfig(val, option),
       ...updateGPUSelector(val)
@@ -454,7 +451,8 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
             ngram_max_match_length:
               initialValues?.speculative_config?.ngram_max_match_length || 10
           },
-          ...initialValues
+          ...initialValues,
+          backend_version: initialValues?.backend_version || null
         }}
       >
         <BasicForm

src/pages/llmodels/forms/schedule-type.tsx

@@ -4,7 +4,6 @@ import SealCascader from '@/components/seal-form/seal-cascader';
 import SealSelect from '@/components/seal-form/seal-select';
 import TooltipList from '@/components/tooltip-list';
 import useAppUtils from '@/hooks/use-app-utils';
-import { useWrapperContext } from '@/pages/_components/column-wrapper/use-wrapper-context';
 import { useIntl } from '@umijs/max';
 import { Form, InputNumber } from 'antd';
 import _ from 'lodash';
@@ -72,8 +71,6 @@ const ScheduleTypeForm: React.FC = () => {
     clearCacheFormValues,
     initialValues
   } = useFormContext();
-  const { setSScrollContentPaddingBottom, getScrollElementScrollableHeight } =
-    useWrapperContext();
   const { getRuleMessage } = useAppUtils();
   const form = Form.useFormInstance();
   const scheduleType = Form.useWatch('scheduleType', form);
@@ -82,29 +79,6 @@ const ScheduleTypeForm: React.FC = () => {
     ['gpu_selector', 'gpus_per_replica'],
     form
   );
-  const gpuSekectorElRef = React.useRef<HTMLElement | null>(null);
-
-  const setContentPaddingBottom = () => {
-    if (!gpuSekectorElRef.current) {
-      gpuSekectorElRef.current = document.querySelector(
-        '[data-field="gpu_selector.gpu_ids"]'
-      );
-    }
-    if (gpuSekectorElRef.current) {
-      const { scrollHeight, scrollTop } =
-        getScrollElementScrollableHeight?.() || {
-          scrollHeight: 0,
-          scrollTop: 0
-        };
-
-      const rect = gpuSekectorElRef.current.getBoundingClientRect();
-      const bottomSpace =
-        window.innerHeight - rect.bottom + (scrollHeight - scrollTop);
-      if (bottomSpace < 340) {
-        setSScrollContentPaddingBottom?.(340 - bottomSpace);
-      }
-    }
-  };
 
   const handleScheduleTypeChange = async (value: string) => {
     await new Promise((resolve) => {
@@ -118,11 +92,9 @@ const ScheduleTypeForm: React.FC = () => {
         gpu_ids: [],
         gpus_per_replica: null
       });
-      requestAnimationFrame(() => {
-        setContentPaddingBottom();
-      });
     }
   };
+
   const handleGpusPerReplicasChange = (val: string | number | null) => {
     if (val === null) {
       form.setFieldValue(['gpu_selector', 'gpus_per_replica'], null);