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.1
// @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 finalCSS = `
/* ABSOLUTE PRIORITY FOR ALL TYPES OF MENUS */
ha-dropdown[open], .mdc-menu-surface--open,
div#menu, [part="menu"], .ha-dropdown-menu,
wa-popup[active], ha-dropdown-item {
z-index: 2147483647 !important;
pointer-events: all !important;
visibility: visible !important;
display: flex !important;
}
/* TABLE AND VIRTUALIZER - Breaking the barriers of cutting/intersecting */
.mdc-data-table__row,
.mdc-data-table__cell,
lit-virtualizer {
overflow: visible !important;
contain: none !important;
}
/* Raise the active row above the others when you interact with it */
.mdc-data-table__row:focus-within {
z-index: 1000 !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), 1500);
// Add global style to main elements of the document
const mainS = document.createElement('style');
mainS.textContent = finalCSS;
document.head.appendChild(mainS);
})();