Constrain blog post images on desktop#2549
Closed
google-labs-jules[bot] wants to merge 10 commits into
Closed
Conversation
Contributor
Author
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
8 tasks
Contributor
|
🚀 Deployment Details (Last updated: Jun 18, 2026, 6:31 PM PST) 🚀 Pushed to gh-pages; publish in progress
|
Contributor
🐙 GitHub Models Code Review
Reviewing: PR #2549 Code Review FeedbackReview of code diff in HIGH Severity Issues1. Incorrect Prop Passing to
|
Contributor
🐙 GitHub Models Visual Review
Summary: 🔴 2 high · 🟡 0 medium · 🟢 0 low 🔴
|
Contributor
|
🚀 Impact Analysis Details (Last updated: Jun 18, 2026, 3:50 PM PST) ✅ Impact Analysis Complete
Deployment ReviewSummaryImpact Level: HIGH 📝 Changed Files (8)
Routes Reviewed/blog/2026-04-18-halloween-costumes (Visual Diff: 0.02%)Severity: LOW DOM Changes:
Artifacts:
/blog/2026-04-18-make-shoe-dance (Visual Diff: 15.18%)Severity: HIGH DOM Changes:
Artifacts:
/blog/2026-04-19-practical-tools-essentials (Visual Diff: 0.01%)Severity: LOW DOM Changes: Artifacts:
/blog/2026-06-01-event-travel-packing (Visual Diff: 0.03%)Severity: LOW DOM Changes:
Artifacts:
/blog/2026-06-01-general-health-home-care (Visual Diff: 0.00%)Severity: LOW DOM Changes: Artifacts:
/blog/2026-06-01-outdoor-dancing (Visual Diff: 19.87%)Severity: HIGH DOM Changes:
Artifacts:
/blog/2026-06-01-power-charging (Visual Diff: 0.00%)Severity: LOW DOM Changes: Artifacts:
/blog/2026-06-01-practice-review-tech (Visual Diff: 0.00%)Severity: LOW DOM Changes: Artifacts:
/blog/2026-06-01-practice-social-dance-apparel (Visual Diff: 26.42%)Severity: HIGH DOM Changes:
Artifacts:
/blog/2026-06-01-shoe-care-modification (Visual Diff: 17.66%)Severity: HIGH DOM Changes:
Artifacts:
/blog/2026-06-01-theme-wear-costumes-accessories (Visual Diff: 0.03%)Severity: LOW DOM Changes:
Artifacts:
/blog/2026-06-01-wcs-essentials (Visual Diff: 0.03%)Severity: LOW DOM Changes:
Artifacts:
/blog/2026-06-14-the-story-behind-the-merch-page (Visual Diff: 26.56%)Severity: HIGH DOM Changes:
Artifacts:
/research/ai-devops-pipeline (Visual Diff: 0.00%)Severity: LOW DOM Changes: Artifacts:
/research/blog-drafter (Visual Diff: 0.00%)Severity: LOW DOM Changes: Artifacts:
/research/boomtick-blog (Visual Diff: 0.00%)Severity: LOW DOM Changes: Artifacts:
/research/ecommerce-automation (Visual Diff: 0.00%)Severity: LOW DOM Changes: Artifacts:
/research/gitops-pr-reviewer (Visual Diff: 0.00%)Severity: LOW DOM Changes: Artifacts:
/research/hrm-flagship (Visual Diff: 0.00%)Severity: LOW DOM Changes: Artifacts:
/research/repo-auditor-ai (Visual Diff: 0.00%)Severity: LOW DOM Changes: Artifacts:
/research/scope-blast-radius (Visual Diff: 0.00%)Severity: LOW DOM Changes: Artifacts:
/research/wcs-scraper (Visual Diff: 0.00%)Severity: LOW DOM Changes: Artifacts:
/research/wcs-scraper-initial-sync (Visual Diff: 0.00%)Severity: LOW DOM Changes: Artifacts:
|
Constrains the maximum height of images in blog posts to 384px (lg: 96) on desktop viewports and ensures they maintain aspect ratio using object-contain. This prevents images from breaking the reading rhythm.
- Modified MarkdownRenderer.tsx to wrap images in a constrained Box. - Applied maxHeight: 384px (lg: 96) on desktop and 50vh on mobile. - Used object-contain to ensure aspect ratio preservation. - Ensured proper prop passing and responsive syntax compatibility.
- Wraps images in a constrained Box to ensure vertical rhythm. - Applies maxHeight: 384px (lg: 96) on desktop and 50vh on mobile. - Uses object-contain to preserve aspect ratio. - Explicitly whitelists safe HTML attributes (title, width, height) for img tag. - Corrects responsive value syntax for viewport units. - Adds proper TypeScript typing for the image renderer component.
- Wraps images in a constrained Box to ensure vertical rhythm. - Applies maxHeight: 384px (lg: 96) on desktop and 50vh on mobile. - Uses object-contain to preserve aspect ratio. - Safer handling of img attributes (alt, title, width, height). - Corrects responsive value syntax and adds proper TS typing.
- Refactor Markdown image renderer to wrap images in a constrained Box. - Apply height limits: 384px (lg: 96) on desktop and 50vh on mobile. - Preserve aspect ratio using object-contain. - Enhanced security with referrerPolicy="no-referrer". - Improved accessibility with better alt attribute fallback handling. - Explicitly whitelist safe HTML attributes for image tags. - Fixed invalid responsive syntax and added proper TS typing.
- Refactor Markdown image renderer to wrap images in a constrained Box. - Apply height limits: 384px (lg: 96) on desktop and 50vh on mobile. - Preserve aspect ratio using object-contain. - Enhanced security with referrerPolicy="no-referrer" and crossOrigin="anonymous". - Improved accessibility with refined alt attribute handling (preserves empty strings). - Replaced unsafe prop spreading with explicit attribute whitelisting. - Fixed invalid responsive syntax and added proper TS typing and return types.
- Apply maxHeight constraints (384px on desktop, 50vh on mobile) to images in MarkdownRenderer. - Center images horizontally and use object-contain to preserve aspect ratio. - Sanitize width and height attributes to ensure they are numeric strings. - Implement security best practices (no-referrer, anonymous cross-origin) for external assets. - Ensure images remain responsive and accessible.
- Applied responsive maxHeight constraints (384px desktop, 50vh mobile) to blog images. - Centered images and preserved aspect ratio using object-contain. - Sanitized width/height attributes to ensure they are valid numeric values. - Conditionally applied security attributes (crossOrigin, referrerPolicy) for external assets only. - Refined prop spreading and accessibility handling for the img component.
arii
requested changes
Jun 19, 2026
arii
left a comment
arii
left a comment
Owner
There was a problem hiding this comment.
ANTI-AI-SLOP\n\n\n## FINDINGS\n\n\n## FINAL RECOMMENDATION\n<Approved | Approved with Minor Changes | Not Approved>\n\n
Inline Comments (Fallback due to Github line resolution errors)
- :1:
arii
requested changes
Jun 19, 2026
arii
left a comment
arii
left a comment
Owner
There was a problem hiding this comment.
ANTI-AI-SLOP\n\n\n## FINDINGS\n\n\n## FINAL RECOMMENDATION\n<Approved | Approved with Minor Changes | Not Approved>\n\n
Inline Comments (Fallback due to Github line resolution errors)
- :1:
arii
requested changes
Jun 19, 2026
arii
left a comment
arii
left a comment
Owner
There was a problem hiding this comment.
Comprehensive Review for PR #2549
CI Status: Failing checks detected.
Failing Checks:
- Deployment Impact Analysis
Recommendation: Please review the failing CI logs and apply fixes before requesting another review.
FINAL RECOMMENDATION
Not Approved
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR adds responsive image sizing and maximum dimensions to images in blog posts. Specifically, it caps the maximum height of images rendered from Markdown to 384px (lg: 96) on desktop viewports and ensures they maintain their aspect ratio using
object-contain. This prevents images from becoming excessively large and breaking the reading rhythm on desktop, while maintaining full responsiveness on mobile.Fixes #2532
PR created automatically by Jules for task 12042044079763800918 started by @arii