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
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;
}