Fixes menus and dropdowns that are cut off or unclickable in Home Assistant Web GUI (Web Awesome components bugs).
// ==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);
})();