fix(tablet): use $gtMd breakpoint on native for foldable split-screen#10384
fix(tablet): use $gtMd breakpoint on native for foldable split-screen#10384PatrickChoo wants to merge 2 commits intoOneKeyHQ:xfrom
Conversation
…-screen desktop style On Android foldable devices in split-screen mode, window width can be 640-767px which triggers $gtSm but should still show mobile card style. Raise the breakpoint to $gtMd (≥768px) on native platforms so only truly wide screens switch to desktop pill buttons. Also future-proofs for potential iOS foldable devices.
PatrickChoo
requested review from
ezailWang,
huhuanming,
originalix,
revan-zhang and
sidmorizon
as code owners
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
There was a problem hiding this comment.
Devin Review found 1 potential issue.
🐛 1 issue in files not directly in the diff
🐛 Caller passes $gtSm to RawActions, bypassing the $gtMd fix on native foldable split-screen (packages/kit/src/views/Home/components/WalletActions/index.tsx:288-292)
The WalletActions component in index.tsx:288 still passes $gtSm as a prop to RawActions. Inside RawActions (RawActions.tsx:294-308), the platform-conditional breakpoint ($gtMd on native) is spread first, then {...rest} is spread after at line 309. Since $gtSm and $gtMd are independent Tamagui responsive props, they don't override each other — both are applied. On a native foldable device in split-screen at 640–767px, $gtSm from the caller triggers and applies flexDirection: 'row' and justifyContent: 'flex-start' to the container, while the children (ActionItem, ActionMore) still show mobile card style because they now use $gtMd (which doesn't trigger until ≥768px). This creates a layout mismatch.
Root Cause
At packages/kit/src/views/Home/components/WalletActions/index.tsx:288-292:
$gtSm={{
flexDirection: 'row',
justifyContent: 'flex-start',
gap: '$2.5',
}}This $gtSm prop flows into RawActions via {...rest} at RawActions.tsx:309, which is spread AFTER the platform-conditional $gtMd at lines 294-308. Because $gtSm and $gtMd are different keys, both survive the spread and are both applied to the XStack. On native at 640-767px width, $gtSm triggers (changing the container to desktop row layout) while child ActionItem components stay in mobile card style (they require $gtMd ≥768px to switch). The container and children are now in conflicting layout modes.
Impact: On Android foldable split-screen (the exact scenario this PR aims to fix), the home page WalletActions container switches to desktop layout at 640px while action buttons remain as mobile cards — the very bug the PR is supposed to prevent.
View 4 additional findings in Devin Review.
The WalletActions component was passing $gtSm directly to RawActions, which bypasses the $gtMd fix inside RawActions on native. Since $gtSm and $gtMd are independent keys, both would apply — causing the container to switch to row layout at 640px while children stay in card style.
3 participants
Summary
$gtSmbreakpoint, incorrectly showing desktop pill-style buttons instead of mobile card-style buttons$gtSm(≥640px) to$gtMd(≥768px) on native platforms so only truly wide screens switch to desktop styleChanges
RawActions.tsx:ActionItem,ActionMore, andRawActionswrapper use$gtMdon nativeActionBuy.tsx(TokenDetails): Same fix for the buy/sell dual-render patternTest plan