- BEM naming style
- Increase block gap from 4px to 8px
- Use flexbox inside 'header' grid-area to let the buttons wrapped
- Use variables
- Remove 4px gap when one of the buttons is not rendered
- Change 'body' to 'message'
- Set 'align-self: start' to the icon and spinner

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

- checkTimelineNarrow() looks for buttons by default
- Test indicator as well

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

…iew_body

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

- Set common spacing to buttons with variables
- Remove line breaks, yarn run i18n
- Set data-testid for headlines and buttons in case the tested strings would be displayed elsewhere simultaneously

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Apply 8px between wrapped buttons

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

This commit removes data-testid from headlines and data-testid-button and checks whether the elements are really visible, not overflowing the viewport.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

…bottom edge

This commit adds '.mx_DecryptionFailureBar--withEnd' class name to have it applied to the bar only if it has button(s). This way the bar is rendered with a flexbox and the row-gap declaration is respected only if there is a 'mx_DecryptionFailureBar--withEnd' element. The element  currently includes the button(s) only.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

…elineNarrow()

The loading spinner is likely to disappear while checking the bar on the narrow timeline.

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>