Forces 6 videos per row, adjusts text sizes, adds spacing, fixes truncation, applies specific alignments based on user tuning.
// ==UserScript==
// @name YouTube layout fix
// @namespace http://tampermonkey.net/
// @version 1.74
// @description Forces 6 videos per row, adjusts text sizes, adds spacing, fixes truncation, applies specific alignments based on user tuning.
// @author Kalakaua
// @match *://www.youtube.com/
// @match *://www.youtube.com/feed/subscriptions*
// @match *://www.youtube.com/watch*
// @grant GM_addStyle
// @run-at document-start
// @license MIT
// ==/UserScript==
(function() {
'use strict';
// --- FINAL ADJUSTABLE VALUES (User Prefs) ---
const commentTextScale = 1.15;
const commentMetaScale = 1.1;
// === Grid Text Sizes (Home/Subs Feed) ===
const gridTitleScale = 1.12;
const gridChannelScale = 1.0;
const gridMetadataScale = 1.7;
// === Grid Internal Spacing ===
const gridChannelMarginTop = "-2px"; // Space ABOVE channel name line
const gridMetaMarginTop = "-2px"; // Space ABOVE views/date line
// === Sidebar Text Sizes ===
const sidebarTitleScale = 1.05;
const sidebarChannelNameScale = 1.0;
const sidebarViewsDateScale = 1.65;
// === Watch Page Owner Text Size ===
const watchOwnerChannelScale = 2.1;
// === Watch Page Top Row Spacing ===
const watchTopRowMarginTop = "-4px";
const watchSubCountMarginTop = "-3.5px";
// === Sidebar Badge Styling ===
const sidebarBadgeScale = 0.85;
const sidebarBadgeMarginTop = "2px";
const sidebarBadgeMarginBottom = "0px";
// --- Grid Layout Spacing ---
const gridEdgePadding = "24px";
const gridItemHorizontalMargin = "6px";
const gridItemBottomMargin = "24px";
// === Sidebar Title Spacing ===
const sidebarTitleMarginBottom = "6px";
// === Grid Badge Spacing ===
const gridBadgeMarginLeft = -5;
// --- END OF ADJUSTABLE VALUES ---
const css = `
/* --- 6 VIDEOS PER ROW (via Item Width) & EDGE SPACING --- */
ytd-browse[page-subtype="home"] #contents.ytd-rich-grid-renderer,
ytd-browse[page-subtype="subscriptions"] #contents.ytd-rich-grid-renderer {
padding-left: ${gridEdgePadding} !important;
padding-right: ${gridEdgePadding} !important;
box-sizing: border-box !important;
}
ytd-browse[page-subtype="home"] ytd-rich-item-renderer,
ytd-browse[page-subtype="subscriptions"] ytd-rich-item-renderer {
margin-left: ${gridItemHorizontalMargin} !important;
margin-right: ${gridItemHorizontalMargin} !important;
margin-bottom: ${gridItemBottomMargin} !important;
max-width: calc(100% / 6 - ${gridItemHorizontalMargin} * 2 - 0.01px) !important;
overflow: hidden;
}
/* --- ADJUST TEXT SIZES --- */
:root {
/* Grid Specific */
--gm-grid-title-size: ${gridTitleScale}em;
--gm-grid-channel-size: ${gridChannelScale}em;
--gm-grid-metadata-size: ${gridMetadataScale}em;
/* Comment Specific */
--gm-comment-text-size: ${commentTextScale}em;
--gm-comment-meta-size: ${commentMetaScale}em;
/* Sidebar Specific */
--gm-sidebar-title-size: ${sidebarTitleScale}em;
--gm-sidebar-channel-size: ${sidebarChannelNameScale}em;
--gm-sidebar-viewsdate-size: ${sidebarViewsDateScale}em;
--gm-sidebar-badge-size: ${sidebarBadgeScale}em;
/* Watch Page Owner Specific */
--gm-watch-owner-channel-size: ${watchOwnerChannelScale}em;
/* Other derived */
--gm-watch-title-size: 1.5rem;
--gm-search-title-size: 1.0rem;
}
/* === GRID VIEW (Home/Subs) - Final Styles === */
#video-title.ytd-rich-grid-media { /* Title */
font-size: var(--gm-grid-title-size) !important;
line-height: 1.2em !important;
max-height: 2.4em !important;
overflow: hidden;
margin-bottom: 1px !important; /* Ensure minimal space below title */
}
/* Channel Name Line Container */
ytd-rich-grid-media #byline-container {
white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
display: flex !important; align-items: center !important;
margin-top: ${gridChannelMarginTop} !important; /* ADJUSTED Space above channel */
line-height: 1.2em !important; gap: 0 !important;
}
/* Grid Channel Name Container */
ytd-rich-grid-media 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-shrink: 1 !important; min-width: 0 !important;
margin: 0 !important; padding: 0 !important;
vertical-align: baseline !important;
}
/* Verified Badge */
ytd-rich-grid-media ytd-channel-name ytd-badge-supported-renderer {
display: inline-flex !important; align-items: center !important; justify-content: center !important;
margin: 0 0 0 ${gridBadgeMarginLeft}px !important; padding: 0 !important;
flex-shrink: 0 !important; line-height: 1 !important;
}
/* Icon DIV Container */
ytd-rich-grid-media ytd-channel-name ytd-badge-supported-renderer yt-icon .yt-icon-shape > div {
transform: translate(1px, -3px) !important; margin: 0 !important; padding: 0 !important; line-height: initial !important;
}
/* Icon element */
ytd-rich-grid-media ytd-channel-name ytd-badge-supported-renderer yt-icon {
margin: 0 !important; padding: 0 !important; vertical-align: initial !important;
}
/* --- Metadata Line (Views/Date) --- */
/* Grid metadata line container */
ytd-rich-grid-media #metadata-line {
line-height: 1.3em !important;
margin-top: ${gridMetaMarginTop} !important; /* ADJUSTED Space above metadata */
display: block !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* Grid Video Metadata Spans */
ytd-rich-grid-media #metadata-line > span {
font-size: var(--gm-grid-metadata-size) !important;
line-height: 1.2em !important;
display: inline !important;
vertical-align: baseline !important;
}
/* Add space ONLY after the first span */
ytd-rich-grid-media #metadata-line > span:first-of-type {
margin-right: 0.5em !important;
}
/* REMOVE the ::after pseudo-element (bullet point) */
ytd-rich-grid-media #metadata-line > span:first-of-type::after {
content: none !important;
}
/* === WATCH PAGE METADATA (BELOW VIDEO) === */
.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; }
#top-row.ytd-watch-metadata { margin-top: ${watchTopRowMarginTop} !important; }
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; }
#owner-sub-count.ytd-video-owner-renderer { margin-top: ${watchSubCountMarginTop} !important; margin-bottom: 0 !important; }
#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; }
#info-text.ytd-video-primary-info-renderer { font-size: 0.8em !important; }
/* === SIDEBAR STYLING === */
ytd-compact-video-renderer h3.ytd-compact-video-renderer { margin-bottom: ${sidebarTitleMarginBottom} !important; margin-top: 0 !important; }
#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; }
ytd-compact-video-renderer ytd-channel-name { font-size: var(--gm-sidebar-channel-size) !important; line-height: 1.35em !important; margin-bottom: 1px !important; }
ytd-compact-video-renderer #metadata-line span.inline-metadata-item { font-size: var(--gm-sidebar-viewsdate-size) !important; line-height: 1.45em !important; }
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; }
/* === SEARCH RESULTS === */
a#video-title.ytd-video-renderer { font-size: var(--gm-search-title-size) !important; margin-bottom: 1px !important; line-height: 1.15em !important; }
#metadata-line.ytd-video-meta-block { font-size: 0.75em !important; }
#channel-name.ytd-video-renderer .ytd-channel-name#text, .ytd-channel-name a { font-size: 0.75em !important; }
.metadata-snippet-container.ytd-video-renderer { font-size: 0.75em !important; }
/* === VIDEO PAGE: COMMENT SECTION === */
yt-attributed-string#content-text.ytd-comment-view-model { font-size: var(--gm-comment-text-size) !important; line-height: 1.5em !important; }
#header-author #author-text, .published-time-text.ytd-comment-renderer { font-size: var(--gm-comment-meta-size) !important; }
#toolbar.ytd-comment-action-buttons-renderer { font-size: var(--gm-comment-meta-size) !important; }
#header-author #author-text.ytd-comment-renderer { color: #aaa !important; }
`;
// Inject the CSS using GM_addStyle
if (typeof GM_addStyle === 'function') {
GM_addStyle(css);
console.log("YouTube Layout Script: Final Version");
} else {
console.error("YouTube Layout Script: GM_addStyle is not defined.");
const style = document.createElement('style');
style.textContent = css;
document.head.appendChild(style);
}
})();