fix: left controls being squished by chapter and right controls overf…

…lowing
YouTube-Enhancer · Jan 22, 2024 · 2a8b31a · 2a8b31a
1 parent 6fd01e2
commit 2a8b31a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/public/contentStyle.css b/public/contentStyle.css
@@ -18,9 +18,11 @@ body.no-scroll .yte-button-tooltip {
 	padding: 8px 9px !important;
 	transform: translate(-50%, -75%) !important;
 }
+
 .maximized_chapter {
 	width: 100% !important;
 }
+
 .maximized_video {
 	width: 100vw !important;
 	height: 100vh !important;
@@ -29,6 +31,7 @@ body.no-scroll .yte-button-tooltip {
 	object-fit: contain !important;
 	background: black !important;
 }
+
 .maximized_video_container {
 	position: fixed !important;
 	top: 0 !important;
@@ -37,10 +40,12 @@ body.no-scroll .yte-button-tooltip {
 	height: 100vh !important;
 	z-index: 2020 !important;
 }
+
 .maximized_controls {
 	width: 97vw !important;
 	right: 12px !important;
 }
+
 .yte-maximize-player-button {
 	opacity: 0.9;
 	display: inline-block;
@@ -51,3 +56,11 @@ body.no-scroll .yte-button-tooltip {
 	transition: opacity 0.1s cubic-bezier(0.4, 0, 1, 1);
 	overflow: hidden;
 }
+
+.ytp-chapter-container {
+	flex: 1 !important;
+}
+
+.ytp-right-controls {
+	display: flex !important;
+}
diff --git a/src/features/buttonPlacement/utils.ts b/src/features/buttonPlacement/utils.ts
@@ -15,11 +15,8 @@ function buttonClickListener<Placement extends ButtonPlacement, Name extends Fea
 	if (isToggle) {
 		button.ariaChecked = button.ariaChecked ? (!JSON.parse(button.ariaChecked)).toString() : "false";
 		if (typeof icon === "object" && "off" in icon && "on" in icon) {
-			icon.on.style.transform = "translate(7px,7px)";
-			icon.off.style.transform = "translate(7px,7px)";
 			updateFeatureButtonIcon(button, JSON.parse(button.ariaChecked) ? icon.on : icon.off);
 		} else if (icon instanceof SVGSVGElement) {
-			icon.style.transform = "translate(7px,7px)";
 			updateFeatureButtonIcon(button, icon);
 		}
 		listener(JSON.parse(button.ariaChecked) as boolean);
@@ -45,8 +42,11 @@ export function makeFeatureButton<Name extends FeaturesThatHaveButtons, Placemen
 		elementId: `${getFeatureButtonId(featureName)}`,
 		elementType: "button",
 		styles: {
-			display: "inline-block",
+			alignContent: "center",
+			display: "flex",
+			flexWrap: "wrap",
 			height: "48px",
+			justifyContent: "center",
 			padding: "0px 4px",
 			width: "48px"
 		}
@@ -77,15 +77,12 @@ export function makeFeatureButton<Name extends FeaturesThatHaveButtons, Placemen
 	if (isToggle) {
 		button.ariaChecked = "false";
 		if (typeof icon === "object" && "off" in icon && "on" in icon) {
-			icon.off.style.transform = "translate(7px,7px)";
 			button.append(icon.off);
 		} else if (icon instanceof SVGSVGElement) {
-			icon.style.transform = "translate(7px,7px)";
 			button.append(icon);
 		}
 	} else {
 		if (icon instanceof SVGSVGElement) {
-			icon.style.transform = "translate(7px,7px)";
 			button.append(icon);
 		}
 	}