Commit @f3507d89c4f0203b33067b1bff3718c86db7ca0f

임동욱 08-18

fix: 조회 목록이 가로로 꽉 차지 않던 문제

FoxModal의 `contents`가 `align-items: flex-start`인 flex 열이라, 그 안의 블록 요소가 내용
너비로 줄어들었다. 조회 목록은 줄마다 아래에 구분선을 긋기 때문에 폭이 줄면 선이 중간에서
끊긴 것처럼 보인다. 실측으로 contents 318에 폼과 목록이 169였다.

- FoxDescriptionList에 `align-self: stretch`를 줬다. flex 부모가 `flex-start`여도 스스로
  가로를 채운다 — 컴포넌트가 어디에 놓이든 폭을 보장한다.
- 학생 조회 팝업의 폼 래퍼에도 폭을 줬다. 목록의 부모가 이 폼이라, 폼이 줄면 그 안에서
  100%를 잡아도 소용이 없다.

검증 — 폼·목록·8줄 전부 318로 contents와 같아졌다(종전 169).

Co-Authored-By: Claude Opus 5

@f3507d89c4f0203b33067b1bff3718c86db7ca0f

640bf45

f3507d8

@fox/styles/_fox-description-list.scss

--- @fox/styles/_fox-description-list.scss

+++ @fox/styles/_fox-description-list.scss


   inline-size: 100%;
   flex-direction: column;
   margin: 0;
+  // flex 부모가 `align-items: flex-start`여도 가로로 꽉 차게 한다 — 이 목록은 줄마다 구분선을
+  // 긋기 때문에 폭이 내용에 맞춰 줄면 선이 중간에서 끊긴 것처럼 보인다.
+  align-self: stretch;
 
   &__item {
     display: flex;

Add a comment

Open 0
Closed 0

List

...	...	@@ -21,6 +21,9 @@
21	21	inline-size: 100%;
22	22	flex-direction: column;
23	23	margin: 0;
	24	+ // flex 부모가 `align-items: flex-start`여도 가로로 꽉 차게 한다 — 이 목록은 줄마다 구분선을
	25	+ // 긋기 때문에 폭이 내용에 맞춰 줄면 선이 중간에서 끊긴 것처럼 보인다.
	26	+ align-self: stretch;
24	27
25	28	&__item {
26	29	display: flex;

...	...	@@ -0,0 +1,7 @@
	1	+// 학생 회원 조회 팝업 — 이 화면에만 필요한 배치.
	2	+
	3	+// FoxModal의 `contents`가 `align-items: flex-start`인 flex 열이라, 그 안의 블록 요소는
	4	+// 내용 너비로 줄어든다. 폼은 조회 목록을 감싸기만 하므로 자리를 그대로 넘겨야 한다.
	5	+.form {
	6	+ inline-size: 100%;
	7	+}

...	...	@@ -17,6 +17,7 @@
17	17	updateStudentActiveStatus,
18	18	type UpdateStudentActiveStatusState,
19	19	} from '../_actions';
	20	+import styles from './student-detail-modal.module.scss';
20	21
21	22	interface StudentDetailModalProps {
22	23	member: StudentMember;
...	...	@@ -154,7 +155,12 @@
154	155	</>
155	156	}
156	157	>
157		- <form ref={formRef} id={DETAIL_FORM_ID} action={formAction}>
	158	+ <form
	159	+ ref={formRef}
	160	+ id={DETAIL_FORM_ID}
	161	+ action={formAction}
	162	+ className={styles.form}
	163	+ >
158	164	<input type="hidden" name="id" value={member.id} />
159	165	<FoxDescriptionList items={items} />
160	166	</form>

Delete comment