Row 43277

Row ID: 43277 | Dataset Entry | Axioma AXP Content Repository

Content Data

This page contains data entry 43277 from the Axioma AXP content repository. The structured data below represents the complete record for this entry.

Thank you for sharing, it works like a charm. I changed input type number to slider and removed unnecessary label like below.

// ==UserScript== // @name Modifiable Width Chat GPT // @namespace http://tampermonkey.net/ // @version 0.2 // @description Adjusts width of side bar and messages of the ChatGPT web interface // @author alexchexes // @match https://chat.openai.com/* // @match https://chatgpt.com/* // @icon https://www.google.com/s2/favicons?sz=64&domain=openai.com // @grant none // ==/UserScript== (function () { let widthPercentage = 70; // Set the width percentage here function applyStyles() { let left_panel_container_selector = `.flex-shrink-0.overflow-x-hidden.bg-gray-900[style^="width: 260px"]`; let cssStyles = ` /* userscripts css */ /* Messages body width */ @media (min-width: 1280px) { .xl\\:max-w-3xl { max-width: ${widthPercentage}% !important; } } @media (min-width: 1024px) { .lg\\:max-w-\\[38rem\\] { max-width: ${widthPercentage}% !important; } } @media (min-width: 768px) { .md\\:max-w-2xl, .md\\:max-w-3xl { max-width: ${widthPercentage}% !important; } } /* Panel with chats list on the left */ ${left_panel_container_selector}, ${left_panel_container_selector} .w-\\[260px\\] { width: 330px !important; } /* Code Font */ code, pre { font-family: Consolas, Söhne Mono, Monaco, Andale Mono, Ubuntu Mono, monospace!important; /* font-family: Iosevka Custom, Söhne Mono, Monaco, Andale Mono, Ubuntu Mono, monospace!important; */ /* font-size: 12px !important; */ } /* Code Background Color */ .bg-black { background-color: #171a21; } /* Sidebar chat list elements */ a.flex.py-3.px-3.items-center.gap-3.relative.rounded-md.hover\\:bg-\\[\\#2A2B32\\].cursor-pointer.break-all.hover\\:pr-4.bg-gray-900.group { padding-right: unset !important; } .flex-1.text-ellipsis.max-h-5.overflow-hidden.break-all.relative { overflow: visible; max-height: fit-content; word-break: break-word; } .absolute.inset-y-0.right-0.w-8.z-10.bg-gradient-to-l.from-gray-900.group-hover\\:from-\\[\\#2A2B32\\] { background: none; } /* Width input styles */ #widthInputContainer { position: absolute; top: 15px; right: 120px; z-index: 1000; font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; margin: 0; padding: 0; } #widthInputButton { width: 100px; /* Adjust the width as needed */ height: 25px; background-color: #171a21; border-width:0px; `; cssStyles = cssStyles.replaceAll("\t", ' '); // Create a new <style> element and set its content to the CSS rules var styleElement = document.createElement("style"); styleElement.innerHTML = cssStyles; // Append the new <style> element to the <head> section of the document document.head.appendChild(styleElement); } applyStyles(); // Create and append the width input let widthInputContainer = document.createElement('div'); widthInputContainer.id = 'widthInputContainer'; let inputButton = document.createElement('input'); inputButton.id = 'widthInputButton'; inputButton.type = 'range'; inputButton.value = widthPercentage; inputButton.addEventListener('change', function (event) { widthPercentage = event.target.value; applyStyles(); }); widthInputContainer.appendChild(inputButton); document.body.appendChild(widthInputContainer); })();

FieldValue
text Thank you for sharing, it works like a charm. I changed input type number to slider and removed unnecessary label like below. // ==UserScript== // @name Modifiable Width Chat GPT // @namespace http://tampermonkey.net/ // @version 0.2 // @description Adjusts width of side bar and messages of the ChatGPT web interface // @author alexchexes // @match https://chat.openai.com/* // @match https://chatgpt.com/* // @icon h…
label r/chatgpt
dataType comment
communityName r/ChatGPT
datetime 2024-05-22
username_encoded Z0FBQUFBQm5Lak1OTjBPWGNlU3FDUEkweUptZXFBQXk2U0VySjZzZzYyTHNzT2thc3l1NDZhYmo1WHdLc2NRblZRMEU0aHE4eHdIcEdfTjg3WXBHMFhwcmpiRThMT2J2ckE9PQ==
url_encoded Z0FBQUFBQm5Lak9kbzYyQ054YzliamxNLVNJeFJOamtkTGxOaFQ3RjZuOEh1RllkRTRqQ0pSZGpTbGhCOEtMcGZDOHFSNjRvb3ZjSGdhb2Qxa2hPY1FUSXFYWXdoVDNYOW1wOThRSWJZWVBkbldJUXhUbkdjbmwyYjNGMjA5RVRJb2FoemxqVlZhaXgtWnZHTXhUQ25BS293WGphN2t4NThId2hBdXpPUUpiNG1OZjhoWDZyNWpWZmU1eGRFRlJGYWNHWVZCUUx4STNl

Raw Record

{
  "text": "Thank you for sharing, it works like a charm. I changed input type number to slider and removed unnecessary label like below.\n\n    // ==UserScript==\n    // @name         Modifiable Width Chat GPT\n    // @namespace    http://tampermonkey.net/\n    // @version      0.2\n    // @description  Adjusts width of side bar and messages of the ChatGPT web interface\n    // @author       alexchexes\n    // @match        https://chat.openai.com/*\n    // @match        https://chatgpt.com/*\n    // @icon         https://www.google.com/s2/favicons?sz=64&domain=openai.com\n    // @grant        none\n    // ==/UserScript==\n    \n    (function () {\n      let widthPercentage = 70; // Set the width percentage here\n    \n      function applyStyles() {\n        let left_panel_container_selector = `.flex-shrink-0.overflow-x-hidden.bg-gray-900[style^=\"width: 260px\"]`;\n    \n        let cssStyles = `\n          /* userscripts css */\n    \n          /* Messages body width */\n          @media (min-width: 1280px) {\n            .xl\\\\:max-w-3xl {\n              max-width: ${widthPercentage}% !important;\n            }\n          }\n          @media (min-width: 1024px) {\n            .lg\\\\:max-w-\\\\[38rem\\\\] {\n              max-width: ${widthPercentage}% !important;\n            }\n          }\n          @media (min-width: 768px) {\n            .md\\\\:max-w-2xl,\n            .md\\\\:max-w-3xl {\n              max-width: ${widthPercentage}% !important;\n            }\n          }\n    \n          /* Panel with chats list on the left */\n          ${left_panel_container_selector},\n          ${left_panel_container_selector} .w-\\\\[260px\\\\] {\n            width: 330px !important;\n          }\n    \n          /* Code Font */\n          code,\n          pre {\n            font-family: Consolas, Söhne Mono, Monaco, Andale Mono, Ubuntu Mono, monospace!important;\n            /* font-family: Iosevka Custom, Söhne Mono, Monaco, Andale Mono, Ubuntu Mono, monospace!important; */\n            /* font-size: 12px !important; */\n          }\n    \n          /* Code Background Color */\n          .bg-black {\n            background-color: #171a21;\n          }\n    \n          /* Sidebar chat list elements */\n          a.flex.py-3.px-3.items-center.gap-3.relative.rounded-md.hover\\\\:bg-\\\\[\\\\#2A2B32\\\\].cursor-pointer.break-all.hover\\\\:pr-4.bg-gray-900.group {\n            padding-right: unset !important;\n          }\n    \n          .flex-1.text-ellipsis.max-h-5.overflow-hidden.break-all.relative {\n            overflow: visible;\n            max-height: fit-content;\n            word-break: break-word;\n          }\n    \n          .absolute.inset-y-0.right-0.w-8.z-10.bg-gradient-to-l.from-gray-900.group-hover\\\\:from-\\\\[\\\\#2A2B32\\\\] {\n            background: none;\n          }\n    \n          /* Width input styles */\n        #widthInputContainer {\n          position: absolute;\n          top: 15px;\n          right: 120px;\n          z-index: 1000;\n          font-family: inherit;\n          font-size: 100%;\n          font-weight: inherit;\n          line-height: inherit;\n          margin: 0;\n          padding: 0;\n        }\n    \n        #widthInputButton {\n          width: 100px; /* Adjust the width as needed */\n          height: 25px;\n          background-color: #171a21;\n          border-width:0px;\n        `;\n    \n        cssStyles = cssStyles.replaceAll(\"\\t\", ' ');\n    \n        // Create a new <style> element and set its content to the CSS rules\n        var styleElement = document.createElement(\"style\");\n        styleElement.innerHTML = cssStyles;\n    \n        // Append the new <style> element to the <head> section of the document\n        document.head.appendChild(styleElement);\n      }\n    \n      applyStyles();\n    \n      // Create and append the width input\n      let widthInputContainer = document.createElement('div');\n      widthInputContainer.id = 'widthInputContainer';\n    \n      let inputButton = document.createElement('input');\n      inputButton.id = 'widthInputButton';\n      inputButton.type = 'range';\n      inputButton.value = widthPercentage;\n      inputButton.addEventListener('change', function (event) {\n        widthPercentage = event.target.value;\n        applyStyles();\n      });\n    \n      widthInputContainer.appendChild(inputButton);\n    \n      document.body.appendChild(widthInputContainer);\n    })();",
  "label": "r/chatgpt",
  "dataType": "comment",
  "communityName": "r/ChatGPT",
  "datetime": "2024-05-22",
  "username_encoded": "Z0FBQUFBQm5Lak1OTjBPWGNlU3FDUEkweUptZXFBQXk2U0VySjZzZzYyTHNzT2thc3l1NDZhYmo1WHdLc2NRblZRMEU0aHE4eHdIcEdfTjg3WXBHMFhwcmpiRThMT2J2ckE9PQ==",
  "url_encoded": "Z0FBQUFBQm5Lak9kbzYyQ054YzliamxNLVNJeFJOamtkTGxOaFQ3RjZuOEh1RllkRTRqQ0pSZGpTbGhCOEtMcGZDOHFSNjRvb3ZjSGdhb2Qxa2hPY1FUSXFYWXdoVDNYOW1wOThRSWJZWVBkbldJUXhUbkdjbmwyYjNGMjA5RVRJb2FoemxqVlZhaXgtWnZHTXhUQ25BS293WGphN2t4NThId2hBdXpPUUpiNG1OZjhoWDZyNWpWZmU1eGRFRlJGYWNHWVZCUUx4STNl"
}
Explore Dataset Explore Row

Entry Information