Repository navigation
fix(team): stop fourth-line glyph leak under clamped bios - #155
Conversation
Present-team bios used -webkit-line-clamp: 3 without a hard height cap, so subpixel tops of a fourth line painted above the icon row. Cap max-height at three line boxes, mirror the four-line collaborator clamp, and swap the raw 13px bio size for --t-small.
There was a problem hiding this comment.
Copilot was unable to review this pull request because the user who requested the review has insufficient remaining quota.
An organization owner can choose the repository organization as the billing source for reviews requested by members with a paid Copilot license. Learn about Copilot code review billing.
|
comphy-bot review status for Review completed for this exact pull request head. |
comphy-bot
left a comment
There was a problem hiding this comment.
Review: bio clamp fix
Reviewed all changes in assets/css/team-v2.css at eab0190c11fb7ce621bb4462a0e328fbdf03d1b2, including the formatting-only hunks.
No P0/P1 findings. The three-line height cap matches the existing 1.55 line height, collaborators receive the corresponding four-line cap, and the alumni override explicitly removes the inherited cap. The font-size token change keeps those em-based caps proportional. No new scripting, permissions, dependencies, or interactive behavior is introduced.
Verification: exact-head build and PR-hygiene checks passed; patch-structure checks passed. No peer findings were present in the collected review threads. CodeRabbit was still pending at collection time. I did not execute PR code or independently run browser screenshots; the visual before/after evidence and local test results are author-provided. No automated regression test was added in this diff; future visual coverage should exercise present/collaborator/alumni bios at narrow and wide widths with enlarged text.
Description
On
/team/at 390px (light and dark), Present-team tiles clamp bios to three lines with an ellipsis, but the tops of a fourth line still painted between the ellipsis and the icon row..t-member__bionow caps height at exactly three line boxes (max-height: calc(3 * 1.55em)withoverflow: hidden), collaborators get the matching four-line cap, and the raw13pxbio size is replaced withvar(--t-small). Markup stays a plain<p>with text from_data/team.yml(no block children defeating the clamp). Uneven card tops on mobile are CSS grid row packing from different name/role wrap heights, not this clamp rule, so they are left alone.Type of Change
Changes Made
.t-member__bioatmax-height: calc(3 * 1.55em)while keeping-webkit-line-clamp: 3andoverflow: hidden.#collaborators .t-member__bioat four lines; unset height for alumni.font-size: 13pxon.t-member__biowithvar(--t-small).<p class="t-member__bio">.Testing Done
bundle exec jekyll serve./scripts/lint-check.sh,npm test(215 passed),npm run lint, and./scripts/build.shpassed. Playwright at 390px and 1440px, light and dark: before shots from production show a fourth-line ink band under the ellipsis; after shots on the local build show a clean gap above the icons. Pixel row-ink analysis confirms the leak band is gone. Desktop layout unchanged aside from the--t-smalltoken swap (14px vs former 13px).Screenshots
/team/before (production)Bio edge crop before / after (390px)
/team/after (local build with fix)Related Issues
No linked issue. Design audit 26 Oct 2026, finding 1 (bio clamp glyph leak on
/team/at 390px).Checklist
Additional Notes
Design-system tokens only (
--t-small, existing spacing elsewhere). No raw hex or px on the bio rule. Uneven card tops are unrelated to the clamp height leak and were not changed.Summary by CodeRabbit