nbnloper / edupay-admin star
Forked from ldu0009 / edupay-admin
임동욱 임동욱 09-03
fix: 셀렉트 목록이 트리거 폭에 묶여 항목이 접히던 문제 
`inset-inline: 0`으로 양쪽을 트리거에 묶어 놓아, "기타"처럼 짧은 값이 든 좁은
셀렉트에서는 "초등학교"가 글자 단위로 두 줄이 됐다. 목록의 폭은 트리거가 아니라
항목이 정해야 한다.

트리거보다 좁아지지는 않게 두고(min-inline-size: 100%) 가장 긴 항목에 맞춰
늘어나게 한다. 넓은 셀렉트는 그대로다.

Co-Authored-By: Claude Opus 5
@513fbdae3aec24c13aca30bfc2264882cfd5ad94
73a4cb4
513fbda
@fox/styles/_fox-select-option.scss
--- @fox/styles/_fox-select-option.scss
+++ @fox/styles/_fox-select-option.scss
@@ -32,8 +32,13 @@
 
 
 .fox-select-option {
 
   position: absolute;
 
-  inset-inline: 0;
 
+  inset-inline-start: 0;
 
   inset-block-start: calc(100% + #{fox.gap(2)});
 
+  // 트리거보다 좁아지지 않되 가장 긴 항목이 한 줄에 들어갈 만큼 늘어난다. 양쪽을
 
+  // `inset-inline: 0`으로 묶어 두면 트리거가 좁을 때("기타" 같은 짧은 값) 항목이 글자
 
+  // 단위로 접힌다 — 목록의 폭은 트리거가 아니라 항목이 정해야 한다.
 
+  min-inline-size: 100%;
 
+  inline-size: max-content;
 
   z-index: 10;
 
   margin: 0;
 
   padding: fox.padding(3);
Add a comment
List