fix(mobile): width display overflow #990
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
🦋 Changeset detectedLatest commit: 9d37353 The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #990 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 720 720
Lines 22209 22210 +1
Branches 1287 1287
=========================================
+ Hits 22209 22210 +1 ☔ View full report in Codecov by Sentry. |
| @@ -218,7 +218,8 @@ const getThemeStyle = (token: ConnectModalToken): CSSInterpolation => { | |||
| position: 'absolute', | |||
| bottom: '100%', | |||
| width: token.walletListWidth - token.paddingMD * 2, | |||
There was a problem hiding this comment.
感觉这样治标不治本，如果外面的宽度再小一点，还是会露出来的，因为这个宽度还是比较大。
There was a problem hiding this comment.
试了一下用 98%，在se下都不会超出
| @@ -38,7 +38,7 @@ const App: React.FC = () => { | |||
| <div className={styles.cardBg}> | |||
| <span className={styles.title}>Crypto Input</span> | |||
| <Card> | |||
| <Flex vertical align="center" style={{ width: 400 }} gap={16}> | |||
| <Flex vertical align="center" gap={16}> | |||
There was a problem hiding this comment.
看了一下官网和preivew pc是一致的
| @@ -217,8 +217,9 @@ const getThemeStyle = (token: ConnectModalToken): CSSInterpolation => { | |||
| content: '""', | |||
| position: 'absolute', | |||
| bottom: '100%', | |||
| width: token.walletListWidth - token.paddingMD * 2, | |||
| left: token.paddingMD, | |||
| width: '98%', | |||
There was a problem hiding this comment.
直接用 walletListWidth 是不是就可以了？
There was a problem hiding this comment.
token.walletListWidth 是328，所以超出了，上面没超出是因为还有一个 100%在。
There was a problem hiding this comment.
有没有办法可以设置为实际的宽度，98% 有点 hack，理论上宽度很小的时候也会超出去，最好是样式可以设置为实际的宽度，不知道好不好搞，可以再看看
There was a problem hiding this comment.
确实好像98看着不太严谨，我想到两种方案，或者可以看看有没有更好的建议：
方案一：100%，测试效果如下，这个颜色比较浅其实影响应该不大。
方案二：
width: calc(100% - ${token.paddingMD * 2});
未来token还方便通过config让用户自己定制这个的宽度间距。
这个api在antd中应用还挺多的，看起来表现也能解决问题。
为了展示的更明显，我改成了红色展示，专门测试的是最小的设备苹果se。
There was a problem hiding this comment.
嗯 calc(100% - ${token.paddingMD * 2}); 这个可以的话就用这个，看上去语义上也合理
[中文版模板 / Chinese template]
💡 Background and solution
transform: 'translateX(-50%)'来水平居中。🔗 Related issue link
#989