Fix mobile navigation

[mrdarrengriffin]

Description:

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 /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

[netlify]

✅ Deploy Preview for esphome ready!

Name	Link
🔨 Latest commit	9ca7764
🔍 Latest deploy log	https://app.netlify.com/projects/esphome/deploys/6914a64b854c190008a4da40
😎 Deploy Preview	https://deploy-preview-5600--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.

[Copilot]

Pull Request Overview

This PR fixes mobile navigation styling by removing a redundant and potentially conflicting CSS rule.

• Removes overflow-y: auto from .nav-links.active within the 700px breakpoint that conflicts with scrollbar hiding styles

[coderabbitai]

Walkthrough

A CSS property removal from the navigation links styling that eliminates the automatic vertical scrolling behavior applied to the .nav-links.active selector. The change affects only a single rule with no logic modifications.

Changes

Cohort / File(s)	Change Summary
Navigation CSS themes/esphome-theme/assets/css/main.css	Removed overflow-y: auto property from .nav-links.active CSS rule, eliminating automatic vertical scrolling for active navigation links

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Possibly related PRs

• Fix menu behaviour on mobile devices. #5439 — Related navigation CSS behavior change; the referenced PR modifies overflow behavior for .nav-links on mobile while this PR removes overflow-y from the same selector

Suggested reviewers

• jesserockz

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	The description uses template placeholders and does not provide specific information about the mobile navigation fix being made in this changeset.	Replace template placeholders with actual issue/PR references and provide a clear description of the mobile navigation fix being implemented.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'Fix mobile navigation' directly relates to the CSS change that removes a scrolling behavior from mobile navigation elements.
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
• Commit unit tests in branch mobile-nav-fix

---

📜 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 a3dc6ef and 7161aaa.

📒 Files selected for processing (1)

• themes/esphome-theme/assets/css/main.css (0 hunks)

💤 Files with no reviewable changes (1)

• themes/esphome-theme/assets/css/main.css

⏰ 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: Upload results

---

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