Fix steering-committee card misalignment (drop 1px border) (#808)#816
Merged
Conversation
Member cards (.sc-card) had `border: 1px solid transparent` while title cards (.sc-title-card) had `border: 0`. With `box-sizing: border-box` both cards measure the same outer size — so getBoundingClientRect reports them aligned — but absolutely-positioned children (.sc-card-photo, .sc-card-img, .sc-cbar) are painted from the *padding* box, i.e. 1px inside the border. So on photo cards the image and the team header bar sat 1px lower and smaller than on title cards: photos looked shorter with a gap above them, and the connecting header bars didn't line up into one continuous row. Removing the border makes the padding box equal the border box, so photos fill flush to the card top and the header bars align across each team. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
|
👍 All image files/references (if any) are in webp format, in line with our policy. |
Contributor
✅ Spell Check PassedNo spell-checkable files were changed in this PR. |
Contributor
Author
|
✅ Staging Deployment Status This PR has been successfully deployed to staging as part of an aggregated deployment. Deployed at: 2026-06-25 10:12:12 UTC The staging site shows the combined state of all compatible open PRs. |
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.
Follow-up to #815. On the live page the member photo cards rendered slightly shorter and lower than the team title cards, with a gap above each photo, and the colored team header bars did not line up into one continuous row.
Root cause
.sc-card(member cards) hadborder: 1px solid transparent;.sc-title-cardhadborder: 0. Withbox-sizing: border-boxboth cards measure the same outer size (sogetBoundingClientRectreports them as aligned), but their absolutely-positioned children —.sc-card-photo,.sc-card-img,.sc-cbar— are painted from the padding box, 1px inside the border. So every photo and header bar on a member card sat 1px down and 2px smaller than on the title cards. On Retina that's 2px, and against the full-bleed title cards it reads as a clear height gap and a broken header line.Fix
Remove the border from
.sc-card(one line). The padding box now equals the border box, so photos fill flush to the top and the header bars align continuously across each team.Verified in a local Hugo build (real academic theme) at 1× and 2×: title cards, photo cards, and all header bars share the same top edge; photos fill to the card top.
🤖 Generated with Claude Code