HA menu fix

Greasy Fork is available in English.
HA menu fix

Fixes menus and dropdowns that are cut off or unclickable in Home Assistant Web GUI (Web Awesome components bugs).
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         HA menu fix
// @namespace    http://tampermonkey.net/
// @version      1.0.2
// @description  Fixes menus and dropdowns that are cut off or unclickable in Home Assistant Web GUI (Web Awesome components bugs).
// @author       BluffingJohn
// @match        *://homeassistant.local/*
// @match        *://homeassistant/*
// @include      *://*:8123/*
// @grant        none
// @run-at       document-idle
// @noframes
// @icon         https://www.google.com/s2/favicons?sz=64&domain=home-assistant.io
// @license      MIT
// ==/UserScript==

(function() {
	'use strict';

	const ver  = '1.0.2';
	const loop = 1500; //run every 1,5s
	let debug  = false; //Change to true to see where the script is doing its work
	console.log("%c[JS] HA menu fix v" + ver + " loaded.", "color: #208AEE; font-weight: bold;");

	let finalCSS = `
		/* ABSOLUTE PRIORITY FOR ALL TYPES OF MENUS */
		ha-dropdown[open], .ha-dropdown-menu, ha-dropdown-item, div#menu, [part="menu"], .mdc-menu-surface--open, wa-popup[active] { 
			z-index: 2147483647 !important;
			pointer-events: all !important;
			visibility: visible !important;
			display: flex !important;
		}

		/* TABLE AND VIRTUALIZER - Only break barriers if NOT in a combo-box/picker */
		.mdc-data-table__row, .mdc-data-table__cell, lit-virtualizer:not(.virtualizer-wrapper lit-virtualizer) {
			overflow: visible !important;
			contain: none !important;
		}

		/* Keep scroll in combo-box/pickers */
		.virtualizer-wrapper lit-virtualizer {
			overflow: auto !important;
			contain: size layout !important;
		}

		/* Raise the active row above the others when you interact with it */
		.mdc-data-table__row:focus-within { 
			z-index: 1000 !important; 
		}
	`;

	if(debug) {
		finalCSS += `
			/* Color borders for debug! */
			ha-dropdown[open], .mdc-menu-surface--open {
				outline: 2px solid lime !important;
			}
			div#menu, [part="menu"] {
				outline: 2px solid magenta !important;
			}
		`;
	}

	const applyStyles = (root) => {
		if (!root) return;
		// Inject styles into each new Shadow DOM discovered to fix the 'menu' elements
		if (root instanceof ShadowRoot && !root.querySelector('#ha-fix-final')) {
			const s = document.createElement('style');
			s.id = 'ha-fix-final';
			s.textContent = finalCSS;
			root.appendChild(s);
		}
		const all = root.querySelectorAll?.('*') || [];
		all.forEach(el => { if (el.shadowRoot) applyStyles(el.shadowRoot); });
	};

	// Scan every 1.5 seconds to discover and fix new elements/menus
	setInterval(() => applyStyles(document.body), loop);

	// Add global style to main elements of the document
	const mainS = document.createElement('style');
	mainS.textContent = finalCSS;
	document.head.appendChild(mainS);
})();