Greasy Fork is available in English.

Fix YouTube Watch Flexible Menu Items

To fix YouTube Watch Flexible Menu Items

/* ==UserStyle==
@name           Fix YouTube Watch Flexible Menu Items
@namespace      github.com/openstyles/stylus
@version        1.2.1
@description    To fix YouTube Watch Flexible Menu Items
@author         CY Fung
@license        MIT
@preprocessor   stylus
@var range      menu-flex-width           "Menu:Flex:Width"                           [260, 120, 680, 20, 'px']
@var checkbox   hide-menu-icon-text      "Hide:Menu:Icon:Text (For:No:Tabview:only)"                      1
@var range     owner-min-width     "Owner:Min:Width (default:disable)"                               [0, 0, 720, 40, 'px']
@var checkbox   margin-fix      "Margin Fix"                      1
==/UserStyle== */

hideMenuIcon(){

    @supports (color: var(--hide-menu-icon-text-by-default-v1)) { /* May 2023 */

        ytd-watch-metadata:not([actions-on-separate-line]) ytd-menu-renderer.ytd-watch-metadata[class] [button-next] .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading .yt-spec-button-shape-next__icon {
            margin-right: 0;
            margin-left: 0;
            contain: layout style;
        }

        ytd-watch-metadata:not([actions-on-separate-line]) ytd-menu-renderer.ytd-watch-metadata[class] [button-next] .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading .yt-spec-button-shape-next__icon+.yt-spec-button-shape-next--button-text-content {
            display: none !important;
            width: 0 !important;
            contain: strict !important;
        }

        /* https://greasyfork.org/en/scripts/456108 */

        ytd-watch-metadata:not([actions-on-separate-line]) ytd-menu-renderer.ytd-watch-metadata[class] div[name="top_level_translate_btn"] .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading > img:first-child+span:last-child {
            display: none !important;
            width: 0 !important;
            contain: strict !important;
        }

        ytd-watch-metadata:not([actions-on-separate-line]) ytd-menu-renderer.ytd-watch-metadata[class] div[name="top_level_translate_btn"] .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading > img:first-child:nth-last-child(2) {
            margin-right: 0 !important;
            margin-left: 0 !important;
            contain: layout style;
        }

    }


    @supports (color: var(--hide-menu-icon-text-by-default-v2)) { /* Jul 2023 */

        ytd-watch-metadata:not([actions-on-separate-line]) ytd-menu-renderer.ytd-watch-metadata[class] [button-next] .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading .yt-spec-button-shape-next__icon {
            margin-right: 0;
            margin-left: 0;
            /* contain: layout style; */ /* removed in Dec 2023 */
            contain: style; /* added in Dec 2023 */
        }

        ytd-watch-metadata:not([actions-on-separate-line]) ytd-menu-renderer.ytd-watch-metadata[class] [button-next] .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading .yt-spec-button-shape-next__icon+.yt-spec-button-shape-next__button-text-content {
            display: none !important;
            width: 0 !important;
            contain: strict !important;
        }

        /* https://greasyfork.org/en/scripts/456108 */

        ytd-watch-metadata:not([actions-on-separate-line]) ytd-menu-renderer.ytd-watch-metadata[class] div[name="top_level_translate_btn"] .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading > img:first-child+span:last-child {
            display: none !important;
            width: 0 !important;
            contain: strict !important;
        }

        ytd-watch-metadata:not([actions-on-separate-line]) ytd-menu-renderer.ytd-watch-metadata[class] div[name="top_level_translate_btn"] .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading > img:first-child:nth-last-child(2) {
            margin-right: 0 !important;
            margin-left: 0 !important;
            /* contain: layout style; */ /* removed in Dec 2023 */
            contain: style; /* added in Dec 2023 */
        }

    }
   
    
}

generalRules(){
    
    #primary.ytd-watch-flexy #below ytd-video-owner-renderer.style-scope.ytd-watch-metadata,
    #primary.ytd-watch-flexy #below #owner {
        flex-basis: 90%;
        max-width: intrinsic;
        max-width: -moz-max-content;
        max-width: -webkit-max-content;
        max-width: max-content;
    }
    
    @supports (color: var(--fix-tooltips-display)) { /* May 2023 */
        #actions-inner tp-yt-paper-tooltip {
            white-space: nowrap; /* no multline for super chat donation button */
        }

        ytd-watch-flexy #actions-inner.ytd-watch-metadata tp-yt-paper-tooltip{
            pointer-events: none !important; /* avoid offset due to cursor */
        }
    }


    @supports (color: var(--tabview-fix-menu-icons-sizing)){ /* May 2023 */

        ytd-watch-metadata #actions.item.style-scope.ytd-watch-metadata{
            justify-content: end !important;
            display:flex;
        }
        html ytd-watch-metadata[flex-menu-enabled] #actions-inner.ytd-watch-metadata {
            /*width: auto !important;*/ /* override 100% */
            flex-grow: 1;
        }
        #sponsor-button.style-scope.ytd-video-owner-renderer {
            max-width: calc( ( 100% - 40px ) / 2 );

        }
        #owner:hover #sponsor-button.style-scope.ytd-video-owner-renderer {
            max-width: initial;
        }

        #sponsor-button.style-scope.ytd-video-owner-renderer [button-next] {
            max-width: 100%;
        }

        #subscribe-button.ytd-watch-metadata {
            max-width: calc( ( 100% - 40px ) /3 );
        }
        #owner:hover #subscribe-button.ytd-watch-metadata {
            max-width: initial;
        }

        #subscribe-button.ytd-watch-metadata > ytd-subscribe-button-renderer {
            max-width: 100%;
        }


        #subscribe-button.ytd-watch-metadata > yt-button-renderer, 
        #subscribe-button.ytd-watch-metadata > ytd-button-renderer, 
        #subscribe-button.ytd-watch-metadata > ytd-toggle-button-renderer {
            max-width: 100%; /* for Firefox */
        }


        #sponsor-button.style-scope.ytd-video-owner-renderer > yt-button-renderer, 
        #sponsor-button.style-scope.ytd-video-owner-renderer > ytd-button-renderer, 
        #sponsor-button.style-scope.ytd-video-owner-renderer > ytd-toggle-button-renderer {
            max-width: 100%; /* for Firefox */
        }

    }


    @supports (color: var(--fix-youtube-bugs-menu-options-hidden-after-page-updated)) and (contain: var(--size)){ /* May 2023 */
        /* added in 2023.05.10 due to new css rule added by YouTube due to the change in darker dark theme implementation stage */

        /* against YouTube css bug - "max-height: 36px" casue buttons disappear after page changing */
        html ytd-menu-renderer[has-flexible-items] {
            /* padding-top: 1px; */
            max-height: initial; /* limiting the height might prohibit the resizing feature */
            /* max-height: 100%; */
            /* overflow-y: hidden; */
        }

         ytd-watch-metadata {
            --tyt-action-menu-contain: size;
         }

        ytd-watch-metadata[actions-on-separate-line] {
            /* actions-on-separate-line is a new attribute introduced in May 2023 Darker Dark Theme. */
            --tyt-action-menu-contain: none;

        }

        ytd-watch-metadata #owner ~ #actions.item.style-scope.ytd-watch-metadata {
            contain: var(--tyt-action-menu-contain); /* follow flex layouting instead of content. content can have larger size */
            /* the height will depends on #owner; the width will fill up for flex layout of #top-row */
            min-width: var(--menu-min-width, initial) !important;
        }

        ytd-watch-metadata #owner ~ #actions.item.style-scope.ytd-watch-metadata > #actions-inner {
            max-height: 100%; /* the y-overflowed items will be shifted such that the first line will be always positiioned at the top */
            overflow: hidden; /* for visual only */ /* cannot do "contain: paint" due to tooltips */
        }

        ytd-watch-metadata #owner ~ #actions.item.style-scope.ytd-watch-metadata > #actions-inner ytd-menu-renderer.style-scope.ytd-watch-metadata,
        ytd-watch-metadata #owner ~ #actions.item.style-scope.ytd-watch-metadata > #actions-inner .top-level-buttons.ytd-menu-renderer {
            row-gap: 12px; /* for visual only */ /* second line will be far below the first line such that it is invisible */
        }

        /* 2023.05.15 */ /* margin-bottom for `.top-level-buttons.ytd-menu-renderer` is not required. */
        html ytd-menu-renderer[has-flexible-items][safe-area] .top-level-buttons.ytd-menu-renderer {
            margin-bottom: 0; /* override margin-bottom: 4px; */
        }

    }

}

marginFix(){
    
    @supports (color: var(--fix-single-column-menu-bar-position)){ /* May 2023 */
        html ytd-watch-metadata[actions-on-separate-line] #actions.ytd-watch-metadata ytd-menu-renderer.ytd-watch-metadata {
            justify-content: flex-end; /* override justify-content: flex-start; */
        }
        ytd-watch-metadata[actions-on-separate-line] .item.ytd-watch-metadata {
            /* override margin-bottom: 12px */
            margin-top: 6px;
            margin-bottom: 6px;
        }
        html .item.ytd-watch-metadata {
            /* override margin-right: 12px */
            /* this is a wrong design to make every .item.ytd-watch-metadata with margin-right. this makes description line becomes not fullwidth */
            margin-right: 0px; /* fix description line */
        }
        #top-row.ytd-watch-metadata {
            column-gap: 12px; /* this is the correct way to set gap in flex layout */
        }
    }

    @supports (color: var(--tabview-adjust-margin-for-watch-metadata)){ /* May 2023 */
        html .item.ytd-watch-metadata {
            /* May 2023 theme - no second line in song title */
            margin-top: 8px;
        }
        html #description.ytd-watch-metadata {
            font-size: 1.2rem;      /* override font-size: 1.4rem; */
            line-height: 1.8rem;    /* override line-height: 2rem; */
        }
    }
    
}

@-moz-document domain("youtube.com") {
    
    html{
        // --menu-min-width: menu-min-width;
        --menu-flex-width: menu-flex-width;
        --owner-min-width: owner-min-width;
    }

    ytd-watch-metadata #owner ~ #actions.item.style-scope.ytd-watch-metadata {
        flex-basis: var(--menu-flex-width);
        min-width: var(--menu-min-width, initial) !important;
    }

    @keyframes ytdMenuRendererAni {

        0% {
            display: none;
            background-position-x: 3px;
        }
        100% {
            display: flex;
            background-position-x: 4px;
            animation: none;
        }
    }

    ytd-menu-renderer {
        animation: ytdMenuRendererAni 1ms linear 0s 1 normal forwards;
    }

    if hide-menu-icon-text {
        
        hideMenuIcon();
        
        
    }
    
    if owner-min-width > 0px {

        body #owner.ytd-watch-metadata {
            min-width: var(--owner-min-width);
        }
        
    }
    

    generalRules();
    
    if margin-fix {
        marginFix();
    }

}