Taller Zendesk Macro Menu

// ==UserScript==
// @name         Zendesk Taller Macro Menu (75% Height with Scrolling)
// @namespace    http://tampermonkey.net/
// @version      1.3
// @description  Makes the Zendesk macro dropdown menu 75% of window height with working scroll and navigation
// @author       You
// @match        https://*.zendesk.com/agent/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    // Add custom CSS for the macro menu
    GM_addStyle(`
        /* Main macro dropdown - set height but keep overflow auto for scrolling */
        .macro-suggestions,
        .macros_dropdown,
        [data-test-id="macro-suggestions"],
        [data-garden-id="dropdowns.menu"],
        [aria-label*="macro" i] {
            max-height: 75vh !important;
            height: auto !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
        }

        /* Inner scrollable container - if it exists separately */
        .macro-list,
        .macros-list,
        [data-test-id="macro-list"],
        [data-garden-id="dropdowns.menu"] > ul,
        .macros_dropdown > ul,
        .macro-suggestions > ul {
            max-height: calc(75vh - 40px) !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
        }

        /* Keep navigation header visible */
        .macro-suggestions-header,
        .macros_dropdown-header,
        .macro-navigation,
        .macro-folder-navigation,
        [data-test-id="macro-suggestions"] > div:first-child:has(button),
        [data-garden-id="dropdowns.menu"] > header {
            position: sticky !important;
            top: 0 !important;
            z-index: 100 !important;
            background: white !important;
            border-bottom: 1px solid #e9ebed !important;
        }

        /* Back button and breadcrumbs */
        [aria-label="Back"],
        [data-test-id="back-button"],
        button[aria-label*="folder"],
        .macro-folder-back {
            display: flex !important;
            visibility: visible !important;
        }

        /* Search box if present */
        .macro-search,
        input[placeholder*="Search macros"],
        input[placeholder*="Filter macros"] {
            position: sticky !important;
            top: 0 !important;
            z-index: 99 !important;
            background: white !important;
        }

        /* Ensure proper scrollbar styling */
        .macro-suggestions::-webkit-scrollbar,
        .macro-list::-webkit-scrollbar,
        [data-garden-id="dropdowns.menu"]::-webkit-scrollbar {
            width: 8px !important;
        }

        .macro-suggestions::-webkit-scrollbar-track,
        .macro-list::-webkit-scrollbar-track,
        [data-garden-id="dropdowns.menu"]::-webkit-scrollbar-track {
            background: #f1f1f1 !important;
        }

        .macro-suggestions::-webkit-scrollbar-thumb,
        .macro-list::-webkit-scrollbar-thumb,
        [data-garden-id="dropdowns.menu"]::-webkit-scrollbar-thumb {
            background: #888 !important;
            border-radius: 4px !important;
        }

        /* Individual macro items */
        .macro-item,
        .macro-suggestion-item {
            padding: 8px 12px !important;
        }
    `);

    // Simpler JavaScript approach focusing on height only
    function expandMacroMenu() {
        const windowHeight = window.innerHeight;
        const menuHeight = Math.floor(windowHeight * 0.75);

        // Target all possible macro menu containers
        const selectors = [
            '.macro-suggestions',
            '.macros_dropdown',
            '[data-test-id="macro-suggestions"]',
            '[data-garden-id="dropdowns.menu"]',
            '[aria-label*="macro" i]'
        ];

        selectors.forEach(selector => {
            const elements = document.querySelectorAll(selector);
            elements.forEach(element => {
                if (element && element.textContent.includes('macro')) {
                    // Set max height and ensure scrolling works
                    element.style.maxHeight = `${menuHeight}px`;
                    element.style.overflowY = 'auto';
                    element.style.overflowX = 'hidden';

                    // Find any inner list containers and ensure they can scroll too
                    const innerLists = element.querySelectorAll('ul, .macro-list, .macros-list');
                    innerLists.forEach(list => {
                        list.style.maxHeight = `${menuHeight - 40}px`;
                        list.style.overflowY = 'auto';
                        list.style.overflowX = 'hidden';
                    });
                }
            });
        });
    }

    // Run after a short delay to ensure DOM is ready
    setTimeout(expandMacroMenu, 500);

    // Re-run on window resize
    window.addEventListener('resize', expandMacroMenu);

    // Observer for dynamic content
    const observer = new MutationObserver(() => {
        expandMacroMenu();
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();