Hola,
En primer lugar, muchas gracias por el nuevo diseño de autocompletado, me encanta. 
Hice algunos pequeños cambios que uso en mi sitio.
- Utilizo la lista de autocompletado a pantalla completa en el móvil. Creo que es algo seguro ahora porque evita que la lista se salga de la pantalla. Ocurre en algún punto central. Proporciona una vista más amplia, lo cual es bueno cuando el usuario tiene un nombre más largo o tiene un estado de usuario disponible.
.d-editor-textarea-wrapper {
.autocomplete {
.mobile-view & {
max-width: calc(100% - 20px);
width: 100%;
left: 10px !important; // anula el cálculo de la posición izquierda
}
}
}
- En la lista de desvanecimiento, la sombra inferior y el margen siempre están visibles, incluso si la lista no se puede desplazar. Utilizo la sombra en un pseudo :after en lugar de -webkit-mask. Añadí una sombra superior e inferior que se desliza debajo del primer y último elemento li. De esta manera puedo eliminar el margen inferior.
.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;
}
// ponlo encima de las sombras
&:first-of-type,
&:last-of-type {
.hashtag-autocomplete__link {
position: relative;
z-index: 1;
}
}
}
}
