☰

Full Width Tweets for Twitter

Display Tweets in Full-Width

  1. // ==UserScript==
  2. // @name           Full Width Tweets for Twitter
  3. // @namespace      Violentmonkey Scripts
  4. // @match          https://x.com/*
  5. // @match          https://twitter.com/*
  6. // @grant          none
  7. // @version        1.01
  8. // @author         Yukiteru
  9. // @description    Display Tweets in Full-Width
  10. // @license        MIT
  11. // ==/UserScript==
  12.  
  13.  
  14. (function() {
  15.   'use strict';
  16.  
  17.   function applyLayoutStyles() {
  18.     const sidebar = document.querySelector('[data-testid="sidebarColumn"]');
  19.     const primaryColumn = document.querySelector('[data-testid="primaryColumn"]');
  20.     const innerContainer = document.querySelector('main section[role="region"]')?.parentNode;
  21.  
  22.     sidebar.style.display = 'none';
  23.     primaryColumn.style.maxWidth = 'none';
  24.  
  25.     if (innerContainer) {
  26.       innerContainer.style.maxWidth = 'none';
  27.       innerContainer.style.marginRight = '0';
  28.     }
  29.   }
  30.  
  31.   let oldPostCount = 0;
  32.   let postsChecked = false;
  33.  
  34.   function getPostList() {
  35.     const postList = document.querySelectorAll('main section article');
  36.     return postList;
  37.   }
  38.  
  39.   function applyButtonStyles() {
  40.     const postList = getPostList();
  41.     postList.forEach(post => {
  42.       const buttonGroup = post.querySelector('div[role="group"]');
  43.       buttonGroup.style.minWidth = '100%';
  44.     })
  45.   }
  46.  
  47.   function updatePosts() {
  48.     const postCount = getPostList().length;
  49.     if (postCount === oldPostCount) return;
  50.     oldPostCount = postCount;
  51.     applyButtonStyles();
  52.   }
  53.  
  54.   const observer = new MutationObserver((mutationsList, observer) => {
  55.     const primaryColumn = document.querySelector('[data-testid="primaryColumn"]');
  56.     if (primaryColumn) applyLayoutStyles()
  57.     if (!postsChecked && document.querySelector('main section article')) {
  58.       updatePosts();
  59.       postsChecked = true;
  60.     }
  61.   });
  62.  
  63.   document.addEventListener('scroll', () => updatePosts());
  64.   observer.observe(document.body, { childList: true, subtree: true });
  65. })();