Restore height limit on images in component pages.

[clydebarrow]

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):

• esphome/esphome#

Checklist

• I am merging into next because this is new documentation that has a matching pull-request in esphome as linked above.
  or

• I am merging into current because 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.mdx when 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:

1. Comment on this pull request with the following command, replacing component_name with your component name in lower_case format with underscores (e.g., bme280, sht3x, dallas_temp):

   @esphomebot generate image component_name
   

2. The ESPHome bot will respond with a downloadable ZIP file containing the SVG image.

3. Extract the SVG file and place it in the /public/images/ folder of this repository.

4. 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:

@esphomebot generate image dht22

Note: All images used in ImgTable components must be placed in /public/images/ as the component resolves them to absolute paths.

[Copilot]

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: contain to ensure images scale properly within the height constraint

[netlify]

✅ Deploy Preview for esphome ready!

Name	Link
🔨 Latest commit	19d0c8c
🔍 Latest deploy log	https://app.netlify.com/projects/esphome/deploys/699688f61311520008cfd687
😎 Deploy Preview	https://deploy-preview-6120--esphome.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Walkthrough

A 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

Cohort / File(s)	Summary
Dialog Backdrop Styling src/styles/custom.css	Added max-height: 400px and object-fit: contain properties to the dialog::backdrop rule to constrain vertical size and content scaling.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Suggested labels

current

Suggested reviewers

• swoboda1337

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Restore height limit on images in component pages' directly and clearly summarizes the main change of adding max-height and object-fit properties to the dialog::backdrop rule in the CSS file.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check	✅ Passed	The PR description clearly relates to the changeset, explaining that the CSS modifications restore a height limit on images to prevent large inline images from pushing content down the page.

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

✨ Finishing Touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch image-height

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

🧹 Nitpick comments (1)

src/styles/custom.css (1)

254-255: Add max-width: 100% to the .sl-markdown-content img rule 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 explicit width attributes 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.