fix(MWPW-194198): allow pbu-left-section to shrink on viewport resize#764
Open
sanjayms01 wants to merge 2 commits intostagefrom
Open
fix(MWPW-194198): allow pbu-left-section to shrink on viewport resize#764sanjayms01 wants to merge 2 commits intostagefrom
sanjayms01 wants to merge 2 commits intostagefrom
Conversation
The left copy and upload container was not compressing horizontally as the browser window narrowed. Root cause: flex-shrink: 0 on .pbu-left-section prevented the flex child from shrinking below its intrinsic content size. Fix: - Change flex-shrink: 0 -> flex-shrink: 1 so the column can compress - Add min-width: 0 to allow shrinking below intrinsic content width The Figma spec (node 8821:45487) uses grow: 1 (fluid) at all breakpoints (1440-1920px) with no fixed minimum, confirming proportional scaling is the intended behaviour. Fixes: MWPW-194198
…ing prompt-bar-style pattern The previous fix (flex-shrink: 1 + min-width: 0) was insufficient. The correct pattern, as used by the prompt-bar-style widget, is to use CSS Grid with minmax(0, 1fr) on the left column. Before: .pbu-main used display:flex with flex-shrink:0 on .pbu-left-section After: .pbu-main uses display:grid with grid-template-columns: minmax(0, 1fr) auto This mirrors exactly how .unity-prompt-bar-style .unity-slf-main handles its fluid left column: grid-template-columns: minmax(0, 1fr) 508px With grid, the left column (.pbu-left-section) is now a grid item constrained by minmax(0, 1fr) — it grows to fill available space but can shrink all the way to 0, preventing any overflow. The right column (.pbu-right-section) is sized by auto, taking only its intrinsic width. The mobile breakpoint (<=599px) reverts to display:flex with flex-direction:column so the existing stacked mobile layout is unaffected. Fixes: MWPW-194198
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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 MWPW-194198 — the left copy and upload container (
.pbu-left-section) was not shrinking horizontally as the browser viewport narrowed on the Firefly image-to-video marquee.Root Cause
flex-shrink: 0on.pbu-left-sectionprevented the flex child from compressing below its intrinsic content size — a standard flexbox constraint. Without explicit permission to shrink, the column held its natural width regardless of available space.Fix
In
unitylibs/core/widgets/prompt-bar-upload/prompt-bar-upload.css:flex-shrink01min-width0Changing
flex-shrinkto1allows the column to compress, and addingmin-width: 0permits shrinking below intrinsic content width — both required for fluid flexbox behaviour.Figma Spec Alignment
Node
8821:45487(Screensizes) specifiesgrow: 1(fluid) at all breakpoints (1440–1920px) with no fixed minimum, confirming the left column is designed to scale proportionally.Test Checklist
flex-direction: columnrule)References
minmax(0, 1fr)inprompt-bar-style.css