Fix gradient overlay to cover full viewport instead of image bounds #3017
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.
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.ktcolorOverlayapplication from the image background modifieralignment = TopCenterto position the image at the topViewWithVideoBackground.ktWithOptionalVideoBackgroundto also handleBackgroundStyle.Imagewith overlaysBoxlayer using.matchParentSize()to fill the full container