From 5dbf3e4d52f3e8eb256b79ccc867565098bb30dd Mon Sep 17 00:00:00 2001 From: Hermes Admin Date: Sat, 23 May 2026 12:46:12 +0800 Subject: [PATCH 1/2] fix: keep transcript visible when hiding sidebar (#1530) When both 'Hide sidebar' and 'Transcript' are enabled, the transcript engagement panel should remain visible while related videos and other sidebar content stay hidden. Changes: - Exclude div#panels from hiding when transcript is enabled - Explicitly show transcript panel when both features are active - Hide non-transcript panels (chapters, etc.) to keep sidebar clean - Ensure secondary div has proper width for transcript panel layout - Add comprehensive unit tests for the feature interaction Fixes #1530 --- .../appearance/sidebar/sidebar.css | 18 ++++++++- tests/unit/hide-sidebar-transcript.test.js | 39 +++++++++++++++++++ 2 files changed, 56 insertions(+), 1 deletion(-) create mode 100644 tests/unit/hide-sidebar-transcript.test.js diff --git a/js&css/extension/www.youtube.com/appearance/sidebar/sidebar.css b/js&css/extension/www.youtube.com/appearance/sidebar/sidebar.css index 4857f6bdb..d8c2dfe71 100644 --- a/js&css/extension/www.youtube.com/appearance/sidebar/sidebar.css +++ b/js&css/extension/www.youtube.com/appearance/sidebar/sidebar.css @@ -233,11 +233,27 @@ html[data-page-type=video][it-related-videos='hidden'] ytd-compact-video-rendere html[data-page-type=video][it-related-videos='hidetabs'] #related #chips, html[it-hide-sidebar='true'] #related, html[it-hide-sidebar='true'] #related > ytd-watch-next-secondary-results-renderer > #items, -html[it-hide-sidebar='true'] div#secondary div#panels, +html[it-hide-sidebar='true']:not([it-transcript='true']) div#secondary div#panels, html[it-hide-sidebar='true'] div#secondary div#donation-shelf { display: none !important } +/* Issue #1530: When sidebar is hidden but transcript is enabled, keep transcript visible */ +html[it-hide-sidebar='true'][it-transcript='true'] div#secondary div#panels { + display: block !important +} + +/* Hide non-transcript panels (chapters, etc.) when sidebar is hidden + transcript enabled */ +html[it-hide-sidebar='true'][it-transcript='true'] div#secondary div#panels > :not([target-id*='transcript']) { + display: none !important +} + +/* Ensure secondary has enough width for the transcript panel */ +html[it-hide-sidebar='true'][it-transcript='true'] ytd-watch-flexy[flexy] #secondary.ytd-watch-flexy { + width: fit-content !important; + min-width: max(445px, 17vw) !important +} + html[it-related-videos='collapsed'] #related > ytd-watch-next-secondary-results-renderer > #items:not([it-activated])::before { content: 'Show more' !important; } diff --git a/tests/unit/hide-sidebar-transcript.test.js b/tests/unit/hide-sidebar-transcript.test.js new file mode 100644 index 000000000..1f02bbf07 --- /dev/null +++ b/tests/unit/hide-sidebar-transcript.test.js @@ -0,0 +1,39 @@ +// Test for Issue #1530: Keep transcript visible when hiding the sidebar + +const fs = require('fs'); +const path = require('path'); + +describe('Hide Sidebar + Transcript Visibility (#1530)', () => { + let sidebarCssContent; + + beforeAll(() => { + const filePath = path.join(__dirname, '../../js&css/extension/www.youtube.com/appearance/sidebar/sidebar.css'); + sidebarCssContent = fs.readFileSync(filePath, 'utf8'); + }); + + test('should hide panels when sidebar is hidden but transcript is NOT enabled', () => { + expect(sidebarCssContent).toContain("html[it-hide-sidebar='true']:not([it-transcript='true']) div#secondary div#panels"); + }); + + test('should show panels when both sidebar hidden and transcript enabled', () => { + expect(sidebarCssContent).toContain("html[it-hide-sidebar='true'][it-transcript='true'] div#secondary div#panels"); + expect(sidebarCssContent).toMatch(/html\[it-hide-sidebar='true'\]\[it-transcript='true'\] div#secondary div#panels\s*\{[^}]*display:\s*block\s*!important/); + }); + + test('should hide non-transcript panels when sidebar hidden + transcript enabled', () => { + expect(sidebarCssContent).toContain("html[it-hide-sidebar='true'][it-transcript='true'] div#secondary div#panels > :not([target-id*='transcript'])"); + }); + + test('should ensure secondary has proper width when both features active', () => { + expect(sidebarCssContent).toMatch(/html\[it-hide-sidebar='true'\]\[it-transcript='true'\] ytd-watch-flexy\[flexy\] #secondary\.ytd-watch-flexy/); + expect(sidebarCssContent).toMatch(/min-width:\s*max\(445px,\s*17vw\)/); + }); + + test('should still hide related videos when sidebar is hidden', () => { + expect(sidebarCssContent).toContain("html[it-hide-sidebar='true'] #related"); + }); + + test('should still hide donation shelf when sidebar is hidden', () => { + expect(sidebarCssContent).toContain("html[it-hide-sidebar='true'] div#secondary div#donation-shelf"); + }); +}); From ce39b040378dfd84219888c11a9d6ef394e5d224 Mon Sep 17 00:00:00 2001 From: ImprovedTube Date: Sat, 30 May 2026 00:12:36 +0200 Subject: [PATCH 2/2] Update sidebar.css --- .../www.youtube.com/appearance/sidebar/sidebar.css | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/js&css/extension/www.youtube.com/appearance/sidebar/sidebar.css b/js&css/extension/www.youtube.com/appearance/sidebar/sidebar.css index d8c2dfe71..742b562cc 100644 --- a/js&css/extension/www.youtube.com/appearance/sidebar/sidebar.css +++ b/js&css/extension/www.youtube.com/appearance/sidebar/sidebar.css @@ -233,21 +233,15 @@ html[data-page-type=video][it-related-videos='hidden'] ytd-compact-video-rendere html[data-page-type=video][it-related-videos='hidetabs'] #related #chips, html[it-hide-sidebar='true'] #related, html[it-hide-sidebar='true'] #related > ytd-watch-next-secondary-results-renderer > #items, -html[it-hide-sidebar='true']:not([it-transcript='true']) div#secondary div#panels, +html[it-hide-sidebar='true'] div#secondary div#panels, html[it-hide-sidebar='true'] div#secondary div#donation-shelf { display: none !important } - -/* Issue #1530: When sidebar is hidden but transcript is enabled, keep transcript visible */ -html[it-hide-sidebar='true'][it-transcript='true'] div#secondary div#panels { +/* #1530 */ +html[it-hide-sidebar='true'] div#secondary div#panels > *([target-id*='transcript']), +html[it-hide-sidebar='true'] div#secondary div#panels > *([target-id*='chapters']) { display: block !important } - -/* Hide non-transcript panels (chapters, etc.) when sidebar is hidden + transcript enabled */ -html[it-hide-sidebar='true'][it-transcript='true'] div#secondary div#panels > :not([target-id*='transcript']) { - display: none !important -} - /* Ensure secondary has enough width for the transcript panel */ html[it-hide-sidebar='true'][it-transcript='true'] ytd-watch-flexy[flexy] #secondary.ytd-watch-flexy { width: fit-content !important;