🎯 컬럼 고정 너비 적용 - minmax 제거
Some checks failed
SonarQube Analysis / SonarQube Scan (push) Has been cancelled
Some checks failed
SonarQube Analysis / SonarQube Scan (push) Has been cancelled
- 문제 원인: minmax(최소값, auto)로 인해 내용에 따라 컬럼 크기 변동 - 모든 minmax()를 고정 너비로 변경 - 헤더와 본문이 항상 정확히 동일한 너비 유지 - 예: minmax(130px, auto) → 130px - 이제 모든 카테고리에서 완벽한 정렬 보장
This commit is contained in:
Hyungi Ahn
@@ -335,7 +335,7 @@
|
||||
|
||||
/* PIPE 전용 헤더 - 9개 컬럼 */
|
||||
.detailed-grid-header.pipe-header {
|
||||
grid-template-columns: 60px 90px minmax(130px, auto) 80px 100px minmax(200px, auto) 120px minmax(180px, auto) 100px !important;
|
||||
grid-template-columns: 60px 90px 130px 80px 100px 200px 120px 180px 100px !important;
|
||||
}
|
||||
|
||||
.detailed-grid-header.pipe-header > div,
|
||||
@@ -350,7 +350,7 @@
|
||||
|
||||
/* PIPE 전용 행 - 9개 컬럼 */
|
||||
.detailed-material-row.pipe-row {
|
||||
grid-template-columns: 60px 90px minmax(130px, auto) 80px 100px minmax(200px, auto) 120px minmax(180px, auto) 100px !important;
|
||||
grid-template-columns: 60px 90px 130px 80px 100px 200px 120px 180px 100px !important;
|
||||
}
|
||||
|
||||
.detailed-material-row.pipe-row .material-cell {
|
||||
@@ -363,7 +363,7 @@
|
||||
|
||||
/* SPECIAL 전용 헤더 - 10개 컬럼 */
|
||||
.detailed-grid-header.special-header {
|
||||
grid-template-columns: 60px 90px minmax(150px, auto) 80px 100px minmax(180px, auto) 120px 120px minmax(180px, auto) 100px;
|
||||
grid-template-columns: 60px 90px 150px 80px 100px 180px 120px 120px 180px 100px;
|
||||
|
||||
|
||||
}
|
||||
@@ -380,21 +380,21 @@
|
||||
|
||||
/* SPECIAL 전용 행 - 10개 컬럼 */
|
||||
.detailed-material-row.special-row {
|
||||
grid-template-columns: 60px 90px minmax(150px, auto) 80px 100px minmax(180px, auto) 120px 120px minmax(180px, auto) 100px;
|
||||
grid-template-columns: 60px 90px 150px 80px 100px 180px 120px 120px 180px 100px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* BOLT 전용 헤더 - 9개 컬럼 */
|
||||
.detailed-grid-header.bolt-header {
|
||||
grid-template-columns: 60px 90px minmax(130px, auto) 80px 100px minmax(200px, auto) 120px minmax(180px, auto) 100px;
|
||||
grid-template-columns: 60px 90px 130px 80px 100px 200px 120px 180px 100px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* BOLT 전용 행 - 9개 컬럼 */
|
||||
.detailed-material-row.bolt-row {
|
||||
grid-template-columns: 60px 90px minmax(130px, auto) 80px 100px minmax(200px, auto) 120px minmax(180px, auto) 100px;
|
||||
grid-template-columns: 60px 90px 130px 80px 100px 200px 120px 180px 100px;
|
||||
|
||||
|
||||
}
|
||||
@@ -433,14 +433,14 @@
|
||||
|
||||
/* U-BOLT 전용 헤더 - 8개 컬럼 */
|
||||
.detailed-grid-header.ubolt-header {
|
||||
grid-template-columns: 60px 90px minmax(130px, auto) 80px minmax(180px, auto) 120px minmax(180px, auto) 100px;
|
||||
grid-template-columns: 60px 90px 130px 80px 180px 120px 180px 100px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* U-BOLT 전용 행 - 8개 컬럼 */
|
||||
.detailed-material-row.ubolt-row {
|
||||
grid-template-columns: 60px 90px minmax(130px, auto) 80px minmax(180px, auto) 120px minmax(180px, auto) 100px;
|
||||
grid-template-columns: 60px 90px 130px 80px 180px 120px 180px 100px;
|
||||
|
||||
|
||||
}
|
||||
@@ -481,14 +481,14 @@
|
||||
|
||||
/* SUPPORT 전용 헤더 - 9개 컬럼 */
|
||||
.detailed-grid-header.support-header {
|
||||
grid-template-columns: 60px 90px minmax(150px, auto) 80px 100px minmax(180px, auto) 120px minmax(180px, auto) 100px;
|
||||
grid-template-columns: 60px 90px 150px 80px 100px 180px 120px 180px 100px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
/* SUPPORT 전용 행 - 9개 컬럼 */
|
||||
.detailed-material-row.support-row {
|
||||
grid-template-columns: 60px 90px minmax(150px, auto) 80px 100px minmax(180px, auto) 120px minmax(180px, auto) 100px;
|
||||
grid-template-columns: 60px 90px 150px 80px 100px 180px 120px 180px 100px;
|
||||
|
||||
|
||||
}
|
||||
@@ -525,7 +525,7 @@
|
||||
|
||||
/* 플랜지 전용 헤더 - 10개 컬럼 */
|
||||
.detailed-grid-header.flange-header {
|
||||
grid-template-columns: 60px 90px minmax(100px, auto) 80px 100px 100px minmax(180px, auto) 100px minmax(180px, auto) 100px;
|
||||
grid-template-columns: 60px 90px 100px 80px 100px 100px 180px 100px 180px 100px;
|
||||
|
||||
|
||||
}
|
||||
@@ -542,7 +542,7 @@
|
||||
|
||||
/* 플랜지 전용 행 - 10개 컬럼 */
|
||||
.detailed-material-row.flange-row {
|
||||
grid-template-columns: 60px 90px minmax(100px, auto) 80px 100px 100px minmax(180px, auto) 100px minmax(180px, auto) 100px;
|
||||
grid-template-columns: 60px 90px 100px 80px 100px 100px 180px 100px 180px 100px;
|
||||
|
||||
|
||||
}
|
||||
@@ -557,7 +557,7 @@
|
||||
|
||||
/* 피팅 전용 헤더 - 10개 컬럼 */
|
||||
.detailed-grid-header.fitting-header {
|
||||
grid-template-columns: 60px 90px minmax(180px, auto) 80px 80px 100px minmax(180px, auto) 100px minmax(180px, auto) 100px;
|
||||
grid-template-columns: 60px 90px 180px 80px 80px 100px 180px 100px 180px 100px;
|
||||
|
||||
|
||||
}
|
||||
@@ -574,7 +574,7 @@
|
||||
|
||||
/* 피팅 전용 행 - 10개 컬럼 */
|
||||
.detailed-material-row.fitting-row {
|
||||
grid-template-columns: 60px 90px minmax(180px, auto) 80px 80px 100px minmax(180px, auto) 100px minmax(180px, auto) 100px;
|
||||
grid-template-columns: 60px 90px 180px 80px 80px 100px 180px 100px 180px 100px;
|
||||
|
||||
|
||||
}
|
||||
@@ -589,7 +589,7 @@
|
||||
|
||||
/* 밸브 전용 헤더 - 9개 컬럼 (스케줄 제거, 타입 너비 증가) */
|
||||
.detailed-grid-header.valve-header {
|
||||
grid-template-columns: 60px minmax(180px, auto) 120px 80px 80px minmax(180px, auto) 100px minmax(180px, auto) 100px;
|
||||
grid-template-columns: 60px 180px 120px 80px 80px 180px 100px 180px 100px;
|
||||
|
||||
|
||||
}
|
||||
@@ -606,7 +606,7 @@
|
||||
|
||||
/* 밸브 전용 행 - 9개 컬럼 (스케줄 제거, 타입 너비 증가) */
|
||||
.detailed-material-row.valve-row {
|
||||
grid-template-columns: 60px minmax(180px, auto) 120px 80px 80px minmax(180px, auto) 100px minmax(180px, auto) 100px;
|
||||
grid-template-columns: 60px 180px 120px 80px 80px 180px 100px 180px 100px;
|
||||
|
||||
|
||||
}
|
||||
@@ -621,7 +621,7 @@
|
||||
|
||||
/* 가스켓 전용 헤더 - 11개 컬럼 (타입 좁게, 상세내역 넓게, 두께 추가) */
|
||||
.detailed-grid-header.gasket-header {
|
||||
grid-template-columns: 60px 90px minmax(100px, auto) 80px 80px minmax(120px, auto) minmax(180px, auto) 80px 100px minmax(180px, auto) 100px;
|
||||
grid-template-columns: 60px 90px 100px 80px 80px 120px 180px 80px 100px 180px 100px;
|
||||
|
||||
|
||||
}
|
||||
@@ -638,7 +638,7 @@
|
||||
|
||||
/* 가스켓 전용 행 - 11개 컬럼 (타입 좁게, 상세내역 넓게, 두께 추가) */
|
||||
.detailed-material-row.gasket-row {
|
||||
grid-template-columns: 60px 90px minmax(100px, auto) 80px 80px minmax(120px, auto) minmax(180px, auto) 80px 100px minmax(180px, auto) 100px;
|
||||
grid-template-columns: 60px 90px 100px 80px 80px 120px 180px 80px 100px 180px 100px;
|
||||
|
||||
|
||||
}
|
||||
@@ -866,7 +866,7 @@
|
||||
|
||||
/* UNKNOWN 전용 헤더 - 5개 컬럼 */
|
||||
.detailed-grid-header.unknown-header {
|
||||
grid-template-columns: 60px 100px 1fr minmax(180px, auto) 100px;
|
||||
grid-template-columns: 60px 100px 1fr 180px 100px;
|
||||
|
||||
|
||||
}
|
||||
@@ -883,7 +883,7 @@
|
||||
|
||||
/* UNKNOWN 전용 행 - 5개 컬럼 */
|
||||
.detailed-material-row.unknown-row {
|
||||
grid-template-columns: 60px 100px 1fr minmax(180px, auto) 100px;
|
||||
grid-template-columns: 60px 100px 1fr 180px 100px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user