Recorded the demos at a 10:6 screen ratio and sized the home page to them.

[AlexSkrypnyk]

Summary

The recorded terminal demos were 80x42, which renders almost square at an aspect of 1.04. The home page was built for a 140-column demo it no longer had: the hero tile hardcoded aspect-ratio: 1280 / 705 with object-fit: cover, so an 80-column asset was silently centre-cropped by about 43%, and the dialog rendered the full 42-row terminal at 903px inside a 511px scrollable box. The same recording was therefore framed two different ways, which is what made the hero and the dialog look like two different videos.

All nine demos are re-recorded at 80x27, a 16:10 shape matching a MacBook screen, and the home page is sized to them.

The rows are no longer configured by hand. VideoRecorder::rowsForAspect() derives them from the columns and a wanted aspect, so each video declares only its column count and ASPECT_RATIO = 2560 / 1600 is stated once. A recording can no longer end up an arbitrary shape because one of a pair of numbers was edited without the other.

The recording pipeline itself is unchanged: timings, values and pacing are exactly what the commands produced.

Changes

Recording shape

• VideoRecorder::rowsForAspect(int $cols, float $aspect) solves cols / (rows * FONT_SIZE * LINE_HEIGHT) for the rows, and refuses a non-positive width or aspect.
• The VIDEOS entries drop their rows key and keep only cols; the rows are computed at record time.
• svg-term-render.js gains a --font-size flag, so PHP owns the cell metric the calculation depends on rather than the formula relying on a value hardcoded in the renderer. Verified behaviour-neutral: rendering an existing cast with the flag produced byte-identical output.
• All nine demos re-recorded at 80x27. Each poster is now 1280x794 (aspect 1.612).

Home page

• The hero is the still .png poster rather than the animated .svg. It also fixes the animated SVG continuing to play behind the dialog, which nothing could pause.
• The hero tile carries no aspect ratio of its own. It takes the poster's, so it hugs the image and follows it if the recording is re-shaped again.
• The dialog takes 80% of the viewport width, capped at 1280px so it does not become gigantic on a large desktop, and 100% width below 860px.
• The dialog's height comes from the player rather than from a computed ratio: the player uses fit="width" and derives its own height, and the dialog takes it. That is what makes it hug exactly, because the player's rendered ratio drifts with size - measured at 1.475, 1.513 and 1.534 - as its font size rounds to whole pixels, so no fixed ratio hugs at every size.
• The Production-grade Drupal, since 2017 hero badge is removed, markup and CSS. The shared vtx-pulse keyframes stay, since the tile's live dot uses them.
• AsciinemaPlayer forwards a fit option, with test coverage.

Verification

Measured in a browser at three viewports after the change. The dialog hugs the player exactly at each - zero horizontal and vertical gap - and stays within the viewport:

Viewport	Panel	Player	Gap
2560x1440	1278x901 (capped)	1246x812	0 / 0
1280x800	985x718 (77%)	953x629	0 / 0
390x780	390x345 (100%)	358x256	0 / 0

196 Jest tests pass; eslint, prettier and cspell are clean; the docs build is clean.

Screenshots

Before / After

BEFORE                                  AFTER

  recorded 80x42                          recorded 80x27
  aspect 1.04, near square                aspect 1.61, a MacBook screen
  rows set by hand per video              rows = cols / (aspect x cell)
         │                                         │
         ├──────────────┐                          ├──────────────┐
         ▼              ▼                          ▼              ▼
  ┌─────────────┐ ┌─────────────┐          ┌─────────────┐ ┌─────────────┐
  │ HERO        │ │ DIALOG      │          │ HERO        │ │ DIALOG      │
  │             │ │             │          │             │ │             │
  │ ratio       │ │ 42 rows at  │          │ takes the   │ │ 80% wide,   │
  │ 1280/705    │ │ 903px in a  │          │ poster's    │ │ max 1280,   │
  │ + cover     │ │ 511px box   │          │ own ratio   │ │ 100% mobile │
  │             │ │             │          │             │ │             │
  │ centre-crop │ │ scrollbar,  │          │ whole       │ │ whole       │
  │ ~43% lost   │ │ top ~57%    │          │ terminal    │ │ terminal    │
  └─────────────┘ └─────────────┘          └─────────────┘ └─────────────┘
    shows the       shows the                     same recording,
    middle band     top band                      framed the same way

[coderabbitai]

Warning

Review limit reached

You’ve reached a temporary PR review limit under our Fair Usage Limits Policy.

Your current included review allowance is based on your included PR review attempts over the past 7 days.

Next review available in: 4 minutes

Limit details: You’ve used all 2 included reviews currently available. Your 80 included PR review attempts over the past 7 days set your current allowance at 2 reviews per hour.

You’re in a promotional period — use the checkbox below to run this review for free:

• Run review for free

_{On-demand reviews are free for the next 31 days. After that, they cost $0.25 per reviewed file.}

How can I continue?

Run this review now using the option above, or comment @coderabbitai review --use-credits.

You can also wait for the limit to reset, then comment @coderabbitai review or push new commits to the PR.

An organization admin can change what happens after included review limits in Billing.

How do review limits work?

CodeRabbit enforces per-developer PR review limits within each organization.

For paid Pro and Pro+ reviews, CodeRabbit uses a developer's included PR review attempts over the past 7 days to set the current hourly allowance. At typical activity levels, the full plan allowance applies. Higher sustained activity can lower the allowance until earlier attempts leave the 7-day window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Repository UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 8dac3dbe-3a49-4f46-9a5a-af6e3f8a11f1

📥 Commits

Reviewing files that changed from the base of the PR and between 97b2b9b and a01cb57.

⛔ Files ignored due to path filters (18)

• .vortex/docs/static/img/build.png is excluded by !**/*.png
• .vortex/docs/static/img/build.svg is excluded by !**/*.svg
• .vortex/docs/static/img/doctor-info.png is excluded by !**/*.png
• .vortex/docs/static/img/doctor-info.svg is excluded by !**/*.svg
• .vortex/docs/static/img/doctor.png is excluded by !**/*.png
• .vortex/docs/static/img/doctor.svg is excluded by !**/*.svg
• .vortex/docs/static/img/info.png is excluded by !**/*.png
• .vortex/docs/static/img/info.svg is excluded by !**/*.svg
• .vortex/docs/static/img/installer.png is excluded by !**/*.png
• .vortex/docs/static/img/installer.svg is excluded by !**/*.svg
• .vortex/docs/static/img/lint.png is excluded by !**/*.png
• .vortex/docs/static/img/lint.svg is excluded by !**/*.svg
• .vortex/docs/static/img/provision.png is excluded by !**/*.png
• .vortex/docs/static/img/provision.svg is excluded by !**/*.svg
• .vortex/docs/static/img/test-bdd.png is excluded by !**/*.png
• .vortex/docs/static/img/test-bdd.svg is excluded by !**/*.svg
• .vortex/docs/static/img/test.png is excluded by !**/*.png
• .vortex/docs/static/img/test.svg is excluded by !**/*.svg

📒 Files selected for processing (16)

• .vortex/docs/.utils/VideoRecorder.php
• .vortex/docs/.utils/svg-term-render.js
• .vortex/docs/.utils/update-videos.php
• .vortex/docs/src/components/AsciinemaPlayer/AsciinemaPlayer.js
• .vortex/docs/src/css/custom.css
• .vortex/docs/src/pages/index.js
• .vortex/docs/static/img/build.json
• .vortex/docs/static/img/doctor-info.json
• .vortex/docs/static/img/doctor.json
• .vortex/docs/static/img/info.json
• .vortex/docs/static/img/installer.json
• .vortex/docs/static/img/lint.json
• .vortex/docs/static/img/provision.json
• .vortex/docs/static/img/test-bdd.json
• .vortex/docs/static/img/test.json
• .vortex/docs/tests/unit/AsciinemaPlayer/AsciinemaPlayer.test.js

---

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 86.65%. Comparing base (97b2b9b) to head (a01cb57).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3056      +/-   ##
==========================================
- Coverage   87.06%   86.65%   -0.41%     
==========================================
  Files         106       99       -7     
  Lines        4970     4811     -159     
  Branches       47        3      -44     
==========================================
- Hits         4327     4169     -158     
+ Misses        643      642       -1     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

Code coverage (threshold: 90%)

  Classes: 100.00% (1/1)
  Methods: 100.00% (2/2)
  Lines:   98.56% (206/209)

Per-class coverage

Drupal\ys_demo\Plugin\Block\CounterBlock
  Methods: 100.00% ( 2/ 2)   Lines: 100.00% ( 10/ 10)

[AlexSkrypnyk]

Code coverage (threshold: 90%)

  Classes: 100.00% (1/1)
  Methods: 100.00% (2/2)
  Lines:   98.56% (206/209)

Per-class coverage

Drupal\ys_demo\Plugin\Block\CounterBlock
  Methods: 100.00% ( 2/ 2)   Lines: 100.00% ( 10/ 10)

[github-actions]

📖 Documentation preview for this pull request has been deployed to Netlify:

https://6a8792c58605cb4cd11aa9a3--vortex-docs.netlify.app

This preview is rebuilt on every commit and is not the production documentation site.