fix: limit announcement modal height (#307) by kushbosamiya · Pull Request #312 · arkade-os/wallet

kushbosamiya · 2026-01-26T22:52:13Z

Fixes #307

Fixes an issue where the blurred section overlaps the component screen on mobile when users zoom in, hiding the CTA buttons.

What’s changed :

Limit modal height to the viewport
Make the content section scroll when it overflows
Keep CTA buttons always visible

Summary by CodeRabbit

Release Notes

New Features
- Layout components now support custom style properties for greater flexibility.
- Modals render with enhanced positioning, layering system, and improved overflow handling for content-heavy dialogs.
Improvements
- Refined visual spacing and alignment across UI components for better visual presentation.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

coderabbitai · 2026-01-26T22:52:34Z

Walkthrough

The pull request modifies three component files to address announcement modal viewport constraints. It adjusts Announcement icon styling, adds optional style customization to FlexCol, and significantly restructures Modal to use React Portal with height constraints, adjusted z-indices, and scrollable overflow behavior for content exceeding viewport height.

Changes

Cohort / File(s)	Summary
Icon & Styling Adjustments `src/components/Announcement.tsx`	Width calculation updated from `100%` to `calc(100% + 2rem)` and margin property expanded from `marginTop: '-1rem'` to `margin: '-1rem -1rem 0 -1rem'` for horizontal and vertical spacing adjustments.
FlexCol Props Enhancement `src/components/FlexCol.tsx`	Added optional `style?: React.CSSProperties` prop to interface; renamed internal destructuring reference from `style` to `customStyle` and merged external styles into computed style object for external override capability.
Modal Portal & Positioning Restructure `src/components/Modal.tsx`	Integrated React Portal via `createPortal` to render modal into `document.body`. Adjusted z-indices (overlay: 21→80, container: 22→90, inner: new 95). Changed positioning from `absolute` to `fixed`. Added inner content wrapper with className `'modal-inner'`, `maxHeight: calc(100vh - 4rem)`, `overflow-y: auto`, and `pointerEvents: auto` to enable scrollable overflow while preserving overlay click-through behavior.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

blured modals #270: Modifies Modal.tsx with related positioning, z-index, and pointer-events adjustments with similar layered overlay/container structural approach.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title 'fix: limit announcement modal height' directly and clearly describes the main change—limiting modal height to viewport.
Linked Issues check	✅ Passed	Code changes successfully address issue `#307` requirements: Modal.tsx implements viewport height limiting with scrollable overflow and Portal rendering; FlexCol and Announcement.tsx provide supporting adjustments.
Out of Scope Changes check	✅ Passed	Changes to Announcement.tsx, FlexCol.tsx, and Modal.tsx are all directly scoped to fixing the announcement modal height issue and supporting the viewport constraint objective.

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

✨ Finishing touches

📝 Generate docstrings

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

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

coderabbitai

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In @.env:
- Line 2: Add a trailing newline to the .env file so it ends with a blank line;
update the file containing the line "GENERATE_SOURCEMAP=false" to ensure a final
newline character is present (POSIX-compliant end-of-file newline).

coderabbitai · 2026-01-26T22:57:31Z

@@ -1,2 +1,2 @@
 CI=false
-GENERATE_SOURCEMAP=false
+GENERATE_SOURCEMAP=false


⚠️ Potential issue | 🟡 Minor

Add a trailing newline at the end of the file.

Per static analysis, the file is missing a blank line at the end. Many tools and POSIX conventions expect files to end with a newline.

Proposed fix

CI=false -GENERATE_SOURCEMAP=false +GENERATE_SOURCEMAP=false +

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

GENERATE_SOURCEMAP=false

GENERATE_SOURCEMAP=false

🧰 Tools

🪛 dotenv-linter (4.0.0)

[warning] 2-2: [EndingBlankLine] No blank line at the end of the file

(EndingBlankLine)

🤖 Prompt for AI Agents

In @.env at line 2, Add a trailing newline to the .env file so it ends with a blank line; update the file containing the line "GENERATE_SOURCEMAP=false" to ensure a final newline character is present (POSIX-compliant end-of-file newline).

pietro909 · 2026-01-27T04:30:59Z

Thank you for your contribution!

The following files seem unrelated to the UI fix, can you please roll them back to simplify the review process?

.env
public/wallet-service-worker.mjs
src/index.css
package-lock.json
pnpm-workspace.yaml

bordalix · 2026-01-27T06:43:08Z

Please add link to related issue in PR description:
#307

kushbosamiya · 2026-01-28T21:52:31Z

@bordalix Please review the flagged PR when you have time and let me know if there’s anything I should update. Happy to contribute

bordalix

concept NACK

Instead of scrolling the whole modal content (see attached video) only the middle section (the 3 bullet points) should scroll.

Screen.Recording.2026-02-02.at.14.25.44.mov

bordalix · 2026-02-02T14:27:06Z

All the changes is this file seem not related to this PR.
Please remove.

bordalix · 2026-02-02T14:28:30Z

    top: '0',
    left: '0',
-    zIndex: 22, // Higher than overlay
+    zIndex: 90,   


Suggested change

zIndex: 90,

zIndex: 90, // Higher than overlay

keep comments

bordalix · 2026-02-02T14:28:58Z

-    position: 'absolute' as 'absolute',
-    pointerEvents: 'none' as 'none', // Allow clicks to pass through to children
+    position: 'fixed' as 'fixed',
+    pointerEvents: 'none' as 'none', 


Suggested change

pointerEvents: 'none' as 'none',

pointerEvents: 'none' as 'none', // Allow clicks to pass through to children

keep comments

bordalix · 2026-02-02T14:29:25Z

    border: '1px solid var(--dark10)',
    backgroundColor: 'var(--ion-background-color)',
-    pointerEvents: 'auto' as 'auto', // Enable clicks on the modal content
+    pointerEvents: 'auto' as 'auto', 


Suggested change

pointerEvents: 'auto' as 'auto',

pointerEvents: 'auto' as 'auto', // Enable clicks on the modal content

keep comments

bordalix · 2026-02-02T14:30:34Z

  }, [])

-  return (
+  return createPortal(


We need to evaluate the usage of createPortal when the app is used with expo (i.e. mobile apps)

arkanaai · 2026-03-16T15:37:45Z

👋 Hey @kushbosamiya — @bordalix requested changes on this PR back on February 2nd and it's been quiet since. Is this still something you plan to address, or should we close it?

arkanaai · 2026-03-19T10:02:17Z

Hey @kushbosamiya — just checking in 👋 @bordalix requested changes a few days ago. Any progress or questions on the feedback? Happy to help unblock if needed.

arkanaai · 2026-03-19T10:14:23Z

🔍 Arkana PR Review

PR: wallet#312 — fix: limit announcement modal height (#307)
Author: kushbosamiya | Files: 3 (Announcement.tsx, FlexCol.tsx, Modal.tsx)

Changes

Modal.tsx — Major improvement: uses createPortal(document.body) instead of inline rendering, switches from position: absolute to position: fixed, adds maxHeight: calc(100vh - 4rem) with overflowY: auto for scroll. Z-index bumped from 21/22 to 80/90/95.
Announcement.tsx — Fixes icon gradient banner to span full modal width using negative margins (calc(100% + 2rem), margin: -1rem -1rem 0 -1rem).
FlexCol.tsx — Adds optional style prop for custom CSS overrides, spread into computed styles.

Findings

✅ Portal approach is correct. Using createPortal to document.body eliminates stacking context issues that caused the original bug (modal trapped inside parent overflow).

⚠️ Minor: z-index escalation (nit). Jumping to 80/90/95 is fine now but could clash if other components (e.g., Ionic overlays, which default to z-index 1000+) are layered. Consider documenting the z-index scale or using CSS variables. Not blocking.

⚠️ Minor: overflowY: auto on inner container. This correctly enables scroll when content exceeds viewport. However, the pointerEvents: none on the container div means clicks on the overlay area won't dismiss the modal. If that's intentional (modal requires explicit close), fine. Just noting the UX pattern.

✅ FlexCol style prop — clean addition. Spread is at the end so custom styles properly override computed ones.

✅ No security concerns. No user input handling changes.

Verdict: LGTM — solid fix for the mobile overflow issue. The portal pattern is the right approach.

arkanaai · 2026-03-24T15:56:26Z

Hey @kushbosamiya — this PR has had changes requested for about 7 weeks (bordalix's review on Feb 2). Still planning to address the feedback? Happy to help if you're stuck on anything.

coderabbitai bot reviewed Jan 26, 2026

View reviewed changes

fix: limit announcement modal height (arkade-os#307)

4ac1fc8

kushbosamiya force-pushed the fix/limits-announcement-modal branch from b1140dd to 4ac1fc8 Compare January 27, 2026 16:19

Kukks requested a review from bordalix February 1, 2026 22:14

bordalix requested changes Feb 2, 2026

View reviewed changes

	pointerEvents: 'none' as 'none',
	pointerEvents: 'none' as 'none', // Allow clicks to pass through to children

	pointerEvents: 'auto' as 'auto',
	pointerEvents: 'auto' as 'auto', // Enable clicks on the modal content

Conversation

kushbosamiya commented Jan 26, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Release Notes

Uh oh!

coderabbitai bot commented Jan 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Jan 26, 2026

Choose a reason for hiding this comment

Uh oh!

pietro909 commented Jan 27, 2026

Uh oh!

bordalix commented Jan 27, 2026

Uh oh!

kushbosamiya commented Jan 28, 2026

Uh oh!

bordalix left a comment

Choose a reason for hiding this comment

Uh oh!

bordalix Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

bordalix Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

bordalix Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

bordalix Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

bordalix Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

arkanaai bot commented Mar 16, 2026

Uh oh!

arkanaai bot commented Mar 19, 2026

Uh oh!

arkanaai bot commented Mar 19, 2026

🔍 Arkana PR Review

Changes

Findings

Uh oh!

arkanaai bot commented Mar 24, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

kushbosamiya commented Jan 26, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jan 26, 2026 •

edited

Loading