Janitor AI - Set max width

Override max-width from media query CSS

スクリプトをインストールするには、Tampermonkey, GreasemonkeyViolentmonkey のような拡張機能のインストールが必要です。

You will need to install an extension such as Tampermonkey to install this script.

スクリプトをインストールするには、TampermonkeyViolentmonkey のような拡張機能のインストールが必要です。

スクリプトをインストールするには、TampermonkeyUserscripts のような拡張機能のインストールが必要です。

このスクリプトをインストールするには、Tampermonkeyなどの拡張機能をインストールする必要があります。

このスクリプトをインストールするには、ユーザースクリプト管理ツールの拡張機能をインストールする必要があります。

(ユーザースクリプト管理ツールは設定済みなのでインストール!)

このスタイルをインストールするには、Stylusなどの拡張機能をインストールする必要があります。

このスタイルをインストールするには、Stylus などの拡張機能をインストールする必要があります。

このスタイルをインストールするには、Stylus tなどの拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

(ユーザースタイル管理ツールは設定済みなのでインストール!)

このスクリプトの質問や評価の投稿はこちら通報はこちらへお寄せください
// ==UserScript==
// @name         Janitor AI - Set max width
// @namespace
// @version      1.2
// @description  Override max-width from media query CSS
// @match        https://janitorai.com/chats/*
// @license      MIT
// @grant        none
// @namespace https://greasyfork.org/users/1498687
// ==/UserScript==

// === CONFIGURATION ===
const MAX_WIDTH = '80%'; // 'none', '100%', '1200px', etc.
const ALIGNMENT = 'center'; // 'left', 'center', or 'right'
const TARGET_CLASS = '_messagesMain_1lmk5_10';
const MEDIA_QUERY = '(min-width: 30em)';

// === SCRIPT ===
(function() {
    'use strict';

    // Determine margins based on alignment
    let marginLeft = '0';
    let marginRight = '0';

    if (ALIGNMENT === 'center') {
        marginLeft = 'auto';
        marginRight = 'auto';
    } else if (ALIGNMENT === 'right') {
        marginLeft = 'auto';
        marginRight = '0';
    } else if (ALIGNMENT === 'left') {
        marginLeft = '0';
        marginRight = 'auto';
    }

    const style = document.createElement('style');
    style.innerHTML = `
        @media ${MEDIA_QUERY} {
            .${TARGET_CLASS} {
                max-width: ${MAX_WIDTH} !important;
                width: 100% !important;

                margin-left: ${marginLeft} !important;
                margin-right: ${marginRight} !important;
            }
        }
    `;
    document.head.appendChild(style);
})();