Force 1920px width watch screen layout on bigger screens

[devtweakr]

YT changed something that makes layout very bad on 1440p monitors, so I had LLM generate a script to force YT to detect screen as 1080p and set layout which is how the watch page previously looked. Can you add an option to force 1080p layout? Maybe you can use some functionality of script below.

Here is the Tempermonkey / Greasemonkey script:

(function() {
    'use strict';

    // Store original methods to restore if needed
    const originalScreen = { ...window.screen };
    const originalInnerWidth = window.innerWidth;
    const originalInnerHeight = window.innerHeight;

    // Override screen object
    Object.defineProperty(window, 'screen', {
        value: {
            width: 1920,
            height: 1080,
            availWidth: 1920,
            availHeight: 1080,
            colorDepth: originalScreen.colorDepth,
            pixelDepth: originalScreen.pixelDepth
        },
        configurable: false
    });

    // Override clientWidth and clientHeight for document body
    if (Object.defineProperty) {
        try {
            Object.defineProperty(document.documentElement, 'clientWidth', {
                value: 1920,
                configurable: false
            });
            Object.defineProperty(document.documentElement, 'clientHeight', {
                value: 1080,
                configurable: false
            });
        } catch (e) {
            console.warn('Could not override clientWidth/clientHeight', e);
        }
    }

    // Override window.outerWidth and window.outerHeight
    Object.defineProperty(window, 'outerWidth', {
        value: 1920,
        configurable: false
    });

    Object.defineProperty(window, 'outerHeight', {
        value: 1080,
        configurable: false
    });

    // Intercept and modify addEventListener for resize events
   const originalAddEventListener = window.addEventListener;
    window.addEventListener = function(type, listener, options) {
        if (type === 'resize') {
            const modifiedListener = function(event) {
                Object.defineProperty(event, 'target', {
                    value: { innerWidth: 1920, innerHeight: 1080 }
                });
                listener(event);
            };
            return originalAddEventListener.call(this, type, modifiedListener, options);
        }
        return originalAddEventListener.call(this, type, listener, options);
    };

    // Log to confirm script is running
    console.log('Screen width override active');
})();

[VampireChicken12]

@devtweakr thank you for making this discussion, I will look into it when I am free.

[devtweakr]

I updated the initial script, this seems to work better, without styling anomalies. I'm still experimenting.