Widens the Character.AI chat fields. Also slightly widens the search page.
// ==UserScript==
// @name Character.AI - Widescreen Chat
// @namespace https://greasyfork.org/en/users/1628373-suihtil-cod
// @version 1.0.0
// @description Widens the Character.AI chat fields. Also slightly widens the search page.
// @match https://character.ai/*
// @icon https://character.ai/favicon.ico
// @license MIT
// @grant none
// ==/UserScript==
// Inspired by "WideScreen Chat" userscript by Teleman Florentin.
// Development assisted by ChatGPT (OpenAI).
(function(){
// Inject the custom stylesheet used by this userscript.
function injectCustomStyles(){
const style=document.createElement("style");
// All rules are scoped under the "widechat" class so they
// only take effect when that class is present on <body>.
style.textContent=".widechat .max-w-xl,.widechat .max-w-3xl,.widechat .max-w-2xl{max-width:60rem!important;min-width:95%!important}.widechat .transition-width.w-7{width:0!important}.widechat .ml-7{margin-left:0!important}.widechat .chat-message{text-align:left!important}.widechat [data-testid='completed-message'],.widechat [data-testid='completed-message']>*{justify-content:flex-start!important;text-align:left!important}";
document.head.appendChild(style);
}
// Enable the stylesheet by adding our namespace class.
function addWideChatClass(){
document.body.classList.add("widechat");
}
// Character AI frequently mutates the page, so make sure the
// class remains present after any DOM changes.
function observeBody(){
new MutationObserver(()=>addWideChatClass()).observe(document.body,{childList:true,subtree:true});
// Apply immediately.
addWideChatClass();
}
// Initialize.
injectCustomStyles();
observeBody();
})();