Sugestões de lista de preenchimento automático

[Don]

Olá,

Primeiramente, muito obrigado pelo novo design do autocompletar, eu realmente adorei.

Fiz algumas pequenas alterações que uso no meu site.

1. Uso a lista de autocompletar em tela cheia no celular. Acho que isso é seguro agora, pois evita que a lista saia da tela. Ela aparece em algum lugar centralizado. Isso proporciona uma visualização mais ampla, o que é bom quando o usuário tem um nome mais longo ou tem um status de usuário disponível.

.d-editor-textarea-wrapper {
  .autocomplete {
    .mobile-view & {
      max-width: calc(100% - 20px);
      width: 100%;
      left: 10px !important; // sobrescreve o cálculo da posição esquerda
    }
  }
}

---

2. Na lista de fadeout, a sombra inferior e a margem estão sempre visíveis, mesmo quando a lista não é rolável. Eu uso a sombra em um pseudo :after em vez de -webkit-mask. Adicionei uma sombra superior e inferior que desliza sob o primeiro e o último elemento li. Dessa forma, posso remover a margem 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;
    }
    // coloca isso acima das sombras
    &:first-of-type,
    &:last-of-type {
      .hashtag-autocomplete__link {
        position: relative;
        z-index: 1;
      }
    }
  }
}

[chapoi]

@Don

2. Na lista de desaparecimento, a sombra inferior e a margem sempre visíveis, mesmo que a lista não seja rolável. Eu uso a sombra em um pseudo :after em vez de -webkit-mask. Adicionei uma sombra superior e inferior que desliza sob o primeiro e o último elemento li. Desta forma, posso remover a margem inferior.

Adorei a solução; vou implementar.