fix(SDK-1172): fix reflow failure on employee name at 320px viewport - #2754
Merged
Merged
Conversation
Flex defaults alignItems to flex-start, so the column wrapping the employee name/gross-pay never got a width from its container -- the heading sized to its own unwrapped content instead of the available space. Combined with Heading never setting overflow-wrap, a name containing one long unbroken token overflowed the viewport instead of reflowing (WCAG 1.4.10). Also apply the same fix to UNSTABLE_PayrollEditEmployee, which had no responsive handling at all for its header row. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
dmortal
marked this pull request as ready for review
September 11, 2026 15:03
serikjensen
approved these changes
Sep 11, 2026
# Conflicts: # src/components/Payroll/UNSTABLE_PayrollEditEmployee/UNSTABLE_PayrollEditEmployee.tsx
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
2 participants
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
At a 320px viewport,
Flex flexDirection="column"defaultsalignItemstoflex-start, so the column wrapping the employee name/gross-pay never gets a width from its container — the heading sizes to its own unwrapped content instead of the available space. Combined withHeadingnever settingoverflow-wrap, a name containing one long unbroken token overflows the viewport instead of wrapping, failing WCAG 1.4.10 Reflow on the Payroll "Edit Employee" screen.Changes
Heading: addoverflow-wrap: break-wordso an unbreakable token wraps instead of overflowing once its box is width-constrained.PayrollEditEmployeePresentation: setalignItems="stretch"on the name/gross-pay column so it takes the available width instead of sizing to content.UNSTABLE_PayrollEditEmployee(alpha scaffold behindpayrollRegularRateOfPay): apply the samealignItems="stretch"fix, and add the missinguseContainerBreakpointswiring so Cancel/Save stack below the form on narrow viewports instead of sharing an unconditional row with the name.Related
Testing
npm run test -- --run src/components/Payroll— 726 passed, 1 pre-existing expected fail (unrelated)sdk-appat a true 320px container width (/payroll/PayrollEditEmployee): a name with one long unbroken token now wraps across lines instead of overflowing the viewport; realistic names (e.g. "Ibrahim Castellano") are unaffected.