fix(layout): fix Init screen spacing regression from Ionic migration by sahilc0 · Pull Request #592 · arkade-os/wallet

sahilc0 · 2026-05-01T15:58:30Z

Summary

Adds flex: 1 to .content CSS class to fix spacing regression on Init screen
Content was bunched at top with excessive whitespace; now properly distributed

Root cause

The Ionic→Tailwind migration (commit a6118aa) replaced IonContent with a plain <div> but didn't add flex: 1 to make .content expand properly in the PageTransition flex container. This broke the justifyContent: flex-end layout in Init.tsx.

Test plan

Verified Init screen spacing is fixed (content pushed down, proper gradient distribution)
Verified wallet screens still work (auto-login with dev nsec, receive screen)

Summary by CodeRabbit

Style
- Improved content container layout flexibility within flexbox-based layouts so main content better fills available space, reducing unexpected gaps or overflow and improving scrolling/visual balance across screen sizes.

coderabbitai · 2026-05-01T15:58:44Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: c0355de9-5252-48f7-9d47-b71d320cb5b0

📥 Commits

Reviewing files that changed from the base of the PR and between a64ca5b and 81f37dc.

📒 Files selected for processing (1)

src/index.css

✅ Files skipped from review due to trivial changes (1)

src/index.css

Walkthrough

A single-line CSS change: flex: 1 was added to the .content rule in src/index.css, altering the element’s flex growth/shrink behavior within flexbox parents. No behavior outside layout, exports, or public APIs were modified.

Changes

CSS Layout Update

Layer / File(s)	Summary
Data Shape / Selector `src/index.css`	`.content` rule updated to include `flex: 1` (inserts flex sizing declaration).
Styling / Layout Behavior `src/index.css`	Adjusts how `.content` expands/shrinks inside flex containers; other declarations (position, size, overflow, typography) unchanged.
Tests / Docs `N/A`	No test or documentation changes in this diff.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Suggested reviewers

pietro909
bordalix

🚥 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 accurately describes the main change: fixing a spacing regression on the Init screen caused by the Ionic migration, which aligns with the single-line CSS fix adding `flex: 1` to `.content`.
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
Commit unit tests in branch wt-fix-init-spacing-20260501

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

Generate code and open pull requests
Plan features and break down work
Investigate incidents and troubleshoot customer tickets together
Automate recurring tasks and respond to alerts with triggers
Summarize progress and report instantly

Built for teams:

Shared memory across your entire org—no repeating context
Per-thread sandboxes to safely plan and execute work
Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

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

_{Review rate limit: 0/1 reviews remaining, refill in 60 minutes.}

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

cloudflare-workers-and-pages · 2026-05-01T15:59:12Z

Deploying tmp-boltz-upstream-mainnet-arkade-wallet with Cloudflare Pages

Latest commit:	`81f37dc`
Status:	✅ Deploy successful!
Preview URL:	https://21dfa5bf.tmp-boltz-upstream-mainnet-arkade-wallet.pages.dev
Branch Preview URL:	https://wt-fix-init-spacing-20260501.tmp-boltz-upstream-mainnet-arkade-wallet.pages.dev

View logs

cloudflare-workers-and-pages · 2026-05-01T15:59:12Z

Deploying wallet-bitcoin with Cloudflare Pages

Latest commit:	`81f37dc`
Status:	✅ Deploy successful!
Preview URL:	https://f044fef0.wallet-bitcoin.pages.dev
Branch Preview URL:	https://wt-fix-init-spacing-20260501.wallet-bitcoin.pages.dev

View logs

cloudflare-workers-and-pages · 2026-05-01T15:59:20Z

Deploying wallet-mutinynet with Cloudflare Pages

Latest commit:	`81f37dc`
Status:	✅ Deploy successful!
Preview URL:	https://061b9931.arkade-wallet.pages.dev
Branch Preview URL:	https://wt-fix-init-spacing-20260501.arkade-wallet.pages.dev

View logs

The Ionic→Tailwind migration replaced IonContent with a plain div but didn't add flex: 1 to make .content expand in the PageTransition flex container. This caused the Init screen content to bunch at the top instead of respecting justifyContent: flex-end. Adding flex: 1 allows .content to fill available space, fixing the spacing on the welcome screen.

arkanaai

Arkana Code Review — `fix(layout): fix Init screen spacing regression`

Scope: CSS-only, single file (src/index.css). Not protocol-critical.

Issue: indentation regression

src/index.css:318 — overflow-y: auto; lost its 2-space indent. The diff shows the old line had leading spaces but the replacement doesn't:

-  overflow-y: auto;
+overflow-y: auto;

This is a formatting bug — the property should remain indented to match all other properties in the .content block. Please fix before merge.

The actual change (`flex: 1`) looks correct

Adding flex: 1 to .content is the right fix for making it expand inside a flex parent (PageTransition). The PR description clearly explains the root cause (Ionic→Tailwind migration dropped IonContent flex behavior). No functional concerns.

Verdict

Fix the whitespace on L318 and this is good to go. One-line nit, otherwise 👍.

bordalix · 2026-05-04T16:50:43Z

@sahilc0 it doesn't work on my computer:

But my PR works, can you test both please?
#601

sahilc0 · 2026-05-06T20:19:51Z

@bordalix do i still need to test this? or is this fixed by your other one

sahilc0 · 2026-05-12T15:35:02Z

fixed already

sahilc0 requested review from bordalix and pietro909 May 1, 2026 15:58

sahilc0 force-pushed the wt-fix-init-spacing-20260501 branch from a64ca5b to 4724358 Compare May 1, 2026 16:06

arkanaai Bot requested changes May 1, 2026

View reviewed changes

fix(layout): restore content overflow indentation

81f37dc

sahilc0 closed this May 12, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(layout): fix Init screen spacing regression from Ionic migration#592

fix(layout): fix Init screen spacing regression from Ionic migration#592
sahilc0 wants to merge 2 commits into
masterfrom
wt-fix-init-spacing-20260501

sahilc0 commented May 1, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented May 1, 2026 •

edited

Loading

Uh oh!

cloudflare-workers-and-pages Bot commented May 1, 2026 •

edited

Loading

Uh oh!

cloudflare-workers-and-pages Bot commented May 1, 2026 •

edited

Loading

Uh oh!

cloudflare-workers-and-pages Bot commented May 1, 2026 •

edited

Loading

Uh oh!

arkanaai Bot left a comment

Uh oh!

bordalix commented May 4, 2026

Uh oh!

sahilc0 commented May 6, 2026

Uh oh!

sahilc0 commented May 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

sahilc0 commented May 1, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Root cause

Test plan

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented May 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

Uh oh!

cloudflare-workers-and-pages Bot commented May 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying tmp-boltz-upstream-mainnet-arkade-wallet with Cloudflare Pages

Uh oh!

cloudflare-workers-and-pages Bot commented May 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying wallet-bitcoin with Cloudflare Pages

Uh oh!

cloudflare-workers-and-pages Bot commented May 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying wallet-mutinynet with Cloudflare Pages

Uh oh!

arkanaai Bot left a comment

Choose a reason for hiding this comment

Arkana Code Review — fix(layout): fix Init screen spacing regression

Issue: indentation regression

The actual change (flex: 1) looks correct

Verdict

Uh oh!

bordalix commented May 4, 2026

Uh oh!

sahilc0 commented May 6, 2026

Uh oh!

sahilc0 commented May 12, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

sahilc0 commented May 1, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 1, 2026 •

edited

Loading

cloudflare-workers-and-pages Bot commented May 1, 2026 •

edited

Loading

cloudflare-workers-and-pages Bot commented May 1, 2026 •

edited

Loading

cloudflare-workers-and-pages Bot commented May 1, 2026 •

edited

Loading

Arkana Code Review — `fix(layout): fix Init screen spacing regression`

The actual change (`flex: 1`) looks correct