☰

YouTube Layout Fix

Forces 6 videos per row, adjusts text sizes, hides checkmarks, adjusts spacing.

  1. // ==UserScript==
  2. // @name         YouTube Layout Fix
  3. // @namespace    http://tampermonkey.net/
  4. // @version      3.59
  5. // @description  Forces 6 videos per row, adjusts text sizes, hides checkmarks, adjusts spacing.
  6. // @author       Kalakaua
  7. // @match        https://www.youtube.com/*
  8. // @grant        GM_addStyle
  9. // @run-at       document-idle
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     // --- FINAL ADJUSTABLE VALUES (User Prefs) ---
  17.  
  18.     // === Column Layout ===
  19.     const desiredColumnCount      = 6;    // Number of columns for main content grids (Home, Subs, Playlists Feed, Channels)
  20.  
  21.     // === Grid Items - Text Sizes (Home, Subs, Playlists Feed, Channel Pages*) ===
  22.     const gridTitleScale          = 1.12; // Title text size multiplier (em)
  23.     const gridChannelScale        = 0.85; // Channel name text size multiplier (em)
  24.     const gridMetadataScale       = 0.85; // Views/Date text size multiplier (em)
  25.  
  26.     // === Grid Items - Internal Spacing ===
  27.     const gridChannelMarginTop    = "-1px"; // Space above channel name
  28.     const gridMetaMarginTop       = "-4px"; // Space above views/date line
  29.  
  30.     // === Overall Grid Structure ===
  31.     const gridEdgePadding         = "24px"; // Padding on the left/right edges of the main grids
  32.     const gridItemHorizontalMargin= "6px";  // Space between grid items horizontally
  33.     const gridItemBottomMargin    = "24px"; // Space below each grid item
  34.  
  35.     // === Search Results Page (/results) ===
  36.     const searchThumbnailWidth    = "350px"; // Width of video thumbnails
  37.     const searchResultsMarginTop  = "16px";  // Space above the first search result
  38.     const searchTitleScale        = 1.4;     // Scale factor for video titles (based on 1rem)
  39.     const searchChannelScale      = 1.20;    // Scale factor for channel names (based on ~0.8em)
  40.     const searchMetaSnippetScale  = 1.25;    // Scale factor for views/date/description snippet (based on ~0.8em)
  41.     const searchDescFixedWidth    = "800px"; // Fixed width for description snippet container (helps align 3-dot menu)
  42.  
  43.     // === Watch Page - Below Video Player ===
  44.     const watchOwnerChannelScale  = 1.5;  // Scale factor for channel name under video
  45.     const watchTopRowMarginTop    = "-4px"; // Space above views/date line under video title
  46.     const watchSubCountMarginTop  = "-3.5px";// Space above subscriber count
  47.  
  48.     // === Sidebar (Watch Page Right Sidebar - Compact Video List) ===
  49.     const sidebarTitleScale       = 1.05; // Scale factor for video titles
  50.     const sidebarChannelNameScale = 1.0;  // Scale factor for channel names
  51.     const sidebarViewsDateScale   = 1.0; // Scale factor for views/date
  52.     const sidebarTitleMarginBottom= "6px";  // Space below sidebar video titles
  53.  
  54.     // === Sidebar Badge Styling (Watch Page Right Sidebar) ===
  55.     const sidebarBadgeScale       = 0.85; // Scale factor for badges (e.g., "New")
  56.     const sidebarBadgeMarginTop   = "2px";  // Space above badges
  57.     const sidebarBadgeMarginBottom= "0px";  // Space below badges
  58.  
  59.     // === Comment Section (Watch Page) ===
  60.     const commentTextScale        = 1.15; // Scale factor for main comment and reply text (applied to 1rem base)
  61.     const commentMetaScale        = 1.1;  // Scale factor for author/timestamp (applied to ~0.8rem base)
  62.  
  63.     // --- Technical Values ---
  64.     const minimalPxReduction      = "0.01px"; // Minimal reduction for calc() robustness in grid width calculation
  65.  
  66.     // --- END OF ADJUSTABLE VALUES ---
  67.  
  68.  
  69.     const css = `
  70.         :root {
  71.            /* Grid Variables */
  72.            --gm-grid-title-size: ${gridTitleScale}em;
  73.            --gm-grid-channel-size: ${gridChannelScale}em;
  74.            --gm-grid-metadata-size: ${gridMetadataScale}em;
  75.  
  76.            /* Watch Page Variables */
  77.            --gm-watch-owner-channel-size: ${watchOwnerChannelScale}em;
  78.            --gm-watch-title-size: 1.5rem; /* Fixed size for main video title */
  79.  
  80.            /* Sidebar Variables */
  81.            --gm-sidebar-title-size: ${sidebarTitleScale}em;
  82.            --gm-sidebar-channel-size: ${sidebarChannelNameScale}em;
  83.            --gm-sidebar-viewsdate-size: ${sidebarViewsDateScale}em;
  84.            --gm-sidebar-badge-size: ${sidebarBadgeScale}em;
  85.  
  86.            /* Search Results Variables */
  87.            --gm-search-title-scale: ${searchTitleScale};
  88.            --gm-search-channel-scale: ${searchChannelScale};
  89.            --gm-search-metasnippet-scale: ${searchMetaSnippetScale};
  90.            --gm-search-title-size: calc(1.0rem * var(--gm-search-title-scale));
  91.            --gm-search-channel-size: calc(0.8em * var(--gm-search-channel-scale));
  92.            --gm-search-metasnippet-size: calc(0.8em * var(--gm-search-metasnippet-scale));
  93.  
  94.            /* Comment Section Variables (REM based for consistency) */
  95.            --gm-comment-text-final-size: calc(1rem * ${commentTextScale});
  96.            --gm-comment-meta-final-size: calc(0.8rem * ${commentMetaScale});
  97.         }
  98.  
  99.         /* ========================================================== */
  100.         /* === VARIABLE ITEMS PER ROW - MAIN GRIDS === */
  101.         /* ========================================================== */
  102.  
  103.         /* --- Global Container Padding & Width --- */
  104.         #contents.ytd-rich-grid-renderer { padding-left: ${gridEdgePadding} !important; padding-right: ${gridEdgePadding} !important; box-sizing: border-box !important; width: 100% !important; }
  105.         ytd-browse[page-subtype="channels"] #contents.ytd-rich-grid-renderer, ytd-browse[page-subtype="channels"] ytd-item-section-renderer #contents > ytd-rich-grid-renderer { padding-left: ${gridEdgePadding} !important; padding-right: ${gridEdgePadding} !important; box-sizing: border-box !important; width: 100% !important; }
  106.  
  107.         /* --- Rule Set 2: Playlist Feed Specific Styles (ytd-rich-item-renderer, via :not()) --- */
  108.         #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer:not( ytd-browse[page-subtype="home"] #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer, ytd-browse[page-subtype="subscriptions"] #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer, ytd-browse[page-subtype="channels"] #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer ) { margin-left: ${gridItemHorizontalMargin} !important; margin-right: ${gridItemHorizontalMargin} !important; margin-bottom: ${gridItemBottomMargin} !important; max-width: calc(100% / ${desiredColumnCount} - ${gridItemHorizontalMargin} * 2 - ${minimalPxReduction}) !important; }
  109.         #contents.ytd-rich-grid-renderer ytd-rich-item-renderer:not(...) .yt-lockup-metadata-view-model-wiz__title { font-size: var(--gm-grid-title-size) !important; line-height: 1.2em !important; max-height: 2.4em !important; overflow: hidden !important; text-overflow: ellipsis !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; margin-bottom: 1px !important; }
  110.         #contents.ytd-rich-grid-renderer ytd-rich-item-renderer:not(...) .yt-content-metadata-view-model-wiz__metadata-text { font-size: var(--gm-grid-metadata-size) !important; line-height: 1.3em !important; display: inline !important; }
  111.         #contents.ytd-rich-grid-renderer ytd-rich-item-renderer:not(...) .yt-lockup-metadata-view-model-wiz__metadata { margin-top: ${gridMetaMarginTop} !important; line-height: 1.3em; }
  112.         #contents.ytd-rich-grid-renderer ytd-rich-item-renderer:not(...) a.yt-core-attributed-string__link--call-to-action-color { font-size: 0.9em !important; margin-top: 2px !important; }
  113.  
  114.         /* --- Rule Set 1: Home, Subscriptions, AND Channel Homepage Grids (ytd-rich-item-renderer) --- */
  115.         ytd-browse[page-subtype="home"] #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer, ytd-browse[page-subtype="subscriptions"] #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer, ytd-browse[page-subtype="channels"] #contents.ytd-rich-grid-renderer > ytd-rich-item-renderer { margin-left: ${gridItemHorizontalMargin} !important; margin-right: ${gridItemHorizontalMargin} !important; margin-bottom: ${gridItemBottomMargin} !important; max-width: calc(100% / ${desiredColumnCount} - ${gridItemHorizontalMargin} * 2 - ${minimalPxReduction}) !important; border: none !important; }
  116.         ytd-browse[page-subtype="home"] ytd-rich-item-renderer #video-title.ytd-rich-grid-media, ytd-browse[page-subtype="subscriptions"] ytd-rich-item-renderer #video-title.ytd-rich-grid-media, ytd-browse[page-subtype="channels"] ytd-rich-item-renderer #video-title.ytd-rich-grid-media { font-size: var(--gm-grid-title-size) !important; line-height: 1.2em !important; max-height: 2.4em !important; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 1px !important; }
  117.         ytd-browse[page-subtype="home"] ytd-rich-item-renderer #byline-container, ytd-browse[page-subtype="subscriptions"] ytd-rich-item-renderer #byline-container, ytd-browse[page-subtype="channels"] ytd-rich-item-renderer #byline-container { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: flex !important; align-items: center !important; margin-top: ${gridChannelMarginTop} !important; line-height: 1.2em !important; gap: 0 !important; }
  118.         ytd-browse[page-subtype="home"] ytd-rich-item-renderer ytd-channel-name, ytd-browse[page-subtype="subscriptions"] ytd-rich-item-renderer ytd-channel-name, ytd-browse[page-subtype="channels"] ytd-rich-item-renderer ytd-channel-name { font-size: var(--gm-grid-channel-size) !important; line-height: 1.25em !important; display: inline-block !important; overflow: hidden !important; text-overflow: ellipsis !important; flex-grow: 1 !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; vertical-align: baseline !important; }
  119.         ytd-browse[page-subtype="home"] ytd-rich-item-renderer #metadata-line, ytd-browse[page-subtype="subscriptions"] ytd-rich-item-renderer #metadata-line, ytd-browse[page-subtype="channels"] ytd-rich-item-renderer #metadata-line { line-height: 1.3em !important; margin-top: ${gridMetaMarginTop} !important; display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  120.         ytd-browse[page-subtype="home"] ytd-rich-item-renderer #metadata-line > span, ytd-browse[page-subtype="subscriptions"] ytd-rich-item-renderer #metadata-line > span, ytd-browse[page-subtype="channels"] ytd-rich-item-renderer #metadata-line > span { font-size: var(--gm-grid-metadata-size) !important; line-height: 1.2em !important; display: inline !important; vertical-align: baseline !important; }
  121.         ytd-browse[page-subtype="home"] ytd-rich-item-renderer #metadata-line > span:first-of-type, ytd-browse[page-subtype="subscriptions"] ytd-rich-item-renderer #metadata-line > span:first-of-type, ytd-browse[page-subtype="channels"] ytd-rich-item-renderer #metadata-line > span:first-of-type { margin-right: 0.5em !important; }
  122.         ytd-browse[page-subtype="home"] ytd-rich-item-renderer #metadata-line > span:first-of-type::after, ytd-browse[page-subtype="subscriptions"] ytd-rich-item-renderer #metadata-line > span:first-of-type::after, ytd-browse[page-subtype="channels"] ytd-rich-item-renderer #metadata-line > span:first-of-type::after { content: none !important; }
  123.  
  124.         /* --- Rule Set 3: Channel Pages SPECIFIC TABS (e.g., Videos Tab using ytd-grid-video-renderer) --- */
  125.         ytd-browse[page-subtype="channels"] #contents.ytd-rich-grid-renderer ytd-grid-video-renderer, ytd-browse[page-subtype="channels"] ytd-item-section-renderer #contents > ytd-rich-grid-renderer ytd-grid-video-renderer { margin-left: ${gridItemHorizontalMargin} !important; margin-right: ${gridItemHorizontalMargin} !important; margin-bottom: ${gridItemBottomMargin} !important; max-width: calc(100% / ${desiredColumnCount} - ${gridItemHorizontalMargin} * 2 - ${minimalPxReduction}) !important; }
  126.         ytd-browse[page-subtype="channels"] ytd-grid-video-renderer #video-title { font-size: var(--gm-grid-title-size) !important; line-height: 1.2em !important; max-height: 2.4em !important; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 1px !important; }
  127.         ytd-browse[page-subtype="channels"] ytd-grid-video-renderer #metadata-line { line-height: 1.3em !important; margin-top: ${gridMetaMarginTop} !important; display: block !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  128.         ytd-browse[page-subtype="channels"] ytd-grid-video-renderer #metadata-line > span { font-size: var(--gm-grid-metadata-size) !important; line-height: 1.2em !important; display: inline !important; vertical-align: baseline !important; }
  129.         ytd-browse[page-subtype="channels"] ytd-grid-video-renderer #metadata-line > span:first-of-type { margin-right: 0.5em !important; }
  130.         ytd-browse[page-subtype="channels"] ytd-grid-video-renderer #metadata-line > span:first-of-type::after { content: none !important; }
  131.  
  132.         /* ========================================================== */
  133.         /* === GLOBAL STYLES & FIXES === */
  134.         /* ========================================================== */
  135.         /* Hide Checkmarks */
  136.         ytd-badge-supported-renderer:has(.badge.badge-style-type-verified) { display: none !important; }
  137.         /* Fullscreen Scrollbar Fix */
  138.         html.fullscreen, html.fullscreen body { overflow-x: hidden !important; }
  139.  
  140.         /* Apply overflow fix to ytd-app for normal view */
  141.         ytd-app {
  142.              overflow-x: hidden !important;
  143.         }
  144.  
  145.         /* --- Player Button Hitbox Fixes --- */
  146.         /* Combine all selectors needing 'content: none' */
  147.        .ytp-fullscreen-button::after, /* For fullscreen button */
  148.         #contentContainer::after,      /* For play button area (RE-ADDED) */
  149.         .ytp-play-button::before       /* For play button itself */
  150.         {
  151.         content: none !important;
  152.         }
  153.  
  154.         /* ========================================================== */
  155.         /* === SEARCH RESULTS PAGE (/results) === */
  156.         /* ========================================================== */
  157.         ytd-search ytd-item-section-renderer:first-of-type { margin-top: ${searchResultsMarginTop} !important; }
  158.         ytd-search ytd-item-section-renderer ytd-video-renderer[is-search] { display: flex !important; margin-bottom: 16px !important; align-items: flex-start !important; }
  159.         ytd-search ytd-item-section-renderer ytd-video-renderer[is-search] #dismissible ytd-thumbnail.ytd-video-renderer { width: ${searchThumbnailWidth} !important; min-width: ${searchThumbnailWidth} !important; max-width: ${searchThumbnailWidth} !important; flex-basis: ${searchThumbnailWidth} !important; flex-shrink: 0 !important; }
  160.         ytd-search ytd-item-section-renderer ytd-video-renderer[is-search] #dismissible div.text-wrapper.ytd-video-renderer { margin-left: 12px !important; flex: 1 !important; min-width: 0; }
  161.         /* Text Sizes */
  162.         ytd-search ytd-item-section-renderer ytd-video-renderer[is-search] a#video-title.ytd-video-renderer yt-formatted-string { font-size: var(--gm-search-title-size) !important; line-height: 1.25em !important; max-height: 2.5em !important; -webkit-line-clamp: 2 !important; display: -webkit-box !important; -webkit-box-orient: vertical !important; overflow: hidden !important; text-overflow: ellipsis !important; margin-bottom: 3px !important; }
  163.         ytd-search ytd-item-section-renderer ytd-video-renderer[is-search] #metadata-line.ytd-video-meta-block span.inline-metadata-item { font-size: var(--gm-search-metasnippet-size) !important; line-height: 1.3em !important; }
  164.         ytd-search ytd-item-section-renderer ytd-video-renderer[is-search] #channel-name.ytd-video-renderer yt-formatted-string > a, ytd-search ytd-item-section-renderer ytd-video-renderer[is-search] #channel-name.ytd-video-renderer yt-formatted-string { font-size: var(--gm-search-channel-size) !important; line-height:1.3em !important; }
  165.         ytd-search ytd-item-section-renderer ytd-video-renderer[is-search] #channel-thumbnail.ytd-video-renderer { width: 20px !important; height: 20px !important; }
  166.         /* Description Snippet */
  167.         ytd-search ytd-item-section-renderer ytd-video-renderer[is-search] .metadata-snippet-container.ytd-video-renderer,
  168.         ytd-search ytd-item-section-renderer ytd-video-renderer[is-search] .metadata-snippet-container-one-line.ytd-video-renderer {
  169.             width: ${searchDescFixedWidth} !important;
  170.             min-width: ${searchDescFixedWidth} !important;
  171.             max-width: ${searchDescFixedWidth} !important;
  172.             display: block !important;
  173.             margin-top: 4px !important;
  174.         }
  175.         /* Hide Chapters Section */
  176.         ytd-search ytd-item-section-renderer ytd-video-renderer[is-search] #expandable-metadata.ytd-video-renderer { display: none !important; }
  177.  
  178.         /* ========================================================== */
  179.         /* === WATCH PAGE (/watch) === */
  180.         /* ========================================================== */
  181.         /* --- Below Video Player --- */
  182.         .title.ytd-video-primary-info-renderer h1.ytd-video-primary-info-renderer { font-size: var(--gm-watch-title-size) !important; line-height: 1.2em !important; }
  183.         #top-row.ytd-watch-metadata { margin-top: ${watchTopRowMarginTop} !important; }
  184.         ytd-video-owner-renderer ytd-channel-name { font-size: var(--gm-watch-owner-channel-size) !important; line-height: 1.05em !important; margin: 0 !important; padding: 0 !important; display: block !important; }
  185.         #owner-sub-count.ytd-video-owner-renderer { margin-top: ${watchSubCountMarginTop} !important; margin-bottom: 0 !important; }
  186.         #description-inner #description .content.ytd-video-secondary-info-renderer, .ytd-expander.ytd-video-secondary-info-renderer { font-size: 0.8em !important; line-height: 1.35em !important; }
  187.         #info-text.ytd-video-primary-info-renderer { font-size: 0.8em !important; }
  188.  
  189.         /* --- Sidebar --- */
  190.         ytd-compact-video-renderer h3.ytd-compact-video-renderer { margin-bottom: ${sidebarTitleMarginBottom} !important; margin-top: 0 !important; }
  191.         #video-title.ytd-compact-video-renderer { font-size: var(--gm-sidebar-title-size) !important; line-height: 1.3em !important; max-height: 2.6em !important; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  192.         ytd-compact-video-renderer ytd-channel-name { font-size: var(--gm-sidebar-channel-size) !important; line-height: 1.35em !important; margin-bottom: 1px !important; }
  193.         ytd-compact-video-renderer #metadata-line span.inline-metadata-item { font-size: var(--gm-sidebar-viewsdate-size) !important; line-height: 1.45em !important; }
  194.         ytd-compact-video-renderer ytd-badge-supported-renderer.badges { margin-top: ${sidebarBadgeMarginTop} !important; margin-bottom: ${sidebarBadgeMarginBottom} !important; font-size: var(--gm-sidebar-badge-size) !important; line-height: 1.2 !important; }
  195.  
  196.         /* --- Comment Section --- */
  197.         /* Reset Reply Expander font size (Neutralizes default 1.4em) */
  198.         ytd-comment-replies-renderer ytd-comment-view-model[is-reply] > #main > #expander {
  199.              font-size: 1rem !important;
  200.         }
  201.         /* Rule for Comment/Reply Text Content (Uses REM for consistency) */
  202.         ytd-comment-view-model #expander > #content > yt-attributed-string#content-text {
  203.             font-size: var(--gm-comment-text-final-size) !important;
  204.             line-height: 1.5em !important;
  205.         }
  206.         /* Rule for Main Comment Meta (Author/Timestamp - Uses REM) */
  207.          ytd-comments ytd-comment-thread-renderer > ytd-comment-view-model:not([is-reply]) #header-author #author-text,
  208.          ytd-comments ytd-comment-thread-renderer > ytd-comment-view-model:not([is-reply]) #header-author .published-time-text.ytd-comment-view-model a {
  209.             font-size: var(--gm-comment-meta-final-size) !important;
  210.             line-height: 1.4em !important;
  211.         }
  212.         /* Rule for Reply Meta (Author/Timestamp - Uses REM) */
  213.         ytd-comments ytd-comment-replies-renderer ytd-comment-view-model[is-reply] #header-author #author-text,
  214.         ytd-comments ytd-comment-replies-renderer ytd-comment-view-model[is-reply] #header-author .published-time-text.ytd-comment-view-model a {
  215.             font-size: var(--gm-comment-meta-final-size) !important;
  216.             line-height: 1.4em !important;
  217.         }
  218.         /* Rule for Comment Toolbar */
  219.         #toolbar.ytd-comment-action-buttons-renderer {
  220.             font-size: var(--gm-comment-meta-final-size) !important;
  221.         }
  222.         /* Rule for Author Text Color */
  223.         #header-author #author-text.ytd-comment-renderer {
  224.              color: #aaa !important;
  225.         }
  226.  
  227.     `;
  228.  
  229.     // Inject the CSS using GM_addStyle
  230.     if (typeof GM_addStyle === 'function') {
  231.         // Read version from metadata block for consistency
  232.         const scriptVersion = (typeof GM_info !== 'undefined' && GM_info.script) ? GM_info.script.version : 'N/A';
  233.         GM_addStyle(css);
  234.         console.log(`YouTube Layout Script: v${scriptVersion} Active (${desiredColumnCount} Cols) - Final v3`); // Updated log message
  235.     } else {
  236.         console.error("YouTube Layout Script: GM_addStyle is not defined.");
  237.         const style = document.createElement('style');
  238.         style.textContent = css;
  239.         document.head.appendChild(style);
  240.     }
  241.  
  242. })();