fix(spindle-ui): スマホ幅の時にSemiModalコンテンツ領域がスクロールバー分寄っている #1358
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
|
Visit the preview URL for this PR (updated for commit 28252d2): https://ameba-spindle--pr1358-fix-semimodal-scroll-ts3fn8wz.web.app (expires Sat, 04 Oct 2025 06:41:36 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: e7521619a2dd5c653490c8246e81ec2a5c8f1435 |
|
reg-suit detected visual differences. Check this report, and review them.
How can I change the check status?If reviewers approve this PR, the reg context status will be green automatically. |
Contributor
Author
|
@yu-3in @yasuda-shin @herablog お手隙で〜〜〜 🙏 |
Contributor
|
スクショ見る限り、今度はButtonが右に寄ってしまっている気がします |
Contributor
Author
|
仕事が雑でした。出直します |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
SemiModal利用時に、SP幅の表示の際、コンテンツ領域が若干左寄りになっているのを修正しました。
対応方針
現状のPC幅の実装を見ると、スクロールバーの幅分右paddingを調整している↓ようだったので、SP幅もそれに倣ってpaddingを調整しました。
https://github.com/openameba/spindle/blob/main/packages/spindle-ui/src/Modal/SemiModal.css#L139
疑問１：
その他の方法
スクロールバーが不要なときにもスクロールバーの領域（8px）を取る実装になっている↓ので、
https://github.com/openameba/spindle/blob/main/packages/spindle-ui/src/Modal/SemiModal.css#L176
overflow: hidden auto;にすることで、必要な時だけスクロールバーの領域を取るのでも良さそう？ただ、スクロールバーの有無でコンテンツの表示領域にブレが出るのが嫌で現状のpaddingの調整にしているのかなと想像し、選択しませんでした 🙏 もし意図わかる方がいれば 🙏
疑問２：SPのFigmaデザインではそもそもスクロール幅の領域を考慮されていなそう↓なので、こちらの選択肢の方が良いのかも？どうなんでしょう？