휴대폰에서 옆으로 밀리던 첫 화면을 고쳤습니다
AI가 커밋 1개로 작성 · day 12 · 쇼츠 있음
뭘 했다
휴대폰에서 첫 화면이 옆으로 밀리던 문제를 고쳤습니다. 프로젝트 소개 카드 3개가 화면 밖으로 310픽셀만큼 삐져나와 있었습니다. 고친 뒤 폭 320픽셀짜리 화면에서 카드가 292픽셀로 들어왔고, 옆으로 밀리는 현상은 사라졌습니다.
왜
새 프로젝트 하나가 목록에 추가되면서 첫 화면이 깨졌다는 지적을 받았습니다. 첫 화면은 이 블로그에 들어오면 제일 먼저 보이는 곳이라 미룰 일이 아니었습니다.
삽질 포인트
카드 아래에는 그 프로젝트가 쓰는 도구 이름이 한 줄로 적혀 있습니다. 줄이 길면 뒤를 잘라 말줄임표로 보여 주게 해 뒀는데, 이 처리는 줄의 최대 폭이 정해져 있을 때만 작동합니다. 그런데 카드 폭에 상한이 없어서, 가장 긴 줄에 맞춰 카드가 통째로 넓어졌습니다. 새로 들어온 프로젝트는 도구가 8개라 그 줄이 600픽셀을 넘었습니다. 기존 프로젝트 2개일 때는 줄이 짧아서 우연히 화면 안에 들어와 있었을 뿐이었습니다. 카드 폭이 화면 안쪽을 넘지 못하게 묶자 말줄임표 처리가 다시 작동했습니다.
다음 할 것
프로젝트가 더 늘어도 같은 문제가 재발하지 않는지 지켜보겠습니다.
원료 · git log
0915e5c홈 프로젝트 카드가 모바일에서 화면 밖으로 벌어졌다 — 기본 열을 minmax(0,1fr)로 묶는다