fix: alignment for pay stub text in table on payroll overview #868
Conversation
| > | ||
| <DownloadIcon /> | ||
| </ButtonIcon> | ||
| <div className={styles.paystubIconWrapper}> |
There was a problem hiding this comment.
I wonder if we need more generalized approach for these buttons... also, could this class name be applied to ButtonIcon directly, without a wrapper?
There was a problem hiding this comment.
I did make a change to support consistent action buttons in that dataview pr. Might be worth a look even if we don't merge that one.
There was a problem hiding this comment.
Updated the PR based on your design changes @aaronlee777
krisxcrash
force-pushed
the
kw/fix/SDK-198
branch
from
d705b05 to
eedf43e
Compare
serikjensen
left a comment
serikjensen
left a comment
There was a problem hiding this comment.
Looking good! just a couple of things
| @include container-query(map-get($global-breakpoints, 'small')) { | ||
| justify-content: flex-end; | ||
| } |
There was a problem hiding this comment.
Looks like this is only applied to the desktop view, could we remove this conditional container query styling?
| ] | ||
|
|
||
| const actions = ( | ||
| <ActionsLayout justifyContent="end"> |
There was a problem hiding this comment.
Are we sure we want these buttons filling the container on desktop? Seems on desktop we'd want it to have the previous behavior? Maybe worth checking in with design on that?
krisxcrash
force-pushed
the
kw/fix/SDK-198
branch
from
8ca9db5 to
94b5b5f
Compare
krisxcrash
force-pushed
the
kw/fix/SDK-198
branch
from
105e0c0 to
6fc0cd6
Compare
| <ButtonIcon | ||
| aria-label={t('downloadPaystubLabel')} | ||
| variant="tertiary" | ||
| onClick={() => { | ||
| if (employeeCompensations.employeeUuid) { | ||
| onPaystubDownload(employeeCompensations.employeeUuid) | ||
| } | ||
| }} | ||
| > | ||
| <DownloadIcon /> | ||
| </ButtonIcon> |
There was a problem hiding this comment.
Nit: we could probs break this button and the one below into a single variable so that it can get maintained in a single place so if it gets updated it gets update on both
Aligned the paystub download icon in the Payroll Overview table to improve visual consistency across different screen sizes.
SDK-198
Changes
Implementation
.paystubIconWrapperCSS class to handle responsive alignmentcontainer-querymixin with thesmallbreakpoint (40em) to match codebase patternsScreen.Recording.2025-12-16.at.1.46.37.PM.mov