Autocomplete is excessively crushed in narrow timelines

[novocaine]

Steps to reproduce

1. Go into a thread
2. @ someone and start typing

Outcome

What did you expect?

For things to be laid out nicely

What happened instead?

The box is crushed

Operating system

OS X

Browser information

Chrome

URL for webapp

develop.element.io

Application version

Element version: f149f9a-react-1eb67047c90d-js-9fc8048c307f Olm version: 3.2.8

Homeserver

matrix.org

Will you send logs?

No

[SimonBrandner]

Related/duplicate of #17923

[germain-gg]

This would be frequent for maximised widget rooms too

[t3chguy]

Needs design input for how it should look, there is a really limited amount of space even if we allow it to take up the whole width of the right panel at min-width

[t3chguy]

(ongoing design discussion in the linked PR)

[janogarcia]

@t3chguy @novocaine

So the idea is to properly redesign the autocomplete panels (as in the quick example I shared in the PR) as we go over dealing with all the inherited UX debt.

In the meantime, as a limited-scope incremental improvement, I made some tweaks to those directly in the web inspector to make sure the suggested changes are straightforward to implement.

---

Global changes

.mx_Autocomplete {
    box-shadow: 0px -16px 32px rgb(0 0 0 / 4%), 0px -2px 4px -2px rgb(0 0 0 / 12%); // improved foreground-background separation
}

.mx_Autocomplete_Completion_description {
    color: #737D8C; // use secondary color token
    font-size: 12px;
}

.mx_Autocomplete_provider_name {
    color: #737D8C; // use secondary color token
    
font-weight: 500;
}

.mx_BasicMessageComposer_AutoCompleteWrapper {
    width: calc(100% + 100px); // just to get the idea of how it should look, change it as necessary to avoid making it rely on a hardcoded value
}

Commands panel

.mx_Autocomplete_Completion.selected, .mx_Autocomplete_Completion:hover {
    
border-radius: 8px;

}

Commands panel - Only in wide mode:

.mx_Autocomplete_Completion_block {

    margin-bottom: 2px;

    padding-bottom: 4px;

    padding-top: 4px;

}


Commands panel - Only in narrow mode:

.mx_Autocomplete_Completion_block {

    margin-bottom: 8px;

    padding-bottom: 8px;

    padding-top: 8px;

}


.mx_Autocomplete_Completion_description {

    margin-bottom: 4px;

}


Users panel

mx_Autocomplete_Completion_pill
 {
    padding-left: 6px; // name pills
}

Also, make sure that:

• Display name and Matrix User ID are not spaced out.
• The Matrix User ID (first) and Display name (second) are truncated as necessary.

---

Reference screenshots

→ Figma

Commands - Wide

Commands - Narrow

Users - Wide and narrow

Users - With truncation

[t3chguy]

@janogarcia just to confirm, you said

Match the composer width.

but that seems to mean different things in Figma, in the right panel it goes as wide as the Send button, in the main timeline it only goes as wide as the input box (composer)

[janogarcia]

Match the composer width.

@t3chguy That probably was mentioned in a previous/different discussion. I'd recommend ignoring that and just follow the screenshots above (they are the same on Figma, I just tweaked the styles via dev tools).

As for the autocomplete width, as you already pointed out, I only changed it for the narrow container as a responsive optimization. We don't need to make it wider otherwise for large containers.

The value I used for the width, calc(100% + 100px), is just to give you the idea of how it should look, but feel free to implement a better way to expand the width appropriately so that we don't rely on brittle hardcoded/magic numbers.

Hope that makes sense.