Fix premature flyout of nested submenu on hover

[Copilot]

Nested "Scroll Speed" submenu was displaying when hovering over parent "Auto-Scroll" item instead of only when hovering directly over "Scroll Speed" link.

Changes

CSS selector specificity fix (static/css/base.css:115)

Changed descendant selector to direct child selector:

/* Before: matches all descendant .submenu-content */
.submenu:hover .submenu-content { display: block; }

/* After: matches only direct child .submenu-content */
.submenu:hover > .submenu-content { display: block; }

Behavior

Hover over "Auto-Scroll" - shows first-level menu only:

Hover over "Scroll Speed" - shows second-level menu:

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• iptv.lan
  • Triggering command: /usr/bin/python python app.py (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Issue #2: Guide UX Improvements - Auto-Scroll Menu Enhancement

Objective

Restructure the Auto-Scroll menu to use a flyout submenu pattern (like "Change Tuner") instead of a simple toggle button.

Requirements

Menu Structure Changes

1. Desktop Menu (templates/_header.html line 31):

   • Change "Toggle Auto-Scroll" to "Auto-Scroll" with flyout submenu
   • Add "Enable/Disable Auto-Scroll" as first submenu item
   • Add "Scroll Speed" submenu with nested flyout containing:
     • Slow
     • Medium
     • Fast

2. Mobile Menu (templates/_header.html line 112):

   • Apply same structure as desktop menu
   • Use existing mobile-submenu and mobile-submenu-toggle patterns
   • Ensure proper nesting for triple-level menus

JavaScript Updates

3. templates/guide.html:

   • Add event handlers for scroll speed selection (data-scroll-speed attribute)
   • Save speed preference to localStorage as autoScrollSpeed
   • Apply speed on page load if saved
   • Speed mappings:
     • slow: 0.6 px/frame
     • medium: 1.2 px/frame (default)
     • fast: 2.4 px/frame
   • Call window.__autoScroll.setSpeed(value) to apply changes

4. static/js/auto-scroll.js:

   • Change scrollSpeed from const to let (currently line 14)
   • Add setSpeed(speed) method to window.__autoScroll API (after line 439)
   • Add getSpeed() method to return current speed
   • Validate speed is a positive number before applying

CSS (if needed)

5. static/css/base.css:
   • Verify triple-nested submenu support (submenu within submenu)
   • Add CSS for third-level .submenu-content positioning if not already present
   • Ensure z-index stacking works correctly

Expected Behavior

• User hovers over "Auto-Scroll" → submenu appears
• User hovers over "Scroll Speed" → speed options appear to the right
• Clicking a speed option saves to localStorage and applies immediately
• Speed persists across page reloads
• Mobile menu uses button toggles instead of hover

Files to Modify

1. templates/_header.html
2. templates/guide.html
3. static/js/auto-scroll.js
4. static/css/base.css (if triple-nesting CSS needed)

Notes

• Follow the existing pattern used by "Change Tuner" submenu (lines 15-26 in _header.html)
• Maintain accessibility attributes (role, aria-*)
• Keep the id="toggleAutoScroll" on the Enable/Disable link for backward compatibility with existing guide.html script
• For mobile, use id="mobileToggleAutoScroll" on the Enable/Disable link

This pull request was created from Copilot chat.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.