☰

Google AI Studio Full/Max Width Fix

Sets style="max-width: 100%;" on dynamically loaded chat elements including the prompt box by matching specific classes to fix overflow issues.

// ==UserScript==
// @name         Google AI Studio Full/Max Width Fix
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Sets style="max-width: 100%;" on dynamically loaded chat elements including the prompt box by matching specific classes to fix overflow issues.
// @author       Ȼaptain Jøhn “Søap” MacTavish
// @match        https://aistudio.google.com/*
// @grant        none
// @run-at       document-idle
// @license      MIT
// ==/UserScript==

(
    function()
    {
        'use strict';

        // The combined CSS selector for the target elements.
        // Note: The second class is a compound selector using two classes on the same element.
        const targetSelector = '.ng-star-inserted, .mat-mdc-tooltip-trigger.prompt-input-wrapper';

        /**
         * Applies the desired style (max-width: 100%) to all matching elements
         * within a specified root element.
         *
         * @param {Node} rootElement The element to start searching from (usually document or a mutation node).
         */
        const applyStyles =
        (
            rootElement = document
        ) =>
        {
            // Find all elements matching the selector
            const elements = rootElement.querySelectorAll(targetSelector);

            elements.forEach
            (
                (element) =>
                {
                    // Only apply if it doesn't already have the correct inline style
                    if (element.style.maxWidth !== '100%')
                    {
                        element.style.maxWidth = '100%';
                        // console.log("Applied max-width: 100% to element:", element);
                    }
                }
            );
        };

        /**
         * The callback function for the MutationObserver.
         * It runs applyStyles on all newly added nodes.
         *
         * @param {Array<MutationRecord>} mutationsList The list of detected mutations.
         */
        const observerCallback =
        (
            mutationsList,
            observer
        ) =>
        {
            for (const mutation of mutationsList)
            {
                if (mutation.type === 'childList')
                {
                    // Iterate over all newly added nodes
                    mutation.addedNodes.forEach
                    (
                        (node) =>
                        {
                            // Ensure the node is an Element node (type 1)
                            if (node.nodeType === 1)
                            {
                                // Apply styles to the added node itself and its descendants
                                applyStyles(node);

                                // If the node itself matches the selector, apply style
                                if (node.matches(targetSelector))
                                {
                                    node.style.maxWidth = '100%';
                                }
                            }
                        }
                    );
                }
            }
        };


        // --- Initialization ---

        // 1. Apply styles on initial load for elements already in the DOM
        applyStyles();

        // 2. Set up the MutationObserver to handle dynamic content
        const observer = new MutationObserver(observerCallback);

        // Configuration for the observer: watch for new children anywhere in the body
        const observerConfig =
        {
            childList: true,
            subtree: true
        };

        // Start observing the document body for configured mutations
        observer.observe(document.body, observerConfig);
    }
)();