Skip to content

fix(team): stop fourth-line glyph leak under clamped bios - #155

Merged
VatsalSy merged 1 commit into
mainfrom
rayleigh-cloud/team-bio-line-clamp-3f9e
Oct 26, 2026
Merged

VatsalSy merged 1 commit into
mainfrom
rayleigh-cloud/team-bio-line-clamp-3f9e

Conversation

@VatsalSy

@VatsalSy VatsalSy commented Oct 26, 2026 •

Copy link
Copy Markdown
Member

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__bio now caps height at exactly three line boxes (max-height: calc(3 * 1.55em) with overflow: hidden), collaborators get the matching four-line cap, and the raw 13px bio size is replaced with var(--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

  • Bug fix
  • New feature
  • Content update (Team/Publication)
  • Documentation update
  • Other (please describe)

Changes Made

  • Cap .t-member__bio at max-height: calc(3 * 1.55em) while keeping -webkit-line-clamp: 3 and overflow: hidden.
  • Cap #collaborators .t-member__bio at four lines; unset height for alumni.
  • Replace raw font-size: 13px on .t-member__bio with var(--t-small).
  • Confirmed bio markup is text-only inside <p class="t-member__bio">.

Testing Done

  • Tested locally using bundle exec jekyll serve
  • Checked all links and references
  • Verified content formatting
  • Cross-browser testing (if UI changes)

./scripts/lint-check.sh, npm test (215 passed), npm run lint, and ./scripts/build.sh passed. 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-small token swap (14px vs former 13px).

Screenshots

/team/ before (production)

Team present grid at 390px, light, before
Team present grid at 390px, dark, before
Team present grid at 1440px, light, before
Team present grid at 1440px, dark, before

Bio edge crop before / after (390px)

Ayush bio edge at 390px, light, before
Ayush bio edge at 390px, light, after
Ayush bio edge at 390px, dark, before
Ayush bio edge at 390px, dark, after

/team/ after (local build with fix)

Team present grid at 390px, light, after
Team present grid at 390px, dark, after
Team present grid at 1440px, light, after
Team present grid at 1440px, dark, after

Related Issues

No linked issue. Design audit 26 Oct 2026, finding 1 (bio clamp glyph leak on /team/ at 390px).

Checklist

  • Code follows the project's style guidelines
  • All links are valid and working
  • Images are optimized and properly sized
  • Content is properly formatted
  • Documentation has been updated (if needed)
  • Changes have been tested locally
  • This PR is single-purpose and does not mix dependency/security updates with unrelated formatting or content cleanups
  • All review threads are resolved or have an explicit won't-fix / follow-up disposition before merge
  • Every accepted review finding that identifies a reproducible bug or edge case either lands a regression test in this PR or has a linked follow-up issue referenced in the thread resolution

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.

Open in Web Open in Cursor 

Summary by CodeRabbit

  • Updates
    • Member bios are limited to three lines by default and four lines for collaborators; alumni bios remain uncapped.
    • Photos are hidden for collaborators and alumni.
    • Other roster, photo, link, map and thesis-link styling remains visually unchanged.

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.
Copilot AI balanced review requested due to automatic review settings October 26, 2026 11:02

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

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.

@coderabbitai

coderabbitai Bot commented Oct 26, 2026 •

Copy link
Copy Markdown
Contributor

Review in Change Stack →

No actionable comments were generated in the recent review.

Recent review info
Run configuration
  • Source mode: Auto
  • Repository: Unavailable
  • Branch: Unavailable
  • File: No configuration file from this repository applied
  • Commit: Unavailable
  • Layers: Organization UI
  • Review profile: CHILL
  • Plan: Essentials
  • Run ID: 1585ac11-0036-4a1f-9010-5620a34543c1
Commits

Reviewing files that changed from the base of the PR and between e03c766 and eab0190.

Files selected for processing: 1
  • assets/css/team-v2.css

Included review availability: This review used your included allowance. 2 included reviews remain after this review. Your included PR review attempts over the past 7 days set your current allowance at 5 reviews per hour.

Recent review details
Context from checks skipped due to timeout: 1
  • GitHub Check: build
Additional context used
Code guidelines: 1
AGENTS.md — auto-discovered
Path-based instructions: 2
Source excerpt: Mobile-first CSS; min-width media queries.

CodeRabbit inference engine (AGENTS.md)

Files:

  • assets/css/team-v2.css
Source excerpt: ALWAYS prefer editing existing files over creating new ones.

CodeRabbit inference engine (AGENTS.md)

Files:

  • assets/css/team-v2.css
Additional comments: 1
assets/css/team-v2.css: 1

187-187: LGTM!

Also applies to: 194-196, 294-295, 307-310, 314-318

Walkthrough

The team stylesheet now applies bio height limits by member type and hides collaborator photos. Other roster, map, photo, and thesis-link rules are reformatted without styling changes.

Changes: Team presentation

Layer / File(s) Summary
Member bio and photo presentation
assets/css/team-v2.css
Member bios have a three-line maximum height by default and a four-line maximum for collaborators. Alumni bios have no maximum height. The photo-hiding rule now applies to collaborators as well as alumni. Other CSS rules are reformatted without styling changes.

Priority: Low

Estimated code review effort: 2 (Simple) | ~8 minutes

Change: Bug fix

Merge Risk: Minimal · up to eab01

No actionable merge-blocking risk was found in the stylesheet changes.

Pre-merge checks: Passed 5
Check name Status Explanation
Description Check Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check Passed The title clearly and concisely describes the main fix: preventing fourth-line glyphs from leaking below clamped team bios.
Docstring Coverage Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0…
Linked Issues check Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check Passed Check skipped because no linked issues were found for this pull request.
Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 0 files. (1 skipped: 1 unsupported.)

Finishing Touches
✨ Simplify code
  • Commit to this branch
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Comment @coderabbitai help to get the list of available commands.

@comphy-bot

comphy-bot commented Oct 26, 2026 •

Copy link
Copy Markdown
Member

comphy-bot review status for comphy-lab/comphy-lab.github.io#155 at eab0190c: completed

Review completed for this exact pull request head.

@comphy-bot
comphy-bot self-requested a review October 26, 2026 11:05

@comphy-bot comphy-bot left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

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.

@VatsalSy
VatsalSy merged commit e887865 into main Oct 26, 2026
4 checks passed
@VatsalSy
VatsalSy deleted the rayleigh-cloud/team-bio-line-clamp-3f9e branch October 26, 2026 11:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants