fix(notification): Added max-width for mobile responsiveness (#5173)

Co-authored-by: 07akioni <[email protected]>
tusen-ai · Dec 19, 2023 · a567d98 · a567d98
1 parent 817a4cb
commit a567d98
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 0 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -7,6 +7,7 @@
 - Fix n-space vnode reuse problem caused by filtering out comment nodes of slot, closes [#5136](https://github.com/tusen-ai/naive-ui/issues/5136).
 - Fix `n-data-table`'s prop `pagination`'s `default-page-size` and `default-page` not work in uncontrolled mode, closes [#5201](https://github.com/tusen-ai/naive-ui/issues/5201).
 - Fix `n-time-picker` formatting (format="HH: mm: ss. SSS") preventing modification of milliseconds in the edit box, closes [#5224](https://github.com/tusen-ai/naive-ui/issues/5224).
+- Fix `n-notification` notification clips out of screen when screen width is less than 400px wide.
 
 ### Features
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -7,6 +7,7 @@
 - 修复 `n-space` 插槽过滤了注释节点导致节点复用问题，关闭 [#5136](https://github.com/tusen-ai/naive-ui/issues/5136)
 - 修复 `n-data-table` 属性 `pagination` 在非受控模式下的默认分页大小 `default-page-size` 和当前页数 `default-page` 不生效，关闭 [#5201](https://github.com/tusen-ai/naive-ui/issues/5201)
 - 修复 `n-time-picker` 时间选择器格式化（`format="HH:mm:ss.SSS"`）后无法在编辑框内修改毫秒数的问题，关闭 [#5224](https://github.com/tusen-ai/naive-ui/issues/5224)
+- 修复 `n-notification` 通知在屏幕宽度小于 400px 的时候溢出屏幕
 
 ### Features
 

diff --git a/src/notification/src/styles/index.cssr.ts b/src/notification/src/styles/index.cssr.ts
@@ -217,6 +217,7 @@ export default c([
       padding-left: var(--n-padding-left);
       padding-right: var(--n-padding-right);
       width: var(--n-width);
+      max-width: calc(100vw - 28px - 16px);
       border-radius: var(--n-border-radius);
       box-shadow: var(--n-box-shadow);
       box-sizing: border-box;