feat: llamalend breakpoint improvements

[DanielSchiavini]

• make adjustments so the table fits in very small screens
• adjustments to chips so they fit around the breakpoints
• autosize columns
• unify graph columns into a single one
• disable inverted theme on hover
• new metric unit (multiplier)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
curve-dapp	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 4, 2025 6:07pm
curve-dapp-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 4, 2025 6:07pm

[Copilot]

Pull Request Overview

This PR implements a set of breakpoint and responsive layout improvements for the Llamalend features. Key changes include:

• Adding the { fetch_on_chain: false } parameter to API calls in market and snapshot queries.
• Refining column and chip layouts on small screens and unifying graph columns.
• Replacing legacy media query hooks with the useIsMobile and useIsTiny hooks across components.

Reviewed Changes

Copilot reviewed 47 out of 47 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
apps/main/src/loan/entities/mint-markets.ts	Updated API call with new parameter to disable on-chain fetching.
apps/main/src/loan/entities/lending-vaults.ts	Modified getMarkets API call to use { fetch_on_chain: false }.
apps/main/src/loan/entities/lending-snapshots.ts	Updated snapshot API call with new fetch_on_chain option.
apps/main/src/loan/entities/crvusd-snapshots.ts	Consistently applied fetch_on_chain parameter.
apps/main/src/loan/components/PageLlamaMarkets/hooks/useLlamaMarketsColumnVisibility.tsx	Added Chart option and adjusted column options layout.
apps/main/src/loan/components/PageLlamaMarkets/columns.tsx	Removed explicit column size settings to rely on responsive behavior.
apps/main/src/loan/components/PageLlamaMarkets/cells/cell.format.ts	Introduced a new function for fixed percent formatting.
apps/main/src/loan/components/PageLlamaMarkets/cells/RateCell.tsx	Adjusted rate formatting based on mobile status using useIsMobile.
apps/main/src/loan/components/PageLlamaMarkets/cells/MarketTitleCell/MarketTitleCell.tsx	Refactored for mobile responsiveness and improved text truncation.
apps/main/src/loan/components/PageLlamaMarkets/cells/MarketTitleCell/MarketBadges.tsx	Updated badge sizing and mobile behavior for leverage and deprecation warnings.
apps/main/src/loan/components/PageLlamaMarkets/cells/LineGraphCell.tsx	Changed default graph size and variable naming for clarity.
apps/main/src/loan/components/PageLlamaMarkets/Page.tsx	Adjusted margins conditionally based on screen size using useIsTiny.
apps/main/src/loan/components/PageLlamaMarkets/MarketsFilterChips.tsx	Updated mobile detection to use useIsMobile in layout props.
apps/main/src/loan/components/PageLlamaMarkets/LlamaMarketExpandedPanel.tsx	Reorganized layout with a Grid container and added a mobile-aware graph size hook.
apps/main/src/loan/components/PageLlamaMarkets/LendingMarketsTable.tsx	Refactored visibility hook usage and sorting, with updated media queries.
apps/main/src/dex/components/PoolLabel.tsx, PageCreatePool/TokensInPool/SelectTokenButton.tsx, ConfirmModal/ModalDialog.tsx, ComboBoxSelectGauge/index.tsx	Replaced useMediaQuery with useIsMobile for consistency in mobile detection.

Comments suppressed due to low confidence (3)

apps/main/src/loan/components/PageLlamaMarkets/columns.tsx:37

• [nitpick] The removal of explicit column sizes may lead to inconsistent layouts on various screen sizes. Verify that the responsive layout behaves as expected without these explicit widths.

size: ColumnWidth.sm,

apps/main/src/loan/entities/mint-markets.ts:46

• The introduction of the { fetch_on_chain: false } parameter should be double-checked against the backend API. Please ensure that disabling on-chain fetching aligns with caching strategies and that all related data consumers are updated accordingly.

const data = await getMarkets(chain, { fetch_on_chain: false })

apps/main/src/loan/components/PageLlamaMarkets/LlamaMarketExpandedPanel.tsx:37

• [nitpick] Replacing the ExpansionPanelSection with a Grid container is a good modernization; however, please confirm that the new grid layout preserves the intended spacing and padding across all breakpoints.

<Grid container spacing={Spacing.md}>