안녕하세요,
우선 새로운 자동완성 디자인에 대해 정말 감사드립니다. 정말 마음에 듭니다. 
제 사이트에서 사용하고 있는 몇 가지 변경 사항을 소개합니다.
1. 모바일에서는 자동완성 목록을 전체 폭으로 표시합니다. 이제 목록이 화면 밖으로 나가거나 화면 중앙에서 잘리는 문제를 방지할 수 있으므로 안전하다고 생각합니다. 사용자가 긴 이름을 사용하거나 사용자 상태가 표시되는 경우 더 넓은 뷰를 제공하여 유용합니다.
.d-editor-textarea-wrapper {
.autocomplete {
.mobile-view & {
max-width: calc(100% - 20px);
width: 100%;
left: 10px !important; // 좌측 위치 계산 오버라이드
}
}
}
2. 페이드아웃 목록에서 하단 그림자와 여백은 목록이 스크롤되지 않아도 항상 표시되었습니다. -webkit-mask 대신 그림자를 :after 의사 요소에 적용했습니다. 첫 번째와 마지막 li 요소 아래로 미끄러지도록 상단과 하단 그림자를 추가했습니다. 이렇게 하면 하단 여백을 제거할 수 있습니다.
.hashtag-autocomplete {
max-height: 14em;
&__fadeout {
-webkit-mask: none;
&:before {
content: '';
position: absolute;
top: 0;
width: 100%;
height: 1.5em;
background: linear-gradient(
to bottom,
rgba(var(--secondary-rgb), 1),
rgba(var(--secondary-rgb), 0)
);
}
&:after {
content: '';
position: absolute;
bottom: 0;
width: 100%;
height: 1.5em;
background: linear-gradient(
to bottom,
rgba(var(--secondary-rgb), 0),
rgba(var(--secondary-rgb), 1)
);
}
}
&__option {
&:last-of-type {
margin-bottom: 0;
}
// 그림자 위에 위치시키기
&:first-of-type,
&:last-of-type {
.hashtag-autocomplete__link {
position: relative;
z-index: 1;
}
}
}
}
