diff --git a/app/components/ui-lib.module.scss b/app/components/ui-lib.module.scss
index 83c02f92a..d114882eb 100644
--- a/app/components/ui-lib.module.scss
+++ b/app/components/ui-lib.module.scss
@@ -312,3 +312,17 @@
     }
   }
 }
+
+
+.modal-mask {
+  z-index: 999;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: var(--full-height);
+  width: 100vw;
+  background-color: rgba(0, 0, 0, .5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx
index 838b15344..c9e43b036 100644
--- a/app/components/ui-lib.tsx
+++ b/app/components/ui-lib.tsx
@@ -501,18 +501,21 @@ export function ModalSelector<T>(props: {
   console.log("-----", props);
 
   return (
-    <div className={styles["selector"]}>
+    <div className={styles["modal-mask"]}>
       <Modal title="test" onClose={() => props.onClose?.()}>
-        <AntList grid={{ gutter: 16, column: 4 }}>
-          <Col span={8}>
-            <AntList.Item>
-              <AntCard title="你好">Card</AntCard>
-            </AntList.Item>
-          </Col>
-
-          <AntList.Item>
-            <AntCard title="你好">Card</AntCard>
-          </AntList.Item>
+        <AntList grid={{ gutter: 16, column: 3 }}>
+          <Row gutter={[16, 16]}>
+            <Col span={8}>
+              <AntList.Item>
+                <AntCard title="你好">Card</AntCard>
+              </AntList.Item>
+            </Col>
+            <Col span={8}>
+              <AntList.Item>
+                <AntCard title="你好">Card</AntCard>
+              </AntList.Item>
+            </Col>
+          </Row>
         </AntList>
       </Modal>
     </div>