☰

Twitter / X.com Max-Width Modifier

Image max width on timeline is changed to be larger, so you don't have the stupid gap on the right of 90% of pictures on Twitter/X

  1. // ==UserScript==
  2. // @name         Twitter / X.com Max-Width Modifier
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @description  Image max width on timeline is changed to be larger, so you don't have the stupid gap on the right of 90% of pictures on Twitter/X 
  6. // @author       @okitafan
  7. // @match        https://twitter.com/*
  8. // @match        https://x.com/*
  9. // @grant        none
  10. // @run-at       document-start
  11. // @license      MIT
  12. // ==/UserScript==
  13.  
  14. (function() {
  15.     'use strict';
  16.  
  17.     // Function to replace max-width values
  18.     function updateMaxWidths() {
  19.         // Select all elements with style attribute containing max-width: 300px
  20.         const elements = document.querySelectorAll('[style*="max-width: 300px"]');
  21.  
  22.         // Loop through elements and update their style
  23.         elements.forEach(element => {
  24.             const currentStyle = element.getAttribute('style');
  25.             if (currentStyle && currentStyle.includes('max-width: 300px')) {
  26.                 const newStyle = currentStyle.replace('max-width: 300px', 'max-width: 450px');
  27.                 element.setAttribute('style', newStyle);
  28.             }
  29.         });
  30.     }
  31.  
  32.     // Create an observer to watch for DOM changes (for infinite scrolling)
  33.     const observer = new MutationObserver(function(mutations) {
  34.         updateMaxWidths();
  35.     });
  36.  
  37.     // Start observing when the DOM is ready
  38.     function startObserving() {
  39.         const targetNode = document.body;
  40.         const config = { childList: true, subtree: true };
  41.         observer.observe(targetNode, config);
  42.  
  43.         // Run initial update
  44.         updateMaxWidths();
  45.     }
  46.  
  47.     // Run when DOM is fully loaded
  48.     if (document.readyState === 'loading') {
  49.         document.addEventListener('DOMContentLoaded', startObserving);
  50.     } else {
  51.         startObserving();
  52.     }
  53. })();