feat(ui): add mobile responsive layout for narrow viewports

[thephez]

Append a @media (max-width: 600px) block that stacks key/manage rows, full-width nav buttons, drops the mnemonic grid to two columns, lets the address row and DPNS username row wrap cleanly, and allows the fee table to scroll horizontally.

Co-Authored-By: Claude Opus 4.7 (1M context) noreply@anthropic.com

Summary by CodeRabbit

• Style
  • Improved mobile responsiveness for screens up to 600px: reduced outer spacing, adjusted typography, and optimized element stacking.
  • Navigation, network selection, buttons, forms, and identity inputs now wrap or stack for single-column layouts and full-width touch targets.
  • Tables/fee breakdowns gain horizontal scrolling to prevent overflow; modals and action groups are reorganized for better mobile usability.

[coderabbitai]

Warning

Review limit reached

@thephez, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 46 minutes and 25 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 676edcc1-e220-47a2-be59-0196584e5899

📥 Commits

Reviewing files that changed from the base of the PR and between 9f8c183 and 73492ac.

📒 Files selected for processing (1)

• index.html

📝 Walkthrough

Walkthrough

A single CSS @media (max-width: 600px) block in index.html refactors layout for small screens: reduces paddings, adjusts typography, enables wrapping, stacks buttons/controls to full width, reflows DPNS/devnet/faucet UI, and enables horizontal scrolling for wide tables.

Changes

Mobile Responsive Layout

Layer / File(s)	Summary
Baseline mobile layout and network selector index.html	Adds the @media (max-width: 600px) breakpoint with body/app/header padding and typography adjustments; enables network selector wrapping and responsive mode/network button sizing.
Action buttons, key controls, and deposit area index.html	Stacks primary/secondary/navigation/error action buttons to full-width, reflows key-config selects and remove-key alignment, and adjusts QR container, address stacking, and address pill sizing.
Step sections, mnemonic, and key management forms index.html	Converts mnemonic grid to two columns, tightens processing headline/padding, expands manage-key rows and toggles to full width, and stacks add-key controls/selects vertically.
DPNS inputs, devnet modal, and faucet index.html	Wraps and reorders DPNS username rows via flex order, stacks input-with-button controls with full-width fetch buttons, sets devnet modal actions to column-reverse, and widens faucet hero/button.
Overflow, fee table, and completion spacing index.html	Wraps identity/contract ID rows, enables horizontal scrolling for fee breakdown/table content, reduces fee table font sizing, and tightens complete-stats spacing/padding.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 A hop for small screens, snug and bright,
Padding trimmed, buttons stack just right,
Selectors wrap and tables glide,
DPNS and modals side by side,
Mobile-ready — soft moonlight.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly and clearly summarizes the main change: adding mobile responsive layout for narrow viewports via CSS media query, which is the primary focus of the changeset.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (2)

index.html (2)

2459-2462: 💤 Low value

Consider visual consistency of network selector wrapping.

The flex-basis: 100% on .devnet-dropdown forces it to take a full row, while .network-btn (Testnet/Mainnet) can wrap together. This creates inconsistent button widths where the devnet dropdown is always full-width but the other network buttons can share a row.

If this visual inconsistency is intentional for prominence, it's fine. Otherwise, consider letting all network controls wrap naturally by removing flex-basis: 100%.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@index.html` around lines 2459 - 2462, The CSS rule .devnet-dropdown forces
the dropdown to occupy a full row via flex-basis: 100%, causing inconsistent
widths vs .network-btn; remove the flex-basis: 100% (or replace it with flex: 0
1 auto / flex-basis: auto) on .devnet-dropdown so it can wrap naturally like
.network-btn and match the visual behaviour of the other network controls.

---

2651-2653: 💤 Low value

Verify the visual order of modal buttons.

Using flex-direction: column-reverse will display the "Save"/"Confirm" button above the "Cancel" button on mobile. While this emphasizes the primary action, it reverses the conventional left-to-right desktop order (Cancel, Confirm), which might momentarily confuse users.

If the reversed order is intentional to highlight the primary action on mobile, consider adding a comment to document this choice.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@index.html` around lines 2651 - 2653, The CSS rule .devnet-modal-actions {
flex-direction: column-reverse; } reverses the vertical stacking so the primary
action (Save/Confirm) appears above Cancel on mobile; if this reversal is
intentional, add an inline comment above the rule explaining the UX rationale
(e.g., "Primary action placed first on mobile for emphasis") to document the
choice, otherwise change the rule to column (or remove column-reverse) and, if
you need to maintain visual emphasis while preserving conventional order, keep
flex-direction: column and use the order property on the specific button
elements (e.g., .primary { order: 2 } .cancel { order: 1 }) to control placement
without reversing semantic order.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@index.html`:
- Around line 2428-2697: Small touch targets on mobile: increase the tappable
area for .remove-key-btn, .remove-dpns-username-btn, and
.remove-manage-new-key-btn inside the existing `@media` (max-width: 600px) block
by setting explicit width and height to at least 44px (and adjust
font-size/line-height if needed) so they meet the recommended touch target;
ensure any flex alignment or padding is updated (e.g., maintain align-self or
margin) so layout doesn’t break when these elements grow.

---

Nitpick comments:
In `@index.html`:
- Around line 2459-2462: The CSS rule .devnet-dropdown forces the dropdown to
occupy a full row via flex-basis: 100%, causing inconsistent widths vs
.network-btn; remove the flex-basis: 100% (or replace it with flex: 0 1 auto /
flex-basis: auto) on .devnet-dropdown so it can wrap naturally like .network-btn
and match the visual behaviour of the other network controls.
- Around line 2651-2653: The CSS rule .devnet-modal-actions { flex-direction:
column-reverse; } reverses the vertical stacking so the primary action
(Save/Confirm) appears above Cancel on mobile; if this reversal is intentional,
add an inline comment above the rule explaining the UX rationale (e.g., "Primary
action placed first on mobile for emphasis") to document the choice, otherwise
change the rule to column (or remove column-reverse) and, if you need to
maintain visual emphasis while preserving conventional order, keep
flex-direction: column and use the order property on the specific button
elements (e.g., .primary { order: 2 } .cancel { order: 1 }) to control placement
without reversing semantic order.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ae2891f1-7796-4ba7-a7ca-d03385a3047f

📥 Commits

Reviewing files that changed from the base of the PR and between bf94f56 and b0ff5a1.

📒 Files selected for processing (1)

• index.html