canonical / canonical/vanilla-framework
[Bug] dismiss button misaligned in borderless notification
- Dominant language
- HTML
- Stars
- 983
- Forks
- 216
- Avg merge
- 3d 13h
- Merged PRs (30d)
- 3
Description
**Describe the bug**
The close button looks slightly misaligned when the notification doesn't have a border.

While, according to the docs, borderless notifications are supposed to be used in the context of a bigger component, and there is no documented usage of a borderless notification with a dismiss button, I think it's a valid use-case to have both borderless and dismissible notifications.
**To Reproduce**
See [example](https://codepen.io/andesol/pen/raVrOGr).
**Expected behavior**
Title and dismiss button are aligned. Compare with normal notification for reference:

Contributor guide
Research direction
Start with the linked CodePen example and the notification documentation, then compare the borderless dismissible notification with the normal notification shown in the issue. Done means the title and dismiss button are aligned in the borderless variant while preserving the normal notification behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html, sass
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100