Skip to content

Conversation

@facumenzella
Copy link
Member

@facumenzella facumenzella commented Jan 15, 2026

Summary

Fixes gradient overlays on background images appearing more aggressive on Android compared to the web builder.

Problem

When a paywall has a background image with a color overlay (gradient), the overlay was being applied via the underlay() modifier which draws within the image's bounds. Since images are often aspect-fit and smaller than the viewport, a gradient defined as "66% white from bottom" would compress into that smaller area, making much more of the screen appear white.

Web builder: Overlay covers 100% of viewport → gradient spread across full screen
Android (before): Overlay only covered image bounds → gradient compressed into smaller area

Solution

Background.kt

  • Removed colorOverlay application from the image background modifier
  • Added alignment = TopCenter to position the image at the top

ViewWithVideoBackground.kt

  • Extended WithOptionalVideoBackground to also handle BackgroundStyle.Image with overlays
  • Renders overlay as a separate Box layer using .matchParentSize() to fill the full container
  • Overlay renders between background image and content (correct Z-order)
Android Dashboard
Screenshot 2026-01-15 at 10 37 51 Screenshot 2026-01-15 at 10 46 56

@facumenzella facumenzella requested a review from vegaro January 15, 2026 09:47
@facumenzella facumenzella requested a review from a team as a code owner January 15, 2026 09:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants