In T368422, an initial version was implemented to support basic topic selection in order to customize translation suggestions. The "Adjust suggestions view" provides a list of topics for users to select. This ticket focuses on the header that is part of that view, proposing two adjustments:
- Make the header sticky. The list of topics can be long, and the header where the confirmation button will appear is no longer visible as users scroll. Making the header sticky will make the confirmation button visible as soon as the user selects a filter, without the need to scroll up. This requires to:
- Add a bottom border to the header using the border-color-subtle Codex border token
- Add additional padding at the top of the list of items to avoid the border to be too close. The space should be spacing-100 (16px) based on Codex spacing tokens.
- Make the header element to stick to the top of the dialog as the user scrolls (staying on top of the contents).
- Reduce space between close icon and title. Currently, there is a larger gap between the close button and the "Adjust suggestions" label. The space should be spacing-100 (16px) based on Codex spacing tokens.
The idea is to provide a similar style to the Codex Dialog component.
| Current | Proposed |
|---|---|
 |  |