diff --git a/src/pages/crontab/detail.tsx b/src/pages/crontab/detail.tsx
index fc8f5600..1f1b7f87 100644
--- a/src/pages/crontab/detail.tsx
+++ b/src/pages/crontab/detail.tsx
@@ -362,8 +362,13 @@ const CronDetailModal = ({
     <Modal
       title={
         <div className="crontab-title-wrapper">
-          <div>
-            <span>{currentCron.name}</span>
+          <div style={{ minWidth: 0 }}>
+            <Typography.Text
+              style={{width: '100%'}}
+              ellipsis={{ tooltip: currentCron.name }}
+            >
+              {currentCron.name}
+            </Typography.Text>
             {currentCron.labels?.length > 0 && currentCron.labels[0] !== '' && (
               <Divider type="vertical"></Divider>
             )}
diff --git a/src/pages/crontab/index.less b/src/pages/crontab/index.less
index d993d68c..1529cd93 100644
--- a/src/pages/crontab/index.less
+++ b/src/pages/crontab/index.less
@@ -6,9 +6,9 @@
   .card-wrapper {
     .ant-card:last-child {
       .ant-card-body {
-        min-height: 300px;
-        height: calc(90vh - 367px);
-        height: calc(90vh - var(--vh-offset, 0px) - 367px);
+        min-height: 0;
+        height: calc(80vh - 314px);
+        height: calc(80vh - var(--vh-offset, 0px) - 314px);
         overflow-y: auto;
 
         > div {
@@ -21,6 +21,8 @@
   .ant-modal-body {
     background: #eee;
     padding: 12px;
+    max-height: calc(80vh - 57px);
+    max-height: calc(80vh - var(--vh-offset, 57px));
   }
 
   .ant-card-body {