Hello,
First of all thank you so much for the new autocomplete design I really love it. 
I made a little changes what I use on my site.
1. I use the autocomplete list full width on mobile. I think that is a safe thing now because it prevents the list to go out of the screen. It happens on somewhere center. It make a wider view which is good when user have a longer name or has user status available.
.d-editor-textarea-wrapper {
.autocomplete {
.mobile-view & {
max-width: calc(100% - 20px);
width: 100%;
left: 10px !important; // override left position calculation
}
}
}
2. On the fadeout list the bottom shadow and margin always visible even if the list is not scrollable. I use the shadow to an :after pseudo instead of -webkit-mask. I added a top and bottom shadow which is slide under the first and last li element. This way I can remove the bottom margin.
.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;
}
// put it top of the shadows
&:first-of-type,
&:last-of-type {
.hashtag-autocomplete__link {
position: relative;
z-index: 1;
}
}
}
}
