File name
Commit message
Commit date
File name
Commit message
Commit date
09-03
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
// 코드관리 화면 배치 — 시안 5402:13399의 `row`(공통코드 756 + 40 + 상세코드 756 = 1552).
// 두 목록이 나란히 서는 것은 이 화면만의 배치라 @fox에 넣지 않고 여기 둔다(값은 @fox 토큰).
@use "@fox/styles/abstracts" as fox;
.page {
display: flex;
inline-size: 100%;
flex-direction: column;
}
// 좁은 화면에서는 두 목록이 위아래로 선다 — 나란히 두면 표가 눌려 읽을 수 없다.
.columns {
display: grid;
inline-size: 100%;
gap: fox.gap(9);
grid-template-columns: 1fr;
}
@include fox.pc {
.columns {
grid-template-columns: 1fr 1fr;
}
}
.panel {
display: flex;
// 표가 넓어도 칸이 늘어나지 않게 한다 — 늘어나면 옆 칸을 밀어 두 목록의 폭이 어긋난다.
min-inline-size: 0;
flex-direction: column;
}
// 설명 열은 한 줄로 줄이고 넘치면 말줄임한다.
//
// 시안의 셀 컴포넌트에는 말줄임 스타일이 없지만(전문이 들어 있고 word-break만 걸려 있다),
// 프레임 높이가 44로 고정이라 Figma가 넘치는 글자를 잘라 보여준다. CSS는 대신 감싸므로 그대로
// 두면 행마다 높이가 달라진다 — 설명은 자유 입력이라 길이를 예측할 수 없다.
// 잘린 글자는 title로 남겨 마우스를 올리면 전문이 보인다.
.truncate {
display: block;
inline-size: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}