Tampermonkey UserScript - Full Width ChatGPT Chat Window With Hide Sidebar Toggle Button

ChatGPT_FullWidth_HideSidebar.user.js

// ==UserScript==
// @name         Expand ChatGPT Chat Window
// @namespace    chatgpt-wider-window
// @version      1.1
// @description  Expands the width of the ChatGPT chat window for a better viewing experience.
// @author       Forzza Services
// @match        https://chat.openai.com/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    GM_addStyle(`
        div.flex.p-4.gap-4.text-base.md\\:gap-6.md\\:max-w-2xl.lg\\:max-w-xl.xl\\:max-w-3xl.md\\:py-6.lg\\:px-0.m-auto {
            width: calc(100% - 10px) !important;
            max-width: none !important;
            padding-left: 10px !important;
        }

        button#sidebar-toggle-button {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
            background-color: #fff;
            color: #6366F1;
            border: none;
            padding: 12px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            line-height: 1;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        button#sidebar-toggle-button:hover {
            background-color: #6366F1;
            color: #fff;
        }

        button#sidebar-toggle-button:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);
        }

        button#sidebar-toggle-button::before {
            content: '☰';
            margin-right: 8px;
        }

        button#sidebar-toggle-button.closed::before {
            content: '☷';
        }

        div.dark.flex-shrink-0.overflow-x-hidden.bg-gray-900 {
            width: 260px;
            transition: width 0.3s ease;
            resize: horizontal;
            overflow: hidden;
            box-sizing: border-box;
            cursor: ew-resize;
        }

        div.dark.flex-shrink-0.overflow-x-hidden.bg-gray-900.hidden {
            width: 0 !important;
            transition: width 0.3s ease;
        }
    `);

    // Create the button element
    const sidebarToggleButton = document.createElement('button');
    sidebarToggleButton.id = 'sidebar-toggle-button';
    sidebarToggleButton.innerText = 'Toggle Sidebar';

    // Add click event listener to toggle the sidebar
    sidebarToggleButton.addEventListener('click', () => {
        const sidebar = document.querySelector('div.dark.flex-shrink-0.overflow-x-hidden.bg-gray-900');
        if (sidebar) {
            sidebar.classList.toggle('hidden');
        }
        sidebarToggleButton.classList.toggle('closed');
    });

    // Append the button to the document body
    document.body.appendChild(sidebarToggleButton);


})();