Commit 2ef2965e authored by Data Governance Dev's avatar Data Governance Dev

fix(web3): 弹窗 form-grid 横向溢出 + 标签对齐修复

用户反馈任务弹窗里:
1. 任务说明 textarea 撑出了 modal-body 右边界,出现横向滚动条
2. 任务说明标签和任务分组的标签 x 坐标没对齐

根因
- form-grid 用 grid-template-columns: 1fr 1fr,默认是
  minmax(auto, 1fr),auto = 子元素最小内容宽度
- form-row 里的 flex 子元素(form-control → textarea)默认
  min-width: auto,不会被压到比内容更小
- textarea 内容/padding 撑大 → grid item 溢出列宽 → full-row 也顶宽
  → 超出 modal

修法
- .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  grid item 允许收缩到 0 宽
- .form-row { ...; min-width: 0; }
- .form-control { ...; min-width: 0; }
  flex 子允许收缩到 0
- .form-control textarea { max-width: 100%; box-sizing: border-box; }
  padding/border 不撑大盒子
- .modal-body { overflow-x: hidden; }
  兜底防整个页面出横滚

验收
- Vite 实时刷样式生效
- 浏览器刷新后横向滚动条消失
- 任务说明标签与任务名称/任务分组标签同 x 坐标
parent bd9adc8e
...@@ -333,7 +333,7 @@ table.dq-table tbody tr:last-child td { border-bottom: none; } ...@@ -333,7 +333,7 @@ table.dq-table tbody tr:last-child td { border-bottom: none; }
border: none; border: none;
} }
.modal-close:hover { color: #f56c6c; } .modal-close:hover { color: #f56c6c; }
.modal-body { flex: 1; overflow-y: auto; } .modal-body { flex: 1; overflow-y: auto; overflow-x: hidden; }
.modal-footer { .modal-footer {
padding: 12px 20px; padding: 12px 20px;
border-top: 1px solid #ebeef5; border-top: 1px solid #ebeef5;
...@@ -372,8 +372,8 @@ table.dq-table tbody tr:last-child td { border-bottom: none; } ...@@ -372,8 +372,8 @@ table.dq-table tbody tr:last-child td { border-bottom: none; }
border-left: 3px solid #409eff; border-left: 3px solid #409eff;
margin-bottom: 12px; margin-bottom: 12px;
} }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; } .form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 20px; }
.form-row { display: flex; align-items: center; gap: 8px; } .form-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.form-row.full { grid-column: 1 / -1; } .form-row.full { grid-column: 1 / -1; }
.form-label { .form-label {
font-size: 13px; font-size: 13px;
...@@ -383,11 +383,12 @@ table.dq-table tbody tr:last-child td { border-bottom: none; } ...@@ -383,11 +383,12 @@ table.dq-table tbody tr:last-child td { border-bottom: none; }
text-align: right; text-align: right;
} }
.form-label .required { color: #f56c6c; margin-right: 2px; } .form-label .required { color: #f56c6c; margin-right: 2px; }
.form-control { flex: 1; } .form-control { flex: 1; min-width: 0; }
.form-control .select-input, .form-control .select-input,
.form-control .text-input { width: 100%; min-width: 0; height: 32px; } .form-control .text-input { width: 100%; min-width: 0; height: 32px; }
.form-control textarea { .form-control textarea {
width: 100%; width: 100%;
max-width: 100%;
min-height: 60px; min-height: 60px;
padding: 6px 10px; padding: 6px 10px;
border: 1px solid #dcdfe6; border: 1px solid #dcdfe6;
...@@ -396,6 +397,7 @@ table.dq-table tbody tr:last-child td { border-bottom: none; } ...@@ -396,6 +397,7 @@ table.dq-table tbody tr:last-child td { border-bottom: none; }
font-family: inherit; font-family: inherit;
resize: vertical; resize: vertical;
outline: none; outline: none;
box-sizing: border-box;
} }
.form-control textarea:focus { border-color: #409eff; } .form-control textarea:focus { border-color: #409eff; }
.form-hint { font-size: 12px; color: #909399; margin-top: 4px; } .form-hint { font-size: 12px; color: #909399; margin-top: 4px; }
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment