Fix research figure aspect ratio distortion by VatsalSy · Pull Request #157 · comphy-lab/comphy-lab.github.io

VatsalSy · 2026-10-29T15:49:56Z

Description

On /research/, non-badge figures were vertically stretched: column width was capped (max-width: 100%) while HTML height stayed at the file’s natural pixel height.

Root cause:

_plugins/responsive_images.rb apply_dimensions treated “width present without height” as “missing both”, overwriting author width="75%" with natural pixel width and injecting natural height.
.research-content img:not([src*="img.shields.io"]) in research-v2.css lacked height: auto, so the height attribute won.

Type of Change

Changes Made

Add height: auto to research-v2 content figure rule (CSS safety net).
Change apply_dimensions so it never overwrites an author-set width:
- neither attr → set both intrinsic dims (keep CLS intent from Speed up mobile first paint #147)
- numeric width only → keep width, set proportional height
- non-numeric width (e.g. 75%) → leave width alone, do not invent height
- numeric height only → keep height, set proportional width
Add tests/responsive-images.test.rb and wire it into the Jekyll workflow.
Audit teaching / news / team / home: those surfaces already use object-fit: cover boxes or existing height: auto; no extra CSS needed beyond research-v2.

Testing Done

Tested locally using bundle exec jekyll serve (built _site + python3 -m http.server)
Checked all links and references
Verified content formatting
Cross-browser testing (if UI changes)
./scripts/lint-check.sh ✅
npm test ✅ (215 tests)
npm run lint ✅
./scripts/build.sh ✅
bundle exec ruby tests/responsive-images.test.rb ✅
Playwright aspect-ratio check: all 7 research figures match natural ratio at 1280 and 390, light and dark

Screenshots

Before (live production)

After (local build with fix)

Related Issues

Fixes stretched research figures reported against live https://comphy-lab.org/research/ (follow-up to #147 mobile first-paint dims).

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

Journal covers with inline max-width: 256px previously rendered ~256×1560; with height: auto they render at correct aspect (~256×335). Author width="75%" figures keep the percentage attribute and no conflicting height.

Summary by CodeRabbit

Bug Fixes
- Images with a specified width now retain their proportions by displaying at the corresponding height. Existing width and height settings are preserved, and images with invalid or unavailable dimensions are left unchanged.
Tests
- Added coverage for image sizing scenarios and included it in the publishing workflow.

Preserve author-set width (including percentages) in apply_dimensions, scale height only for numeric width-only cases, and set height: auto on research-v2 content figures so HTML height attrs cannot stretch images.

Copilot

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 · 2026-10-29T15:50:16Z

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: 41472a50-1a41-4ad6-a0f1-4ac0627d2e1c

Commits

Reviewing files that changed from the base of the PR and between 798cd1f and b9e4e2b.

Files selected for processing: 4

.github/workflows/jekyll.yml
_plugins/responsive_images.rb
assets/css/research-v2.css
tests/responsive-images.test.rb

Included review availability: This review used your included allowance. 4 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/research-v2.css

Source excerpt: Compose from `bridge.css` primitives where possible.

CodeRabbit inference engine (AGENTS.md)

Files:

assets/css/research-v2.css

Additional comments: 4

_plugins/responsive_images.rb: 1

58-88: LGTM!

assets/css/research-v2.css: 1

626-626: LGTM!

tests/responsive-images.test.rb: 1

1-69: LGTM!

.github/workflows/jekyll.yml: 1

60-60: LGTM!

Walkthrough

The image dimension logic now preserves author-supplied dimensions and derives a missing numeric dimension from the manifest aspect ratio. Static research images use automatic height. New Ruby tests cover these cases and run in the Jekyll workflow.

Changes: Responsive image dimensions

Layer / File(s)	Summary
Dimension handling and validation `_plugins/responsive_images.rb`, `assets/css/research-v2.css`, `tests/responsive-images.test.rb`, `.github/workflows/jekyll.yml`	The plugin preserves supplied dimensions, derives a missing dimension when possible and skips invalid manifest dimensions. Static research images use automatic height. The new tests cover dimension handling and run in the workflow.

Priority: Normal

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

Change: Bug fix

Suggested reviewers: cursoragent, comphy-bot

Merge Risk: Minimal · up to b9e4e

The change preserves authored image sizing and addresses figure distortion. No merge-blocking risk was identified.

Pre-merge checks: 4 · 1

Failed checks: 1 warning

Check name	Status	Explanation	Resolution
Docstring Coverage		Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentat…	Write docstrings for the functions missing them to satisfy the coverage threshold.

Passed checks: 4 passed

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title "Fix research figure aspect ratio distortion" matches the main change. The PR stops stretched non-badge figures on /research/. It preserves author-set widths in the responsive-image plugin, …
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

Full details: Title check

Explanation

The title "Fix research figure aspect ratio distortion" matches the main change. The PR stops stretched non-badge figures on /research/. It preserves author-set widths in the responsive-image plugin, adds height: auto to the research CSS rule, and adds a regression test. The title is specific and concise, and it names the user-facing problem.

Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentation-only edits and deletions within surviving functions are included; unchanged diff context and fully deleted functions are excluded. Analyzed 2 functions across 2 files. (2 skipped: 2 unsupported.)

Resolution

Write docstrings for the functions missing them to satisfy the coverage threshold.

Finishing Touches: 💡 1

📝 Generate docstrings: 💡

Commit to this branch
Create a new PR

✨ 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.}

VatsalSy · 2026-10-29T15:50:21Z

@coderabbitai review

coderabbitai · 2026-10-29T15:58:45Z

⚠️ Action not completed

Already reviewed the last commit. Use @coderabbitai full review to rerun a review of the entire changeset.

Note: CodeRabbit is an incremental review system and does not re-review already reviewed commits. This command is applicable only when automatic reviews are paused.

Fix research figure aspect distortion from responsive image dims

b9e4e2b

Preserve author-set width (including percentages) in apply_dimensions, scale height only for numeric width-only cases, and set height: auto on research-v2 content figures so HTML height attrs cannot stretch images.

Copilot AI balanced review requested due to automatic review settings October 29, 2026 15:49

Copilot AI reviewed Oct 29, 2026

cursor Bot merged commit adfc76b into main Oct 29, 2026
4 checks passed

cursor Bot deleted the rayleigh-cloud/research-figure-aspect-fc32 branch October 29, 2026 15:59

This was referenced Oct 29, 2026

Fix research YouTube playlist embeds and paper [25] media row #158

Merged

Replace research shields.io badges with design-system chips (F3) #159

Merged

Navigation Menu

Repository navigation

Fix research figure aspect ratio distortion - #157

Fix research figure aspect ratio distortion#157
cursor[bot] merged 1 commit into
mainfrom
rayleigh-cloud/research-figure-aspect-fc32

VatsalSy commented Oct 29, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

coderabbitai Bot commented Oct 29, 2026 •

edited

Loading

Uh oh!

VatsalSy commented Oct 29, 2026

Uh oh!

coderabbitai Bot commented Oct 29, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

VatsalSy commented Oct 29, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of Change

Changes Made

Testing Done

Screenshots

Before (live production)

After (local build with fix)

Related Issues

Checklist

Additional Notes

Summary by CodeRabbit

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot commented Oct 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

VatsalSy commented Oct 29, 2026

Uh oh!

coderabbitai Bot commented Oct 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

VatsalSy commented Oct 29, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Oct 29, 2026 •

edited

Loading

coderabbitai Bot commented Oct 29, 2026 •

edited

Loading