Restore height limit on images in component pages.#6120
Restore height limit on images in component pages.#6120clydebarrow wants to merge 1 commit intocurrentfrom
Conversation
There was a problem hiding this comment.
Pull request overview
This pull request restores a height limit on images displayed in component documentation pages by adding max-height: 400px and object-fit: contain CSS properties to images within Starlight's markdown content area.
Changes:
- Added CSS rules to limit image height to 400px while maintaining aspect ratio
- Applied
object-fit: containto ensure images scale properly within the height constraint
✅ Deploy Preview for esphome ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughA CSS styling change to the dialog backdrop element, adding a maximum height constraint of 400px and an object-fit property set to contain, affecting how backdrop content scales and displays. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Tip Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/styles/custom.css (1)
254-255: Addmax-width: 100%to the.sl-markdown-content imgrule to prevent overflow.Starlight's default stylesheet applies
max-width: 100%to images, but the custom rule at lines 250–256 overrides it without preserving this constraint. Since the custom rule has equal cascade specificity and is loaded after Starlight's defaults, it removes the width protection. Images with explicitwidthattributes or naturally wide dimensions will overflow the content column.♻️ Proposed addition
.sl-markdown-content img { display: block; margin-left: auto; margin-right: auto; + max-width: 100%; max-height: 400px; object-fit: contain; }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/styles/custom.css` around lines 254 - 255, The .sl-markdown-content img rule currently sets max-height and object-fit but omits width constraints, causing overflow; update the .sl-markdown-content img CSS rule to include max-width: 100% so images cannot exceed their container (preserve existing max-height: 400px and object-fit: contain), ensuring it still overrides Starlight defaults while preventing wide images from breaking the content column.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/styles/custom.css`:
- Around line 254-255: The .sl-markdown-content img rule currently sets
max-height and object-fit but omits width constraints, causing overflow; update
the .sl-markdown-content img CSS rule to include max-width: 100% so images
cannot exceed their container (preserve existing max-height: 400px and
object-fit: contain), ensuring it still overrides Starlight defaults while
preventing wide images from breaking the content column.
2 participants
Description
Some components, e.g. gps, have inline images that are rather large and push useful content down the page. This PR restores the previous limit on the height of images in content generated from Markdown to resolve this problem.
Compare https://esphome.io/components/gps with https://deploy-preview-6120--esphome.netlify.app/components/gps/
Related issue (if applicable): fixes
Pull request in esphome with YAML changes (if applicable):
Checklist
I am merging into
nextbecause this is new documentation that has a matching pull-request in esphome as linked above.or
I am merging into
currentbecause this is a fix, change and/or adjustment in the current documentation and is not for a new component or feature.Link added in
/src/content/docs/components/index.mdxwhen creating new documents for new components or cookbook.New Component Images
If you are adding a new component to ESPHome, you can automatically generate a standardized black and white component name image for the documentation.
To generate a component image:
Comment on this pull request with the following command, replacing
component_namewith your component name in lower_case format with underscores (e.g.,bme280,sht3x,dallas_temp):The ESPHome bot will respond with a downloadable ZIP file containing the SVG image.
Extract the SVG file and place it in the
/public/images/folder of this repository.Use the image in your component's index table entry in
/src/content/docs/components/index.mdx.Example: For a component called "DHT22 Temperature Sensor", use:
Note: All images used in ImgTable components must be placed in
/public/images/as the component resolves them to absolute paths.