Skip to content

Improve mobile-first responsiveness across full project#1292

Open
parrth20 wants to merge 18 commits into
develfrom
parth/mobile-layout
Open

Improve mobile-first responsiveness across full project#1292
parrth20 wants to merge 18 commits into
develfrom
parth/mobile-layout

Conversation

@parrth20

@parrth20 parrth20 commented Jun 21, 2026

Copy link
Copy Markdown
Member

Summary

Closes #1256

This PR applies a mobile-first responsiveness pass across the app so pages, dialogs, forms, cards, tables, and shared UI primitives behave better on small screens.

What changed

  • Improved mobile layout behavior across auth, wallet, send, receive, sweep, earn, orderbook, settings, and report views
  • Hardened shared UI primitives for small screens, including cards, dialogs, tabs, button groups, pagination, and QR surfaces
  • Added safer wrapping/truncation for long text, xpubs, addresses, UTXOs, labels, and table content
  • Updated dialogs and onboarding/tour surfaces to respect dynamic mobile viewport heights
  • Improved responsive behavior for form controls, confirmation steps, settings pages, and market/orderbook controls
  • Added responsive UI contract tests for shared components

ping @theborakompanioni

@parrth20 parrth20 self-assigned this Jun 21, 2026
Copilot AI review requested due to automatic review settings June 21, 2026 06:59
@parrth20 parrth20 added enhancement New feature or request UI/UX Issue related to cosmetics, design, or user experience WIP Work in Progress labels Jun 21, 2026

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

@parrth20 parrth20 marked this pull request as draft June 21, 2026 07:00
@github-actions

github-actions Bot commented Jun 21, 2026

Copy link
Copy Markdown

Coverage Report

Status Category Percentage Covered / Total
🔵 Lines 88.07% (🎯 80%) 4290 / 4871
🔵 Statements 87.99% (🎯 80%) 4846 / 5507
🔵 Functions 86.11% (🎯 80%) 1520 / 1765
🔵 Branches 80.2% (🎯 80%) 2752 / 3431
File Coverage
File Stmts Branches Functions Lines Uncovered Lines
Changed Files
src/components/LogsOverlay.tsx 100% 100% 100% 100%
src/components/MainWalletPage.tsx 87.5% 70% 81.81% 91.3% 51-52
src/components/create/CreateStepConfirm.tsx 84.61% 57.14% 57.14% 85.71% 78, 95-151
src/components/create/CreateStepVerifyMnemonic.tsx 92.64% 86.36% 88.23% 97.82% 41, 42, 60, 71, 194
src/components/create/CreateWalletPage.tsx 78.33% 57.14% 81.81% 77.58% 114-136, 164, 171, 183-185, 213-217, 230, 252
src/components/dev/DevSetupPage.tsx 100% 100% 100% 100%
src/components/earn/EarnForm.tsx 100% 78.12% 100% 100%
src/components/earn/EarnPage.tsx 91.66% 91.39% 88% 91.25% 211-214, 335, 398-408
src/components/earn/FidelityBondCard.tsx 90% 80% 100% 100% 22
src/components/earn/MoveToJarDialog.tsx 81.25% 92.72% 65.21% 82.66% 73, 101-102, 109-110, 117-118, 138, 190-194, 374-387, 402, 418
src/components/earn/OfferCard.tsx 100% 78.57% 100% 100%
src/components/earn/RenewBondDialog.tsx 82.52% 82.02% 65.51% 84.04% 75, 95, 121-122, 129-130, 137-138, 158, 210-214, 426-462, 477, 493
src/components/earn/CreateFidelityBondDialog/CreateFidelityBondDialog.tsx 64.28% 77.77% 33.33% 69.23% 44, 53-66, 83-86
src/components/earn/CreateFidelityBondDialog/CreateFidelityBondDialogSteps.tsx 54.76% 71.18% 39.13% 53.65% 99-101, 123-125, 187-199, 267-313, 452-476, 538-566
src/components/earn/report/EarnReportContent.tsx 98.88% 74.19% 97.56% 98.76% 268
src/components/earn/report/EarnReportOverlay.tsx 100% 100% 100% 100%
src/components/error/ErrorPage.tsx 100% 95% 100% 100%
src/components/import/ImportStepConfirm.tsx 80% 55.55% 40% 76.47% 76-80, 87-163
src/components/import/ImportWalletPage.tsx 79.74% 60% 75% 79.22% 88-89, 184, 256-257, 265-280, 298-329
src/components/layout/AppFooter.tsx 87.5% 100% 50% 80% 112
src/components/layout/AppNavbar.tsx 81.08% 84.61% 30% 74.07% 135, 142, 191-254
src/components/layout/AuthPageShell.tsx 100% 100% 100% 100%
src/components/layout/Layout.tsx 97.29% 80% 92.3% 96.96% 98
src/components/layout/PostLoginOnboardingTour.tsx 91.35% 88.57% 100% 94.36% 48, 51, 62, 67-68, 83, 137
src/components/logging/LogViewer.tsx 97.8% 95.23% 100% 98.71% 60, 88
src/components/login/LoginCard.tsx 55.17% 87.8% 25% 48% 31, 37-38, 60-65, 85-153
src/components/login/LoginForm.tsx 86.66% 84% 63.63% 87.5% 98-103, 157
src/components/login/OnboardingDialog.tsx 90.9% 68.18% 87.5% 88.88% 69-72
src/components/orderbook/OrderbookContent.tsx 0% 0% 0% 0% 44-451
src/components/orderbook/OrderbookOverlay.tsx 100% 100% 100% 100%
src/components/orderbook/OrderbookTable.tsx 94.44% 89.47% 92.85% 94.38% 175-177, 279-280
src/components/receive/ReceiveForm.tsx 95% 90% 90% 94.44% 92
src/components/receive/ReceivePage.tsx 84.21% 87.5% 78.57% 86.11% 41, 85-87, 107, 221-222
src/components/send/JarSelectorDialog.tsx 94.44% 87.5% 100% 100% 46
src/components/send/PaymentConfirmDialog.tsx 100% 83.33% 100% 100%
src/components/send/SendForm.tsx 92.24% 80.58% 93.33% 92.52% 86, 259, 329-330, 332, 427-428, 569-584
src/components/send/SendPage.tsx 90.71% 87.36% 87.5% 92.91% 121, 127, 185-188, 209, 215, 233, 485-486
src/components/send/TxFeeForm.tsx 93.75% 50% 66.66% 90.9% 149-153
src/components/send/UtxoSelectionDialog.tsx 100% 100% 100% 100%
src/components/settings/AccountXpubsDialog.tsx 71.87% 60.37% 63.63% 67.1% 62-95, 128-147, 254, 263-264, 288-292, 304-305, 69
src/components/settings/LanguageSelector.tsx 100% 50% 100% 100%
src/components/settings/RescanChainPage.tsx 93.33% 90% 100% 93.33% 146-147
src/components/settings/SettingsItem.tsx 100% 100% 100% 100%
src/components/settings/fees/FeeConfigDialog.tsx 100% 100% 100% 100%
src/components/sweep/SweepPage.tsx 91.73% 90% 97.05% 90.99% 147-161, 248, 254, 286, 306
src/components/ui/QrScannerDialog.tsx 91.66% 75% 72.72% 93.67% 22-23, 50, 65, 87, 143, 192
src/components/ui/accordion.tsx 100% 66.66% 100% 100%
src/components/ui/alert.tsx 100% 66.66% 100% 100%
src/components/ui/button-group.tsx 100% 75% 100% 100%
src/components/ui/card.tsx 100% 66.66% 100% 100%
src/components/ui/dialog.tsx 82.6% 80% 86.66% 80.95% 20, 41, 68-69
src/components/ui/pagination.tsx 100% 87.5% 100% 100%
src/components/ui/select.tsx 100% 70% 100% 100%
src/components/ui/tabs.tsx 100% 66.66% 100% 100%
src/components/ui/jam/Address.tsx 87.5% 88.88% 66.66% 85.71% 40-41
src/components/ui/jam/BitcoinQrCode.tsx 88.23% 55.55% 88.88% 88.46% 45-47
src/components/ui/jam/Cheatsheet.tsx 70.58% 66.66% 60% 64.28% 47-50, 55
src/components/ui/jam/PageTitle.tsx 100% 100% 100% 100%
src/components/ui/jam/SeedPhraseGrid.tsx 100% 100% 100% 100%
src/components/utils/PasswordVerificationForm.tsx 100% 87.5% 100% 100%
src/components/wallet/AccountDetailsTabContent.tsx 97.05% 79.41% 90.9% 96.96% 66
src/components/wallet/WalletJarsDetailsContent.tsx 88.18% 73.68% 91.22% 86.53% 145-147, 157-160, 170-172, 182-185, 241, 262, 300-301, 318, 323-324, 333
src/components/wallet/WalletJarsDetailsOverlay.tsx 100% 100% 100% 100%
Generated in workflow #3295 for commit 7eefa86 by the Vitest Coverage Report Action

@parrth20 parrth20 linked an issue Jun 21, 2026 that may be closed by this pull request
@parrth20 parrth20 added the SoB Issues, PRs, tasks, and discussions related to Summer of Bitcoin. label Jun 22, 2026
@parrth20 parrth20 requested a review from Copilot June 22, 2026 09:41

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

@parrth20 parrth20 marked this pull request as ready for review June 23, 2026 19:57
@parrth20 parrth20 removed the WIP Work in Progress label Jun 23, 2026
Comment thread src/components/earn/report/EarnReportContent.tsx Outdated
@theborakompanioni

Copy link
Copy Markdown
Collaborator

Candidates for follow-ups:

Orderbook:
image

Seed phrase modal:
image

Main Wallet page:
image

Buttons in destination dialog (Send page):
image

destination input and label overlays button in sweep amount (Send page):
image

payment confirm modal:
image

password modal (button order):
image

scan qr code modal (button size):
image

logs page (container and font-size) - in modal overlay it looks fine!:
image

NIT create wallet flow (buttons):
image

@parrth20

Copy link
Copy Markdown
Member Author

Main wallet page, send page, recieve page
Screenshot 2026-06-30 at 3 39 12 PM

Screenshot 2026-06-30 at 3 39 51 PM Screenshot 2026-06-30 at 3 40 18 PM Screenshot 2026-06-30 at 3 41 30 PM

QR scanner Model
Screenshot 2026-06-30 at 3 42 29 PM

Screenshot 2026-06-30 at 3 44 36 PM

Send Page
Screenshot 2026-06-30 at 3 57 43 PM

Confirmation

Screenshot 2026-06-30 at 3 59 38 PM

destination o/p
Screenshot 2026-06-30 at 4 00 57 PM

Just an idea to make it look more mobile friendly (if you want we can keep it )
Screenshot 2026-06-30 at 4 03 42 PM

seed phrase

Screenshot 2026-06-30 at 4 07 35 PM

ping @theborakompanioni

Comment thread src/components/orderbook/OrderbookTable.tsx Outdated
Comment thread src/components/orderbook/OrderbookTable.tsx Outdated
@parrth20

Copy link
Copy Markdown
Member Author

ping @theborakompanioni

Comment thread src/components/send/SendForm.tsx Outdated
@theborakompanioni

theborakompanioni commented Jul 1, 2026

Copy link
Copy Markdown
Collaborator

Earnings Report (modal):

image

Earnings Report (Page, not the modal):

image

Orderbook (Page, not the modal):

image

Create wallet verification (buttons):

image

Buttons should look the same as in the Import flow, which looks fine on mobile.

Jar Details (Page, not the modal):

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request SoB Issues, PRs, tasks, and discussions related to Summer of Bitcoin. UI/UX Issue related to cosmetics, design, or user experience

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Mobile-first responsiveness audit across all pages

3 participants