fix(comments-sidebar): expand player in cinema mode with sidebar layout

js&css/extension/www.youtube.com/appearance/comments/comments.css

@@ -215,3 +215,17 @@ html[data-page-type=video][it-comments-sidebar='true'] #playlist #items {max-hei
 /* these were global without [it-comments-sidebar='true']  @D-Rekk */
 html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #chat > tp-yt-paper-button#label {width:calc(100% - 40px);}
 html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #right-arrow-container.ytd-merch-shelf-renderer {right: 44px !important;}
+
+/* Cinema mode should expand the player instead of reserving sidebar space */
+html[data-page-type=video][it-comments-sidebar='true'][it-cinema-mode='true'] ytd-watch-flexy #primary {
+	max-width: none !important;
+	width: 100% !important;
+	flex: 1 1 auto !important;
+}
+html[data-page-type=video][it-comments-sidebar='true'][it-cinema-mode='true'] ytd-watch-flexy #secondary {
+	display: none !important;
+}
+html[data-page-type=video][it-comments-sidebar='true'][it-cinema-mode='true'] ytd-watch-flexy #columns {
+	height: auto !important;
+	overflow: visible !important;
+}

js&css/web-accessible/www.youtube.com/appearance.js

@@ -336,14 +336,18 @@ ImprovedTube.commentsSidebar = function () { if (ImprovedTube.storage.comments_s
 		clearTimeout(state.sidebarRetryTimer);
 		state.sidebarRetryTimer = setTimeout(sidebar, 250);
 	}
+	function isCinemaModeActive () {
+		const overlay = document.getElementById('overlay_cinema');
+		return !!(overlay && overlay.style.display !== 'none');
+	}
 	function resizePlayer () {
 		const player = document.querySelector("#player.style-scope.ytd-watch-flexy");
 		const video = document.querySelector("#player .ytp-chrome-bottom") || document.querySelector("#container .ytp-chrome-bottom");
 		const watchFlexy = document.querySelector("ytd-watch-flexy");
 		const primary = document.getElementById("primary");
 
-		// Don't set inline widths in fullscreen or theater mode - let CSS handle it
-		if (watchFlexy && (watchFlexy.hasAttribute("fullscreen") || watchFlexy.hasAttribute("theater"))) {
+		// Don't set inline widths in fullscreen, theater, or cinema mode - let CSS handle it
+		if (watchFlexy && (watchFlexy.hasAttribute("fullscreen") || watchFlexy.hasAttribute("theater") || isCinemaModeActive())) {
 			// Clear any previously set inline widths to let CSS rules apply
 			if (primary) primary.style.width = "";
 			if (player) player.style.width = "";

js&css/web-accessible/www.youtube.com/player.js

@@ -1221,6 +1221,20 @@ function createOverlay () {
 	document.getElementById('full-bleed-container').appendChild(overlay);
 }
 
+ImprovedTube.isCinemaModeActive = function () {
+	var overlay = document.getElementById('overlay_cinema');
+	return !!(overlay && overlay.style.display !== 'none');
+};
+
+ImprovedTube.updateCinemaModeState = function () {
+	if (ImprovedTube.isCinemaModeActive()) {
+		document.documentElement.setAttribute('it-cinema-mode', 'true');
+	} else {
+		document.documentElement.removeAttribute('it-cinema-mode');
+	}
+	window.dispatchEvent(new Event('resize'));
+};
+
 ImprovedTube.playerCinemaModeButton = function () {
 	if (this.storage.player_cinema_mode_button && (/watch\?/.test(location.href))) {
 		var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
@@ -1273,6 +1287,7 @@ ImprovedTube.playerCinemaModeButton = function () {
 				} else {
 					overlay.style.display = overlay.style.display === 'none' || overlay.style.display === '' ? 'block' : 'none';
 				}
+				ImprovedTube.updateCinemaModeState();
 			},
 			title: 'Cinema Mode'
 		});
@@ -1301,6 +1316,7 @@ ImprovedTube.playerCinemaModeDisable = function () {
 			}
 			var cinemaModeButton = xpath('//*[@id="it-cinema-mode-button"]')[0]
 			if (cinemaModeButton) cinemaModeButton.style.opacity = 0.64
+			ImprovedTube.updateCinemaModeState();
 		}
 	}
 }
@@ -1336,6 +1352,7 @@ ImprovedTube.playerCinemaModeEnable = function () {
 
 				var cinemaModeButton = xpath('//*[@id="it-cinema-mode-button"]')[0]
 				if (cinemaModeButton) cinemaModeButton.style.opacity = 1
+				ImprovedTube.updateCinemaModeState();
 			}
 		}
 	}

tests/unit/comments-sidebar.test.js

@@ -214,4 +214,22 @@ describe('comments sidebar', () => {
 
 		expect(comments.parentElement.id).toBe('secondary-inner');
 	});
+
+	test('does not constrain player width while cinema mode is active', () => {
+		const { document } = installBrowserStubs(true);
+		loadAppearance();
+
+		const overlay = document._createElementWithId('div', 'overlay_cinema');
+		overlay.style.display = 'block';
+		document.body.appendChild(overlay);
+		document.documentElement.setAttribute('it-cinema-mode', 'true');
+
+		ImprovedTube.commentsSidebar();
+		jest.advanceTimersByTime(300);
+
+		const primary = document.getElementById('primary');
+		const player = document.querySelector('#player.style-scope.ytd-watch-flexy');
+		expect(primary.style.width).toBe('');
+		expect(player.style.width).toBe('');
+	});
 });