Remove text from category pills on mobile and don't make them take full height of title box

public/content.css

@@ -198,6 +198,11 @@ div:hover > .sponsorBlockChapterBar {
 	float: left;
 }
 
+#categoryPill .sbPillNoText .sponsorSkipLogo {
+	margin-top: calc(2.6rem - 18px);
+    margin-bottom: calc(2.6rem - 18px);
+}
+
 @keyframes fadeIn {
 	from { opacity: 0; }
 }
@@ -772,6 +777,14 @@ input::-webkit-inner-spin-button {
     line-height: 1.5em;
 }
 
+#categoryPillParent {
+	height: fit-content;
+    margin-top: auto;
+	margin-bottom: auto;
+
+    position: relative;
+}
+
 .sponsorBlockCategoryPill {
     border-radius: 25px;
 	padding-left: 8px;

src/components/CategoryPillComponent.tsx

@@ -12,6 +12,7 @@ import { getErrorMessage } from "../maze-utils/formating";
 
 export interface CategoryPillProps {
     vote: (type: number, UUID: SegmentUUID, category?: Category) => Promise<VoteResponse>;
+    showTextByDefault: boolean;
 }
 
 export interface CategoryPillState {
@@ -43,7 +44,7 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
 
         return (
             <span style={style}
-                className={"sponsorBlockCategoryPill"}
+                className={"sponsorBlockCategoryPill" + (!this.props.showTextByDefault ? " sbPillNoText" : "")}
                 aria-label={this.getTitleText()}
                 onClick={(e) => this.toggleOpen(e)}
                 onMouseEnter={() => this.openTooltip()}
@@ -52,9 +53,13 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
                     <img className="sponsorSkipLogo sponsorSkipObject"
                         src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
                     </img>
-                    <span className="sponsorBlockCategoryPillTitle">
-                        {chrome.i18n.getMessage("category_" + this.state.segment?.category)}
-                    </span>
+
+                    {
+                        (this.props.showTextByDefault || this.state.open) &&
+                            <span className="sponsorBlockCategoryPillTitle">
+                                {chrome.i18n.getMessage("category_" + this.state.segment?.category)}
+                            </span>
+                    }
                 </span>
 
                 {this.state.open && (

src/render/CategoryPill.tsx

@@ -47,7 +47,7 @@ export class CategoryPill {
 
                 this.root = createRoot(this.container);
                 this.ref = React.createRef();
-                this.root.render(<CategoryPillComponent ref={this.ref} vote={this.vote} />);
+                this.root.render(<CategoryPillComponent ref={this.ref} vote={this.vote} showTextByDefault={!this.onMobileYouTube} />);
 
                 if (this.onMobileYouTube) {
                     if (this.mutationObserver) {
@@ -76,6 +76,7 @@ export class CategoryPill {
             // Use a parent because YouTube does weird things to the top level object
             // react would have to rerender if container was the top level
             const parent = document.createElement("span");
+            parent.id = "categoryPillParent";
             parent.appendChild(this.container);
 
             referenceNode.prepend(parent);