Feature/improve mobile responsiveness on the dashboard - #273
Merged
arisu6804 merged 2 commits intoJul 27, 2026
Merged
Conversation
- Add responsive breakpoints for dashboard filters at <=720px and <=480px (vertical stacking, full-width inputs, smaller padding) - Add min-height: 44px touch targets to all Transfers filter controls - Fix transfer-row grid layouts for has-checkbox selector on mobile - Wrap chart SVG in overflow-x: auto chart-wrapper for narrow screens - Fix unclosed @media rule in Chart.css - Clean up duplicate imports in App.jsx, Navbar.jsx, Chart.jsx, Button.stories.jsx, Chart.stories.jsx, and Navbar.stories.jsx - Remove duplicate render logic outside PullToRefresh in Transfers.jsx - Update Lighthouse CI to use npm ci || npm install for cross-platform support - Generate Linux x64 optional entries in package-lock.json - Add touch-target assertions for Transfers.css filter controls - Add integration test: responsive-dashboard.test.jsx - Update README responsive layout table with corrected breakpoints - Fix locale-preference tests to handle multiple LocaleSelect instances
- Migrate from legacy .eslintrc.json (ESLint v8 format) to eslint.config.js
(ESLint v9+ flat config), preserving all existing rules:
eslint:recommended, react/recommended, jsx-runtime, prettier
- Install eslint, eslint-plugin-react, and globals as direct devDependencies
- Rename .eslintrc.json -> .eslintrc.json.bak to prevent config conflict
- Fix 9 no-unused-vars errors across 4 files:
- src/hooks/useLocalStorage.js: bare catch{} for storage error swallowing
- src/hooks/useTransfers.js: bare catch{} in reload()
- src/services/api.js: bare catch{} in read() and write()
- src/services/wallet.js: bare catch{} in connectWallet/getStoredWallet/
disconnectWallet; rename unused payload -> _payload in signTransaction
Contributor
|
Clean and focused. Appreciate it. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Here's a high-level summary of what's covered:
Commit 1 — Mobile Responsiveness
CI/CD
lighthouse.ymlupdated tonpm ci || npm installso Linux CI runners don't fail on cross-platform lockfile mismatchespackage-lock.jsonCSS — 3 files changed
Transfers.css:min-height: 44pxtouch targets on all 3 filter controls;@media ≤720pxstacks filters vertically full-width;@media ≤480pxcollapses the headerresponsive.css: Fixedhas-checkboxgrid selector;≤480pxsingle-column layout;overflow-x: autoon table wrapperChart.css: Fixed an unclosed@mediarule that silently broke all chart styles below it; addedoverflow-x: autoto.chart-wrapperfor narrow screensCode Cleanup
App.jsx,Navbar.jsx,Chart.jsx,Chart.stories.jsx,Button.stories.jsx,Navbar.stories.jsx— these causedPARSE_ERRORin Vite's oxc plugin, crashing 9 test suitesTransfers.jsxTests
touch-targets.test.jswith Transfers filter assertionstest/integration/responsive-dashboard.test.jsx— guards against duplicate renders; validates filter ARIA labels on mobilelocale-preference.test.jsxto handle twoLocaleSelectinstances (navbar + drawer)Commit 2 — ESLint Fix
Config Migration (
.eslintrc.json→eslint.config.js)eslint,eslint-plugin-react,globalsas proper devDependencies (none were direct deps before)eslint:recommended,react/recommended,jsx-runtime,prettier,react/prop-types: off.eslintrc.json→.eslintrc.json.bakto avoid conflict9 Lint Errors Fixed across 4 files
All were
no-unused-vars— fixed using ES2019 barecatch {}(no binding needed when the error is intentionally swallowed) and_payloadprefix inwallet.js'ssignTransaction.Closes #5