feat(responsive): make the wallet usable on mobile & tablet#227
Open
deepanshutr wants to merge 2 commits into
Open
feat(responsive): make the wallet usable on mobile & tablet#227deepanshutr wants to merge 2 commits into
deepanshutr wants to merge 2 commits into
Conversation
- remove the d-none d-md-block gate + 'open on a larger device' screen so the app renders at all viewports - add a bottom tab bar (5 primary + More sheet) for < xl; keep the desktop top nav for xl+; Connect stays visible in the mobile header - relax the fixed-viewport-height shell below lg so pages flow and scroll naturally instead of each section scrolling independently - Transact: stack Send/Receive (col-12 col-lg-8 / col-12 col-lg-4) Verified: desktop 1440 unchanged; mobile 390 unblocked + stacks.
Same fix as Transact across the remaining pages: the hard-coded col-8/col-4 two-column layouts become col-12 col-lg-8 / col-12 col-lg-4 so they stack below lg and split at lg+. Data tables (validators/proposals) keep a min-width on mobile so they scroll horizontally inside their existing overflow wrapper instead of squishing columns until content clips; the page body itself never scrolls horizontally (verified).
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
1 participant
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.
The app previously hard-blocked every viewport below 768px with a "Please open the app on a Tab or Larger device" screen (
components/Layout.js). This makes it work on phone and tablet.What changed
d-none d-md-blockgate and the block screen so the app renders at all widths.components/MobileTabBar.jsx) for< xl: 5 primary tabs (Transact/Stake/Vote/Bridge) + a "More" sheet holding the rest (Trade/Earn/Farm + external links). Active state tracks the route; iOS safe-area handled. The desktop top nav is unchanged atxl+; Connect stays visible in the mobile header.lgthat's relaxed so the page flows and scrolls normally and sections stack.col-8/col-4two-column layouts becomecol-12 col-lg-8/col-12 col-lg-4, stacking on phone/tablet and splitting atlg+.Verified in-browser (Chrome, real dev build)
document.documentElement.scrollWidth === innerWidth(no horizontal page overflow).Honest remaining polish (follow-up)
Uses Bootstrap's existing responsive grid/utilities and the app's own SCSS tokens — no new dependencies, no visual-identity change. Not merged; for your review.