Fishtank Chat Expander

Adds an "Expand" button (↔️) to the top of the chatbox
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         Fishtank Chat Expander
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Adds an "Expand" button (↔️) to the top of the chatbox
// @author       @c
// @match        *://*.fishtank.live/*
// @grant        GM_addStyle
// @license      MIT
// ==/UserScript==

(function() {
    'use strict';
    const C = 'ft-expanded';
    GM_addStyle(`
        body.modern.${C} main,body.modern.${C} .pb-10{display:none!important}
        body.modern.${C} div.fixed:has(#chat-input){inset:88px 20px 80px!important;width:auto!important;height:auto!important;margin:0!important;transform:none!important;z-index:5!important}
        body.classic.${C} [class*="layout_left"],body.classic.${C} [class*="layout_center"],body.classic.${C} [class*="layout_mobile-xp-bar"]{display:none!important}
        body.classic.${C} [class*="layout_layout"]{display:block!important}
        body.classic.${C} [class*="layout_right"]{width:100%!important;max-width:none!important;padding:0 20px!important}
        body.classic.${C} [class*="chat_chat"]{height:calc(100vh - 120px)!important}
        @media(max-width:1024px){
            body.${C} div.fixed:has(#chat-input),body.${C} [class*="layout_right"]{position:fixed!important;inset:0!important;z-index:9999!important;height:100dvh!important}
        }
    `.replace(/\s+/g, ' '));

    const S = () => {
        if (document.getElementById('chat-expander')) return;
        const classic = !!document.querySelector('[class*="layout_layout"]');
        document.body.classList.add(classic ? 'classic' : 'modern');
        const container = classic
            ? document.querySelector('[class*="chat-room-selector"]')
            : document.querySelector('.flex.items-center.gap-0\\.5');
        if (!container) return;

        const btn = document.createElement('button');
        btn.id = 'chat-expander';
        btn.innerHTML = '<div style="font-size:14px;width:22px;cursor:pointer;">↔️</div>';
        if (!classic) {
            btn.className = 'bg-gradient-to-r from-tertiary-500 to-tertiary-600/75 p-0.5 rounded-md mr-1';
            btn.firstChild.className = 'bg-gradient-to-t from-tertiary-400 to-tertiary-500 text-light-text p-1 rounded-sm';
        } else {
            btn.style.cssText = 'background:rgba(0,0,0,0.2);border:1px solid #000;border-radius:4px;margin-right:8px;padding:2px;';
        }
        btn.onclick = e => {
            e.preventDefault(); e.stopPropagation();
            const active = document.body.classList.toggle(C);
            btn.querySelector('div').textContent = active ? '↙️' : '↔️';
            window.dispatchEvent(new Event('resize'));
        };
        classic ? container.parentNode.insertBefore(btn, container) : container.prepend(btn);
    };

    new MutationObserver(S).observe(document.body, { childList: true, subtree: true });
})();