diff --git a/dinky-web/src/pages/DataStudio/LeftContainer/MetaData/index.tsx b/dinky-web/src/pages/DataStudio/LeftContainer/MetaData/index.tsx
index e7fc2eb47a..ac170edd4c 100644
--- a/dinky-web/src/pages/DataStudio/LeftContainer/MetaData/index.tsx
+++ b/dinky-web/src/pages/DataStudio/LeftContainer/MetaData/index.tsx
@@ -158,7 +158,7 @@ const MetaData = (props: any) => {
         submitter={false}
       >
         <ProFormSelect
-          style={{ paddingInline: 10 }}
+          style={{ paddingInline: 6 }}
           // width={leftContainer.width  }
           width={'xl'}
           // addonAfter={<ReloadOutlined spin={isLoadingDatabase} title={l('button.refresh')} onClick={() => refreshDataBase()} />}
diff --git a/dinky-web/src/pages/DataStudio/MiddleContainer/Editor/DiffModal.tsx b/dinky-web/src/pages/DataStudio/MiddleContainer/Editor/DiffModal.tsx
index 34292083a5..57cbba961d 100644
--- a/dinky-web/src/pages/DataStudio/MiddleContainer/Editor/DiffModal.tsx
+++ b/dinky-web/src/pages/DataStudio/MiddleContainer/Editor/DiffModal.tsx
@@ -94,10 +94,11 @@ const DiffModal: React.FC<DiffModalProps> = (props) => {
           {l('pages.datastudio.sql.sqlChanged')}-{fileName}
         </div>
       }
+      maskClosable={false}
       onCancel={() => onUse(false)}
       open={open}
       footer={null}
-      width={'60%'}
+      width={'75%'}
     >
       <div style={{ margin: '10px 0' }}>
         <Text>{l('pages.datastudio.sql.sqlChangedPrompt')}</Text>
diff --git a/dinky-web/src/pages/RegCenter/DataSource/components/DataSourceModal/DataSourceProForm/index.tsx b/dinky-web/src/pages/RegCenter/DataSource/components/DataSourceModal/DataSourceProForm/index.tsx
index b80b722b2c..7f37ee9f42 100644
--- a/dinky-web/src/pages/RegCenter/DataSource/components/DataSourceModal/DataSourceProForm/index.tsx
+++ b/dinky-web/src/pages/RegCenter/DataSource/components/DataSourceModal/DataSourceProForm/index.tsx
@@ -23,8 +23,14 @@ import {
 } from '@/pages/RegCenter/DataSource/components/constants';
 import { DataSources } from '@/types/RegCenter/data.d';
 import { l } from '@/utils/intl';
-import { ProForm, ProFormGroup, ProFormSelect, ProFormText } from '@ant-design/pro-components';
-import { AutoComplete, Input } from 'antd';
+import {
+  ProForm,
+  ProFormGroup,
+  ProFormSelect,
+  ProFormText,
+  ProFormTextArea
+} from '@ant-design/pro-components';
+import { AutoComplete } from 'antd';
 import { FormInstance } from 'antd/es/form/hooks/useForm';
 import { Values } from 'async-validator';
 import React, { useState } from 'react';
@@ -116,19 +122,29 @@ const DataSourceProForm: React.FC<DataSourceProFormProps> = (props) => {
 
         <ProForm.Group>
           <AutoComplete
+            virtual
+            size={'small'}
+            placement={'topLeft'}
+            autoClearSearchValue
             options={AUTO_COMPLETE_TYPE}
-            onSelect={(value) => form.setFieldsValue({ url: value })}
+            style={{
+              width: parent.innerWidth / 2 - 80,
+              minHeight: parent.innerHeight / 4 - 110,
+              marginBottom: 0
+            }}
+            filterOption
+            onSelect={(value) => form && form.setFieldsValue({ url: value })}
           >
-            <ProForm.Item
+            <ProFormTextArea
               name='url'
+              width={parent.innerWidth / 2 - 80}
               label={l('rc.ds.url')}
               rules={[{ required: true, message: l('rc.ds.urlPlaceholder') }]}
-            >
-              <Input.TextArea rows={3} cols={130} placeholder={l('rc.ds.urlPlaceholder')} />
-            </ProForm.Item>
+              placeholder={l('rc.ds.urlPlaceholder')}
+            />
           </AutoComplete>
         </ProForm.Group>
-        <br />
+
         {!excludeFormItem && (
           <ProFormGroup>
             <ProForm.Item