Move category pill to top if on description on right layout

3 files changed, 30 insertions, 4 deletions

diff --git a/public/content.css b/public/content.css
index 285ba11d..7dd3c33f 100644
--- a/public/content.css
+++ b/public/content.css
@@ -780,6 +780,18 @@ input::-webkit-inner-spin-button {
     line-height: 1.5em;
 }
 
+/* Description on right layout */
+#title > #categoryPillParent {
+	font-size: 2rem;
+	font-weight: bold;
+	display: flex;
+	justify-content: center;
+	line-height: 2.8rem;
+}
+#title > #categoryPillParent > #categoryPill.cbPillOpen {
+	margin-bottom: 5px;
+}
+
 #categoryPillParent {
 	height: fit-content;
     margin-top: auto;
diff --git a/src/components/CategoryPillComponent.tsx b/src/components/CategoryPillComponent.tsx
index 36e31b47..e4c5a3ed 100644
--- a/src/components/CategoryPillComponent.tsx
+++ b/src/components/CategoryPillComponent.tsx
@@ -23,12 +23,14 @@ export interface CategoryPillState {
 }
 
 class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryPillState> {
-
+    mainRef: React.MutableRefObject<HTMLSpanElement>;
     tooltip?: Tooltip;
 
     constructor(props: CategoryPillProps) {
         super(props);
 
+        this.mainRef = React.createRef();
+
         this.state = {
             segment: null,
             show: false,
@@ -43,13 +45,17 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
             color: this.getTextColor(),
         }
 
+        // To be able to remove the margin from the parent
+        this.mainRef?.current?.parentElement?.classList?.toggle("cbPillOpen", this.state.show);
+
         return (
             <span style={style}
                 className={"sponsorBlockCategoryPill" + (!this.props.showTextByDefault ? " sbPillNoText" : "")}
                 aria-label={this.getTitleText()}
                 onClick={(e) => this.toggleOpen(e)}
                 onMouseEnter={() => this.openTooltip()}
-                onMouseLeave={() => this.closeTooltip()}>
+                onMouseLeave={() => this.closeTooltip()}
+                ref={this.mainRef}>
                 
                 <span className="sponsorBlockCategoryPillTitleSection">
                     <img className="sponsorSkipLogo sponsorSkipObject"
diff --git a/src/render/CategoryPill.tsx b/src/render/CategoryPill.tsx
index 57730af9..20923fba 100644
--- a/src/render/CategoryPill.tsx
+++ b/src/render/CategoryPill.tsx
@@ -43,9 +43,15 @@ export class CategoryPill {
     }
 
     private async attachToPageInternal(): Promise<void> {
-        const referenceNode = 
+        let referenceNode = 
             await waitFor(() => getYouTubeTitleNode());
 
+        // Experimental YouTube layout with description on right
+        const isOnDescriptionOnRightLayout = document.querySelector("#title #description");
+        if (isOnDescriptionOnRightLayout) {
+            referenceNode = referenceNode.parentElement;
+        }
+
         if (referenceNode && !referenceNode.contains(this.container)) {
             if (!this.container) {
                 this.container = document.createElement('span');
@@ -91,7 +97,9 @@ export class CategoryPill {
             parent.appendChild(this.container);
 
             referenceNode.prepend(parent);
-            referenceNode.style.display = "flex";
+            if (!isOnDescriptionOnRightLayout) {
+                referenceNode.style.display = "flex";
+            }
         }
     }