Changeset View
Standalone View
web/chat/mention-suggestion-tooltip.css
- This file was added.
| .suggestionsContainer { | |||||
| box-sizing: border-box; | |||||
| display: flex; | |||||
| flex-direction: column; | |||||
| align-items: flex-start; | |||||
| width: 296px; | |||||
| max-height: 268px; | |||||
| padding: 8px; | |||||
| background: var(--typeahead-overlay-dark); | |||||
| border: 1px solid var(--typeahead-overlay-light); | |||||
| box-shadow: 0px 1px 2px var(--typeahead-overlay-shadow-1), | |||||
| 0px 4px 12px var(--typeahead-overlay-shadow-2); | |||||
| border-radius: 8px; | |||||
| } | |||||
| .suggestion { | |||||
tomek: Does this handle longer usernames correctly (by adding an ellipsis)? | |||||
przemekAuthorUnsubmitted Done Inline ActionsIt is troublesome to add that in flex container, but I added span element wrapping text inside and set text-overflow on it. przemek: It is troublesome to add that in flex container, but I added span element wrapping text inside… | |||||
| box-sizing: border-box; | |||||
| display: flex; | |||||
| flex-direction: row; | |||||
| align-items: center; | |||||
| padding: 8px; | |||||
| width: 280px; | |||||
| height: 40px; | |||||
| background: var(--typeahead-overlay-dark); | |||||
| border-radius: 4px; | |||||
| flex: none; | |||||
| order: 0; | |||||
| align-self: stretch; | |||||
| flex-grow: 0; | |||||
tomekUnsubmitted Done Inline ActionsWhy do we set these? Especially order: 0 is concerning. tomek: Why do we set these? Especially `order: 0` is concerning. | |||||
przemekAuthorUnsubmitted Done Inline ActionsTo be honest, I don't have much experience with Figma and copy-pasted all styles, only later realising some of them are unnecessary. Refactored it. przemek: To be honest, I don't have much experience with Figma and copy-pasted all styles, only later… | |||||
atulUnsubmitted Not Done Inline ActionsAh yeah I'd be super careful about copying styles from Figma. From what I understand they somehow translate their "auto-layout" system to CSS in a way that sometimes works great(?), but often spits out a bunch of weird stuff. I think for the CSS to be cleanly export-able it would take extra work from the designers to use "auto-layout" in some precise/specific/limited way. I don't even fully trust Figma SVG export given past experience... atul: Ah yeah I'd be super careful about copying styles from Figma.
From what I understand they… | |||||
ashoatUnsubmitted Not Done Inline ActionsAs a general rule, you should understand every single code of code you submit for review. If you're copy-pasting from somewhere, that means going line-by-line and researching what that line does and deciding if we need it ashoat: As a general rule, you should understand every single code of code you submit for review. If… | |||||
| color: var(--typeahead-overlay-text); | |||||
| } | |||||
| .suggestion:hover { | |||||
| background-color: var(--typeahead-overlay-light); | |||||
| } | |||||
| .suggestionsContainerOverflow { | |||||
| overflow-y: scroll; | |||||
| overflow-x: hidden; | |||||
| } | |||||
Does this handle longer usernames correctly (by adding an ellipsis)?