From a282c2fc4473e5d8d13188e67f4677dbc26e715c Mon Sep 17 00:00:00 2001
From: "Yang Wooseong (Andrew)" <dntjddid1@gmail.com>
Date: Wed, 29 May 2024 10:09:28 +0900
Subject: [PATCH] Fix Toast moving up and down when window is scrolled (#2245)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
  How to write a good PR title:
- Follow [the Conventional Commits
specification](https://www.conventionalcommits.org/en/v1.0.0/).
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

## Self Checklist

- [x] I wrote a PR title in **English** and added an appropriate
**label** to the PR.
- [x] I wrote the commit message in **English** and to follow [**the
Conventional Commits
specification**](https://www.conventionalcommits.org/en/v1.0.0/).
- [x] I [added the
**changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
about the changes that needed to be released. (or didn't have to)
- [x] I wrote or updated **documentation** related to the changes. (or
didn't have to)
- [x] I wrote or updated **tests** related to the changes. (or didn't
have to)
- [x] I tested the changes in various browsers. (or didn't have to)
  - Windows: Chrome, Edge, (Optional) Firefox
  - macOS: Chrome, Edge, Safari, (Optional) Firefox

## Related Issue

<!-- Please link to issue if one exists -->

<!-- Fixes #0000 -->

- None

## Summary

<!-- Please brief explanation of the changes made -->




https://github.com/channel-io/bezier-react/assets/28595102/97005c58-9602-4066-b398-2200a574848f

(강제로 body의 height를 늘려서 스크롤했을 때 토스트가 이동하는 모습)

스크롤을 하면 토스트 위치가 바뀌는 버그가 있어서 이를 수정합니다.

## Details

<!-- Please elaborate description of the changes -->

- `ToastProvider`의 container를 스크롤하면 `ToastContainer`의 위치가 바뀔 수 있어서 생긴
버그입니다. `ToastContainer`의 position 을 absolute가 아닌 fixed로 변경합니다.

### Breaking change? (Yes/No)

<!-- If Yes, please describe the impact and migration path for users -->

- No

## References

<!-- Please list any other resources or points the reviewer should be
aware of -->

- None
---
 .changeset/brown-lies-shop.md                                | 5 +++++
 packages/bezier-react/src/components/Toast/Toast.module.scss | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/brown-lies-shop.md

diff --git a/.changeset/brown-lies-shop.md b/.changeset/brown-lies-shop.md
new file mode 100644
index 0000000000..9307bb1b0c
--- /dev/null
+++ b/.changeset/brown-lies-shop.md
@@ -0,0 +1,5 @@
+---
+"@channel.io/bezier-react": patch
+---
+
+Change `position` property of `ToastContainer` to `fixed`
diff --git a/packages/bezier-react/src/components/Toast/Toast.module.scss b/packages/bezier-react/src/components/Toast/Toast.module.scss
index 017d0054d3..3e2534a9c0 100644
--- a/packages/bezier-react/src/components/Toast/Toast.module.scss
+++ b/packages/bezier-react/src/components/Toast/Toast.module.scss
@@ -43,7 +43,7 @@
 .ToastContainer {
   pointer-events: none;
 
-  position: absolute;
+  position: fixed;
 
   overflow: hidden;
   display: flex;