Skip to content

docs(readme): cap Wrapped screenshot via height attribute (GitHub strips style)#162

Merged
InstaZDLL merged 1 commit into
mainfrom
docs/readme-wrapped-img-height
May 26, 2026
Merged

docs(readme): cap Wrapped screenshot via height attribute (GitHub strips style)#162
InstaZDLL merged 1 commit into
mainfrom
docs/readme-wrapped-img-height

Conversation

@InstaZDLL
Copy link
Copy Markdown
Owner

@InstaZDLL InstaZDLL commented May 26, 2026

Follow-up to #161.

GitHub's markdown sanitizer drops inline style attributes (max-height: 520px; width: auto; from the merged version), so the portrait Wrapped capture rendered at its natural massive size next to the landscape Karaoke-lyrics tile.

Switching to the HTML height attribute (allowlisted by GitHub) — height="380" — gives the browser one fixed dimension, which it pairs with the natural aspect ratio to bring the Wrapped tile in line with its row partner.

Test plan

  • Refresh the README on the PR's Files tab — Wrapped tile should render at roughly the same height as the Karaoke-lyrics tile, centered in its cell.

Summary by CodeRabbit

Notes de version

  • Documentation
    • Amélioration de la présentation des images dans la documentation pour une meilleure lisibilité.

Review Change Stack

GitHub's markdown sanitizer drops inline `style` attributes
(including the `max-height` we set in #161), so the portrait Wrapped
capture rendered at its full natural size after the merge — the
gallery row ended up even more imbalanced than before the cap.

The HTML `height` attribute is in GitHub's allowlist and the browser
keeps the aspect ratio when only one dimension is set, so
`height="380"` brings the Wrapped tile to roughly the same rendered
height as the landscape karaoke-lyrics tile next to it without any
CSS.
@InstaZDLL InstaZDLL added scope: docs Docs, README, assets type: docs Documentation labels May 26, 2026
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 26, 2026

Caution

Review failed

Pull request was closed or merged during review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: c02d73b5-4c16-45de-84e1-f1f18d510621

📥 Commits

Reviewing files that changed from the base of the PR and between 91c1119 and 515ef1c.

📒 Files selected for processing (1)
  • README.md

📝 Walkthrough

Walkthrough

Modification cosmétique du README : l'image "WaveFlow Wrapped" adopte des attributs HTML explicites pour contrôler sa hauteur et son alignement au lieu d'une directive de style CSS, affectant uniquement le rendu visuel de la documentation.

Changes

Mise à jour visuelle du README

Layer / File(s) Summary
Attributs de l'image Wrapped
README.md
L'élément d'image utilise maintenant height="380" et align="center" à la place d'un attribut style pour contrôler son affichage dans la grille de captures.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Poem

📸 Une image se pare de nouveaux habits,
Hauteur et centre, c'est tout ce qu'il faut ici,
Le README respire, enfin aligné—
Une touche légère, subtilement présentée. ✨

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed Le titre suit les conventions Conventional Commits, est concis et décrit clairement la modification principale : l'utilisation d'un attribut height pour contourner la limitation de GitHub qui supprime les styles inline.
Description check ✅ Passed La description explique le contexte (suivi de #161), le problème (suppression des styles par GitHub), la solution (attribut height allowlisté), et inclut un plan de test complet avec les étapes concrètes à reproduire.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch docs/readme-wrapped-img-height

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

@InstaZDLL InstaZDLL added the size: xs < 10 lines label May 26, 2026
@InstaZDLL InstaZDLL self-assigned this May 26, 2026
@InstaZDLL InstaZDLL merged commit 1c0352a into main May 26, 2026
12 of 13 checks passed
@InstaZDLL InstaZDLL deleted the docs/readme-wrapped-img-height branch May 26, 2026 02:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

scope: docs Docs, README, assets size: xs < 10 lines type: docs Documentation

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant