Conversation
WalkthroughBoth modal components update their container minimum width styling from full available width to a viewport-constrained value capped at 360px, improving responsive layout behavior on smaller screens. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
✅ All snapshot tests passed |
Playwright test results
Details
Failed testschromium › landingPage.spec.ts › Landing page and navigation › Should navigate to the homepage and change tabs (Qase ID: 2) Flaky testschromium › mainMenu.spec.ts › Main Menu flows › Should be able to navigate to LI.FI Scan (Qase ID: 21) Skipped testschromium › themeManipulation.spec.ts › Switch between dark and light theme and check the background color › Partner theme should appear in theme menu and apply background color (Qase ID: 49) |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/components/composite/WithdrawModal/WithdrawModal.tsx (1)
38-49: Consider centralizing the modal container sizing config.This style block is duplicated with
DepositModal; extracting it will reduce future drift when responsive sizing is adjusted again.Optional refactor sketch
+// shared helper (example): src/components/composite/EarnModal/buildModalContainerTheme.ts +export const buildEarnModalContainerTheme = (theme: Theme) => ({ + maxHeight: 'calc(100vh - 6rem)', + minWidth: 'min(100vw, 360px)', + maxWidth: 400, + borderRadius: `${theme.shape.cardBorderRadiusLarge}px`, + [theme.breakpoints.up('sm')]: { minWidth: 400 }, +});🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/composite/WithdrawModal/WithdrawModal.tsx` around lines 38 - 49, The modal container sizing object inside WithdrawModal's useMemo (the ctx -> theme -> container with maxHeight, minWidth, maxWidth, borderRadius and the [theme.breakpoints.up('sm')] override) is duplicated in DepositModal; extract this object into a single exported constant or helper (e.g., modalContainerStyle or getModalContainer(theme)) and import it into both WithdrawModal and DepositModal, replacing the inline container block in the ctx memo so both components reuse the same responsive sizing config and avoid future drift.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/components/composite/WithdrawModal/WithdrawModal.tsx`:
- Around line 38-49: The modal container sizing object inside WithdrawModal's
useMemo (the ctx -> theme -> container with maxHeight, minWidth, maxWidth,
borderRadius and the [theme.breakpoints.up('sm')] override) is duplicated in
DepositModal; extract this object into a single exported constant or helper
(e.g., modalContainerStyle or getModalContainer(theme)) and import it into both
WithdrawModal and DepositModal, replacing the inline container block in the ctx
memo so both components reuse the same responsive sizing config and avoid future
drift.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 5bfcc25e-a4b6-452a-8ced-aeabbf2fdaca
📒 Files selected for processing (2)
src/components/composite/DepositModal/DepositModal.tsxsrc/components/composite/WithdrawModal/WithdrawModal.tsx
1 participant
Which Jira task belongs to this PR?
Closes https://linear.app/lifi-linear/issue/JUM-785/depositwithdraw-squashed-modal-widget-on-mobile
Testing steps
/earnor an/earn/[slug]pageWhy did I implement it this way?
Checklist before requesting a review
Summary by CodeRabbit