Decrease font size of pill

4 files changed, 12 insertions, 6 deletions

diff --git a/public/content.css b/public/content.css
index 98a6b4f2..aabc6790 100644
--- a/public/content.css
+++ b/public/content.css
@@ -619,6 +619,9 @@ input::-webkit-inner-spin-button {
 	padding-right: 8px;
 	margin-right: 3px;
 	color: white;
+	cursor: pointer;
+	font-size: 75%;
+	height: 100%;
 }
 
 .sponsorBlockCategoryPillTitleSection {
diff --git a/src/components/CategoryPillComponent.tsx b/src/components/CategoryPillComponent.tsx
index 0f20c82f..1ec12695 100644
--- a/src/components/CategoryPillComponent.tsx
+++ b/src/components/CategoryPillComponent.tsx
@@ -9,6 +9,7 @@ export interface CategoryPillProps {
 export interface CategoryPillState {
     segment?: SponsorTime;
     show: boolean;
+    open?: boolean;
 }
 
 class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryPillState> {
@@ -18,7 +19,8 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
 
         this.state = {
             segment: null,
-            show: false
+            show: false,
+            open: false
         };
     }
 
@@ -30,7 +32,7 @@ class CategoryPillComponent extends React.Component<CategoryPillProps, CategoryP
 
         return (
             <span style={style}
-                className="sponsorBlockCategoryPill" >
+                className={"sponsorBlockCategoryPill"} >
                 <span className="sponsorBlockCategoryPillTitleSection">
                     <img className="sponsorSkipLogo sponsorSkipObject"
                         src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
diff --git a/src/content.ts b/src/content.ts
index 23d3b9d3..f9e3172a 100644
--- a/src/content.ts
+++ b/src/content.ts
@@ -647,7 +647,7 @@ function setupCategoryPill() {
         categoryPill = new CategoryPill();
     }
 
-    categoryPill.attachToPage(onMobileYouTube);
+    categoryPill.attachToPage(onMobileYouTube, onInvidious);
 }
 
 async function sponsorsLookup(id: string, keepOldSubmissions = true) {
diff --git a/src/render/CategoryPill.tsx b/src/render/CategoryPill.tsx
index 4fe846d0..4681a813 100644
--- a/src/render/CategoryPill.tsx
+++ b/src/render/CategoryPill.tsx
@@ -16,7 +16,7 @@ export class CategoryPill {
         this.ref = React.createRef();
     }
 
-    async attachToPage(onMobileYouTube: boolean): Promise<void> {
+    async attachToPage(onMobileYouTube: boolean, onInvidious: boolean): Promise<void> {
         const referenceNode = 
             await GenericUtils.wait(() => 
                 // YouTube, Mobile YouTube, Invidious
@@ -49,7 +49,7 @@ export class CategoryPill {
                     this.mutationObserver.disconnect();
                 }
                 
-                this.mutationObserver = new MutationObserver(() => this.attachToPage(onMobileYouTube));
+                this.mutationObserver = new MutationObserver(() => this.attachToPage(onMobileYouTube, onInvidious));
 
                 this.mutationObserver.observe(referenceNode, { 
                     childList: true,
@@ -66,7 +66,8 @@ export class CategoryPill {
 
     setVisibility(show: boolean): void {
         const newState = {
-            show
+            show,
+            open: show ? this.ref.current?.state.open : false
         };
 
         if (this.ref.current) {