Repository navigation
fix(theme-classic): set automatic width for markdown images - #12793
ShubhamReddy06 wants to merge 1 commit into
Conversation
…(AI-assisted) Add `width: auto` alongside `height: auto` in `MDXComponents/Img/styles.module.css` to ensure images with generated dimensions scale proportionally. Fixes meta#9462
|
Hi @ShubhamReddy06! Thank you for your pull request and welcome to our community. Action RequiredIn order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you. ProcessIn order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA. Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks! |
|
No actionable comments were generated in the recent review.
 |
| Layer / File(s) | Summary |
|---|---|
Set image width to auto packages/docusaurus-theme-classic/src/theme/MDXComponents/Img/styles.module.css |
The .img style rule now sets width: auto. |
Priority:
Estimated code review effort: 1 (Trivial) | ~3 minutes
Change: Bug fix · Severity of issue fixed: Medium
Merge Risk: 
90f1e
-
No actionable merge-blocking risk is established.
Architecture risk: 
90f1e
-
The change affects 1 system.
Changed systems:
packages/docusaurus-theme-classicArchitecture concerns
No architecture-level concerns identified.Review details
-
Systems and components
- observed — packages/docusaurus-theme-classic (library) was modified; 1 changed file maps to changed impact.
Before / after behavior
- observed — Modified behavior in packages/docusaurus-theme-classic/src/theme/MDXComponents/Img/styles.module.css: Added
width: autoto.img.
-
Pre-merge checks: 
-
Check name Status Explanation Description Check Check skipped - CodeRabbit’s high-level summary is enabled. Title check The title clearly and concisely describes the main change: setting automatic width for Markdown images in the classic theme. Linked Issues check Issue #9462requests Markdown images that do not stretch because of generated dimensions. The reviewed stylesheet now sets.img { height: auto; width: auto; }. The supplied change summary identifies…Out of Scope Changes check The supplied whole-PR summary reports one added CSS declaration in packages/docusaurus-theme-classic/src/theme/MDXComponents/Img/styles.module.css. The declaration supports the linked image-sizing f…Docstring Coverage No eligible functions found in the changed files. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentat… Full details: Linked Issues check
-
Explanation
Issue
#9462requests Markdown images that do not stretch because of generated dimensions. The reviewed stylesheet now sets.img { height: auto; width: auto; }. The supplied change summary identifies no other implementation changes. This directly addresses the requested image sizing behavior. Issue#9462defines no separate automated-test requirement.
Full details: Out of Scope Changes check
-
Explanation
The supplied whole-PR summary reports one added CSS declaration in
packages/docusaurus-theme-classic/src/theme/MDXComponents/Img/styles.module.css. The declaration supports the linked image-sizing fix. No unrelated code, API, or component changes are shown.
Full details: Docstring Coverage
-
Explanation
No eligible functions found in the changed files. Skipping docstring coverage check. 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 0 functions across 0 files. (1 skipped: 1 unsupported.)
-
Finishing Touches
-
🧪 Generate unit tests (beta)
-
- 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.
✅ [V2]Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
Motivation
Fixes #9462.
Images may have explicit
widthandheightattributes generated by Docusaurus. The classic theme's Markdown image styles already includeheight: auto, but do not explicitly definewidth: auto.This change adds
width: autoalongside the existing height rule to allow the browser to calculate image dimensions while preserving the image's intrinsic aspect ratio.Solution
Updated
packages/docusaurus-theme-classic/src/theme/MDXComponents/Img/styles.module.css:This is a minimal CSS change intended to improve image sizing behavior while retaining the existing component structure and API.
Test Plan
git diff --check HEAD~1successfully.The original issue's specific reproduction has not yet been independently verified with this change.
Related Issues
Summary by CodeRabbit