Skip to content

fix(#3637): adjust the checkbox on table header row to prevent height…#3719

Merged
chrisolsen merged 1 commit intodevfrom
mxsoco/3637-header-row-checkbox
Apr 7, 2026
Merged

fix(#3637): adjust the checkbox on table header row to prevent height…#3719
chrisolsen merged 1 commit intodevfrom
mxsoco/3637-header-row-checkbox

Conversation

@mxsoco
Copy link
Copy Markdown
Collaborator

@mxsoco mxsoco commented Mar 31, 2026

Before (the change)

Height increases with the checkbox added to the header row.
Screenshot 2026-03-31 110820

After (the change)

Along with applying an existing token to the top padding of the checkbox, I added new token to the bottom padding of the checkbox on header so it lines up with the rest of the header row.
Screenshot 2026-03-31 110831
Screenshot 2026-03-31 110839

Linked Design Token PR: #3637

@mxsoco mxsoco linked an issue Mar 31, 2026 that may be closed by this pull request
@Spark450 Spark450 added the P3 Priority 3 (nice to have): Valuable, but safe to release after launch. label Mar 31, 2026
@mxsoco mxsoco force-pushed the mxsoco/3637-header-row-checkbox branch from ac6d4af to ebe9991 Compare March 31, 2026 19:35
Copy link
Copy Markdown
Collaborator

@bdfranck bdfranck left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mxsoco Good catch on the th.goa-table-cell--checkbox selector! That solves the padding issue.

Since it's contained in a table cell, we can use vertical-align: middle like they did in https://github.com/GovAlta/goa-workspace-playground.

Image

@mxsoco mxsoco requested a review from bdfranck March 31, 2026 22:48
@mxsoco mxsoco force-pushed the mxsoco/3637-header-row-checkbox branch from 589bbbd to ef2d6e2 Compare March 31, 2026 22:53
Copy link
Copy Markdown
Collaborator

@bdfranck bdfranck left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tested the latest changes...

  • ✅ The checkbox is vertically aligned in the table header
Image

Looks good to me! 👍

@mxsoco mxsoco force-pushed the mxsoco/3637-header-row-checkbox branch from ef2d6e2 to ec7298e Compare April 2, 2026 19:01
@chrisolsen
Copy link
Copy Markdown
Collaborator

@mxsoco rebase this and I will merge it.

@mxsoco mxsoco force-pushed the mxsoco/3637-header-row-checkbox branch from ec7298e to 8caabbd Compare April 7, 2026 22:03
@mxsoco
Copy link
Copy Markdown
Collaborator Author

mxsoco commented Apr 7, 2026

@mxsoco rebase this and I will merge it.

Done!

@chrisolsen chrisolsen merged commit f0d8fa0 into dev Apr 7, 2026
4 of 5 checks passed
@chrisolsen chrisolsen deleted the mxsoco/3637-header-row-checkbox branch April 7, 2026 22:18
@chrisolsen
Copy link
Copy Markdown
Collaborator

🎉 This PR is included in version 2.0.0-dev.6 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

P3 Priority 3 (nice to have): Valuable, but safe to release after launch. released on @dev

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Table: Header row height increases when checkbox is present

4 participants