☰

ChatGPT responsive + customizations

ChatGPT website is more suitable for wide screens.

  1. /* ==UserStyle==
  2. @name           ChatGPT responsive + customizations
  3. @version        1.0.12
  4. @description    ChatGPT website is more suitable for wide screens.
  5. @author         BreatFR (https://breat.fr)
  6. @namespace      https://gitlab.com/breatfr
  7. @homepageURL    https://gitlab.com/breatfr/chatgpt
  8. @supportURL     https://discord.gg/Q8KSHzdBxs
  9. @license        AGPL-3.0-or-later; https://www.gnu.org/licenses/agpl-3.0.txt
  10. @preprocessor   stylus
  11.  
  12. @var    text        fontsize        "Custom font size"  1.2rem
  13. @var    checkbox    biggertextarea  "Bigger textarea"   1
  14. @var    checkbox    nochatgptplus   "No ChatGPT plus"   1
  15. @var    checkbox    widemode        "Wide mode"         1
  16. ==/UserStyle== */
  17.  
  18. /* === Credits ===
  19. Website         https://breat.fr
  20. facebook        https://www.facebook.com/breatfroff
  21. mastodon        https://mastodon.social/@breat_fr
  22. telegram        https://t.me/breatfr
  23. vk              https://vk.com/breatfroff
  24. X (twitter)     https://x.com/breatfroff
  25. === Credits === */
  26.  
  27. @-moz-document domain("chatgpt.com") {
  28.     /* Custom font size */
  29.     :root {
  30.         font-size: fontsize;
  31.     }
  32.     
  33.     if biggertextarea {
  34.         .max-h-\\[25dvh\\],
  35.         .max-h-52 {
  36.             max-height: 80vh;
  37.         }
  38.     }
  39.     
  40.     if nochatgptplus {
  41.         /* Menu obtain ChatGPT Plus */
  42.         nav > div:nth-of-type(3) {
  43.             display: none;
  44.         }
  45.  
  46.         /* You reached limit above textarea */
  47.         main > div:nth-of-type(1) > div:nth-of-type(1) > div > div > div > div {
  48.             padding-bottom: 0 !important;
  49.         }
  50.         div[class="flex items-center m-1.5 p-2.5 text-sm cursor-pointer focus-visible:outline-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 group relative hover:bg-[#f5f5f5] focus-visible:bg-[#f5f5f5] radix-state-open:bg-[#f5f5f5] dark:hover:bg-token-main-surface-secondary dark:focus-visible:bg-token-main-surface-secondary rounded-md my-0 px-3 mx-2 dark:radix-state-open:bg-token-main-surface-secondary gap-2.5 py-3 !pr-3"],
  51.         div[class="max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto min-w-fit py-2"] > div:nth-of-type(5) {
  52.             display: none !important;
  53.         }
  54.         body:has(form > div > div:nth-of-type(1) > div > div > div[style="opacity: 1; will-change: auto;"] > button) {
  55.             main > div:nth-of-type(1) > div:nth-of-type(1) > div > div > div > div {
  56.                 padding-bottom: 2em !important;
  57.             }
  58.         }
  59.     }
  60.     
  61.     if widemode {
  62.         .md\\:max-w-3xl,
  63.         .max-w-3xl {
  64.             max-width: 100%;
  65.         }
  66.         
  67.         pre > div > div:nth-of-type(3) {
  68.             box-sizing: border-box !important;
  69.             max-width: 100% !important;
  70.             overflow: hidden !important;
  71.         }
  72.         code.hljs {
  73.             max-width: 100% !important;
  74.             width: 100% !important;
  75.             white-space: break-spaces !important;
  76.         }
  77.     
  78.         /* Hide scrollbars */
  79.         * {
  80.             scrollbar-width: none !important;
  81.             -ms-overflow-style: none !important;
  82.             -moz-overflow-style: none !important;
  83.             -webkit-overflow-style: none !important;
  84.         }    
  85.         ::-webkit-scrollbar {
  86.             display: none !important;
  87.             width: 0 !important;
  88.         }
  89.     }
  90. }