@madeinbruno/atelier 0.7.0 → 0.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madeinbruno/atelier",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "madeinbruno.com 서비스들이 같이 쓰는 공용 컴포넌트 (옷 만드는 작업실 컨셉: 택, 라벨, 도장…)",
   "license": "MIT",
   "author": "codingbotPark <pbk575@gmail.com>",

package/styles.css

@@ -193,27 +193,34 @@
 }
 
 /* 툴팁: 기호 위에 작은 글씨가 뜬다 (CSS만, 스크립트 없음).
-   세탁 표시 줄이 택 왼쪽에 붙어 있으므로 기호 왼쪽 끝에서 오른쪽으로 펼쳐 택·화면 밖으로 나가지 않게 한다. */
-.mib-tag__care-item {
+   기호가 아니라 세탁 표시 줄(.mib-tag__care, 택 안쪽 폭) 기준으로 띄운다: 줄 왼쪽 끝에서 시작하고
+   폭은 줄을 넘지 않으며, 길면 잘라내지 않고 줄을 바꿔 끝까지 보여 준다. 그래서 택 밖으로 나가지 않는다. */
+.mib-tag__care {
   position: relative;
+}
+
+.mib-tag__care-item {
   display: flex;
 }
 
 .mib-tag__care-item[data-tip]::after {
   content: attr(data-tip);
   position: absolute;
-  bottom: calc(100% + 8px);
+  bottom: calc(100% + 6px);
   left: 0;
+  width: max-content;
+  max-width: 100%;
+  box-sizing: border-box;
   padding: 4px 8px;
   border-radius: 4px;
   background: var(--mib-ink);
   color: #fff;
   font-size: 11px;
-  line-height: 1.3;
-  white-space: nowrap;
-  max-width: 240px;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  line-height: 1.4;
+  white-space: normal;
+  /* 한국어는 단어 중간이 아니라 띄어쓰기에서 줄을 바꾼다. 아주 긴 한 단어만 어쩔 수 없이 자른다 */
+  word-break: keep-all;
+  overflow-wrap: anywhere;
   pointer-events: none;
   opacity: 0;
   transform: translateY(2px);