Fix LVGL horizontal and vertical equivalent config

[alexcoco]

Description:

While debugging some LVGL layouts on my device, I noticed that the docs have an incorrect equivalent configuration for the horizontal and vertical layout shorthand.

I suspect that what is in the docs is probably what was intended -- it is what I expected when I used layout: horizontal and layout: vertical but as it stands the docs do not match the current implementation:

https://github.com/esphome/esphome/blob/a7a5a0b9a23a048a63b8e40621f39c411b9db8c4/esphome/components/lvgl/layout.py#L58-L63

I'm also happy to update the layout in esphome/esphome to match the docs if that is actually what was intended.

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 /components/index.rst 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 UPPER_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 images/ folder of this repository.

4. Use the image in your component's index table entry in /components/index.rst.

Example: For a component called "DHT22 Temperature Sensor", use:

@esphomebot generate image DHT22

[Copilot]

Pull request overview

This PR corrects the documentation for LVGL horizontal and vertical layout shorthands to accurately reflect the actual implementation in the ESPHome codebase. The documentation previously stated that flex_align_cross: stretch was used, but the implementation actually uses flex_align_cross: center.

• Corrected the flex_align_cross parameter from stretch to center in both horizontal and vertical layout examples

[netlify]

✅ Deploy Preview for esphome ready!

Name	Link
🔨 Latest commit	95f38d0
🔍 Latest deploy log	https://app.netlify.com/projects/esphome/deploys/6927cb1158a4100008afa037
😎 Deploy Preview	https://deploy-preview-5687--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

Layout alignment settings in LVGL components documentation were updated, changing the flex_align_cross property from STRETCH to CENTER for both horizontal and vertical layout configurations.

Changes

Cohort / File(s)	Change Summary
Layout alignment updates content/components/lvgl/layouts.md	Updated flex_align_cross alignment value from STRETCH to CENTER for horizontal and vertical layout configurations

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Suggested labels

current

Suggested reviewers

• swoboda1337

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: fixing incorrect equivalent configurations for LVGL horizontal and vertical layouts in the documentation.
Description check	✅ Passed	The description is related to the changeset, explaining the mismatch between documentation and implementation for LVGL layout configurations.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c1b28dc and 95f38d0.

📒 Files selected for processing (1)

• content/components/lvgl/layouts.md (2 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**

⚙️ CodeRabbit configuration file

• Do not generate or add any sequence diagrams

Files:

• content/components/lvgl/layouts.md

🧠 Learnings (1)

📓 Common learnings

Learnt from: CR
Repo: esphome/esphome-docs PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-08-24T00:13:13.459Z
Learning: Open pull requests against the correct base branch: use `current` for documentation-only revisions and `next` for changes tied to new features in esphome/esphome

Learnt from: jesserockz
Repo: esphome/esphome-docs PR: 4865
File: .github/workflows/needs-docs.yml:0-0
Timestamp: 2025-05-01T03:29:47.922Z
Learning: In the esphome-docs repository, the "current" label is automatically added by a bot to pull requests, making it a reliable indicator for the target branch.

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Build

🔇 Additional comments (2)

content/components/lvgl/layouts.md (2)

31-42: Documentation corrected: Horizontal layout shorthand now uses CENTER alignment.

The update to flex_align_cross: center in the horizontal layout shorthand correctly reflects the intended behavior. The configuration is valid and consistent with the Flex layout parameter documentation.

---

44-55: Documentation corrected: Vertical layout shorthand now uses CENTER alignment.

The update to flex_align_cross: center in the vertical layout shorthand mirrors the horizontal layout fix and correctly reflects the intended behavior. Both shorthands are now consistently documented.

Tip

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

• Provide your own instructions using the high_level_summary_instructions setting.
• Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
• Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

1. 📝 Description — Summarize the main change in 50–60 words, explaining what was done.
2. 📓 References — List relevant issues, discussions, documentation, or related PRs.
3. 📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.
4. 📊 Contributor Summary — Include a Markdown table showing contributions:
   | Contributor | Lines Added | Lines Removed | Files Changed |
5. ✔️ Additional Notes — Add any extra reviewer context.
   Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

---

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.}