zyc/devperf
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 项目明细 OKR 任务描述过长撑破栅格布局
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 1m8s
Details

Browse Source 
grid-template-columns 默认 1fr 的 min-content 下限会被超长不换行中文撑开，
改为 minmax(0,1fr) 让列可正常收缩；kr-name 改为 2 行 line-clamp，
避免单行省略把描述几乎全部隐藏。

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
zyc 2026-04-20 17:21:55 +08:00
parent 512d3baca2
commit 4fa69ca2bc
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/views/ProjectDetail.vue
View File

@ -538,8 +538,8 @@ function canEditObj(obj: any): boolean {
<style scoped>
.overall-progress { background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:var(--space-4) var(--space-5);margin-bottom:var(--space-2); }
.grid-2 { display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4); }
@media (max-width:768px) { .grid-2 { grid-template-columns:1fr; } }
.grid-2 { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-4);min-width:0; }
@media (max-width:768px) { .grid-2 { grid-template-columns:minmax(0,1fr); } }
.okr-list { display:flex;flex-direction:column;gap:var(--space-4); }
.obj-block { border-bottom:1px solid var(--color-border);padding-bottom:var(--space-3); }
@ -556,8 +556,8 @@ function canEditObj(obj: any): boolean {
/* 行1：标题 + 标签 + 截止日期 + 菜单 */
.kr-line1 { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px; }
.kr-title-area { display:flex;align-items:center;gap:6px;flex:1;min-width:0; }
.kr-name { font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.kr-title-area { display:flex;align-items:flex-start;gap:6px;flex:1;min-width:0; }
.kr-name { font-size:13px;font-weight:500;line-height:1.5;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word; }
.kr-name-cancelled { text-decoration:line-through;color:var(--color-text-muted); }
.kr-meta-area { display:flex;align-items:center;gap:8px;flex-shrink:0; }
.kr-date { font-size:11px;color:var(--color-text-muted);white-space:nowrap; }