canonical / canonical/vanilla-framework

[Bug] dismiss button misaligned in borderless notification

Open
#5,546 2 comments 0 reactions 0 assignees View on GitHub
Bug 🐛
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.

![Image](https://github.com/user-attachments/assets/8b6f55cc-f95e-4df2-b524-69562aad4210)

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:

![Image](https://github.com/user-attachments/assets/2079851e-cbb8-48f7-8ce0-8f1b847b28bb)

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.