☰

WhatsApp Fullscreen Mode

Forces WhatsApp Web to fit proportionally in the browser window with proper scaling and positioning

// ==UserScript==
// @name         WhatsApp Fullscreen Mode
// @version      2.4.4
// @description  Forces WhatsApp Web to fit proportionally in the browser window with proper scaling and positioning
// @author       Hikary
// @match        https://web.whatsapp.com/
// @license      MIT
// @grant        none
// @namespace https://greasyfork.org/users/1349112
// ==/UserScript==
(function () {
    'use strict';

    function applyStyles() {
        let styles = `
            body, html {
                margin: 0 !important;
                padding: 0 !important;
                height: 100vh !important;
                width: 100vw !important;
                overflow: hidden !important;
            }
            #app {
                width: 100vw !important;
                height: 100vh !important;
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
            }
            .landing-wrapper {
                width: 100% !important;
                height: 100% !important;
            }
            div.app-wrapper-web {
                width: 100vw !important;
                height: 100vh !important;
                top: 0 !important;
                left: 0 !important;
                position: fixed !important;
                margin: 0 !important;
                padding: 0 !important;
                transform: none !important;
            }
            ._3jRbH {
                width: 100vw !important;
                height: 100vh !important;
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
            }
            .two {
                width: 100vw !important;
                height: 100vh !important;
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
            }
            .app-wrapper-web ._1XkO3 {
                width: 100vw !important;
                height: 100vh !important;
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
            }
            .app-wrapper-web ._1jJ70 {
                width: 100vw !important;
                height: 100vh !important;
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
            }
            /* Remove any potential max-width constraints */
            [data-testid="chat-list"],
            [data-testid="conversation-panel-wrapper"],
            .app > div,
            #main,
            #app > div > div {
                max-width: none !important;
                width: 100% !important;
                height: 100% !important;
            }
        `;

        let styleSheet = document.getElementById('whatsapp-fullscreen-styles');
        if (!styleSheet) {
            styleSheet = document.createElement("style");
            styleSheet.id = 'whatsapp-fullscreen-styles';
            document.head.appendChild(styleSheet);
        }
        styleSheet.textContent = styles;
    }

    function waitForWhatsApp() {
        let retries = 0;
        const maxRetries = 30;

        const checkForApp = setInterval(() => {
            const appWrapper = document.querySelector('div.app-wrapper-web');
            const loading = document.querySelector('div.loading-screen');

            if (appWrapper && !loading) {
                clearInterval(checkForApp);
                applyStyles();

                // Reapply styles after short delays to ensure they take effect
                setTimeout(applyStyles, 500);
                setTimeout(applyStyles, 1000);
                setTimeout(applyStyles, 2000);
            }

            retries++;
            if (retries >= maxRetries) {
                clearInterval(checkForApp);
            }
        }, 1000);
    }

    // Initial load
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', waitForWhatsApp);
    } else {
        waitForWhatsApp();
    }

    // Apply styles on any hash change (WhatsApp navigation)
    window.addEventListener('hashchange', applyStyles);

    // Apply styles on window resize
    window.addEventListener('resize', () => {
        applyStyles();
        // Reapply after a short delay to ensure it takes effect
        setTimeout(applyStyles, 100);
    });
})();