From 15c9c1bf06e250ea158dae4359945b23a4ab4370 Mon Sep 17 00:00:00 2001 From: Bryan Haberberger Date: Wed, 13 May 2026 13:58:45 -0500 Subject: [PATCH 1/4] An observer to work with the complex sizing scenarios. Does not modify the canvas-panel renderings, just keeps the workspace on screen. --- components/simple-transcription/index.js | 30 +++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/components/simple-transcription/index.js b/components/simple-transcription/index.js index e4e5d3cf..a1ac5361 100644 --- a/components/simple-transcription/index.js +++ b/components/simple-transcription/index.js @@ -119,6 +119,7 @@ export default class SimpleTranscriptionInterface extends HTMLElement { handleResize() { // Recalculate image positions on resize + this.#updateImgTopMaxHeight() if (this.#activeLine) { this.adjustImages(this.#activeLine) } @@ -263,7 +264,7 @@ export default class SimpleTranscriptionInterface extends HTMLElement { height: 0px; width: 100%; overflow: hidden; - transition: height 0.5s ease-in-out; + transition: height 0.5s ease-in-out, max-height 0.2s ease-in-out; background-color: #1a1a1a; } @@ -416,6 +417,33 @@ export default class SimpleTranscriptionInterface extends HTMLElement { this.updateLines() } }) + + // Keep #imgTop bounded by whatever space the workspace currently uses (issue #551). + // Workspace height changes when tools open/close, so observe it live instead of + // using a fixed CSS reserve. + const workspaceEl = this.shadowRoot.querySelector('#transWorkspace') + if (workspaceEl && typeof ResizeObserver !== 'undefined') { + const observer = new ResizeObserver(() => this.#updateImgTopMaxHeight()) + observer.observe(workspaceEl) + this.renderCleanup.add(() => observer.disconnect()) + } + } + + /** + * Cap #imgTop's height so a tall line cannot push #transWorkspace off-screen. + * Reserves the live-measured workspace height plus a small strip for #imgBottom. + */ + #updateImgTopMaxHeight() { + const imgTop = this.shadowRoot.querySelector('#imgTop') + const workspace = this.shadowRoot.querySelector('#transWorkspace') + const imageContainer = this.shadowRoot.querySelector('.image-container') + if (!imgTop || !workspace || !imageContainer) return + + const containerHeight = imageContainer.clientHeight || globalThis.innerHeight || 0 + const workspaceHeight = workspace.offsetHeight || 0 + const MIN_BOTTOM_PREVIEW = 40 + const available = Math.max(containerHeight - workspaceHeight - MIN_BOTTOM_PREVIEW, 120) + imgTop.style.maxHeight = `${available}px` } toggleSplitscreen() { From a631c1df491097e3bb10cfb64b580787a250a223 Mon Sep 17 00:00:00 2001 From: Bryan Haberberger Date: Wed, 13 May 2026 14:05:52 -0500 Subject: [PATCH 2/4] An observer to work with the complex sizing scenarios. Does not modify the canvas-panel renderings, just keeps the workspace on screen. --- components/simple-transcription/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/simple-transcription/index.js b/components/simple-transcription/index.js index a1ac5361..7ccfb1b9 100644 --- a/components/simple-transcription/index.js +++ b/components/simple-transcription/index.js @@ -264,7 +264,7 @@ export default class SimpleTranscriptionInterface extends HTMLElement { height: 0px; width: 100%; overflow: hidden; - transition: height 0.5s ease-in-out, max-height 0.2s ease-in-out; + transition: height 0.5s ease-in-out; background-color: #1a1a1a; } From c9ccd8e87f3db2222b2f3daabd21f0803fb1209b Mon Sep 17 00:00:00 2001 From: Bryan Haberberger Date: Wed, 13 May 2026 14:12:46 -0500 Subject: [PATCH 3/4] changes during review --- components/simple-transcription/index.js | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/components/simple-transcription/index.js b/components/simple-transcription/index.js index 7ccfb1b9..2872ad1b 100644 --- a/components/simple-transcription/index.js +++ b/components/simple-transcription/index.js @@ -418,13 +418,16 @@ export default class SimpleTranscriptionInterface extends HTMLElement { } }) - // Keep #imgTop bounded by whatever space the workspace currently uses (issue #551). - // Workspace height changes when tools open/close, so observe it live instead of - // using a fixed CSS reserve. + // Keep #imgTop bounded by whatever space the workspace currently uses. + // Workspace height changes when tools open/close, and .image-container height + // can change when the project header grows/shrinks, so observe both live + // instead of using a fixed CSS reserve. const workspaceEl = this.shadowRoot.querySelector('#transWorkspace') - if (workspaceEl && typeof ResizeObserver !== 'undefined') { + const containerEl = this.shadowRoot.querySelector('.image-container') + if (typeof ResizeObserver !== 'undefined' && (workspaceEl || containerEl)) { const observer = new ResizeObserver(() => this.#updateImgTopMaxHeight()) - observer.observe(workspaceEl) + if (workspaceEl) observer.observe(workspaceEl) + if (containerEl) observer.observe(containerEl) this.renderCleanup.add(() => observer.disconnect()) } } @@ -442,7 +445,8 @@ export default class SimpleTranscriptionInterface extends HTMLElement { const containerHeight = imageContainer.clientHeight || globalThis.innerHeight || 0 const workspaceHeight = workspace.offsetHeight || 0 const MIN_BOTTOM_PREVIEW = 40 - const available = Math.max(containerHeight - workspaceHeight - MIN_BOTTOM_PREVIEW, 120) + const MIN_IMGTOP_HEIGHT = 120 + const available = Math.max(containerHeight - workspaceHeight - MIN_BOTTOM_PREVIEW, MIN_IMGTOP_HEIGHT) imgTop.style.maxHeight = `${available}px` } From 9048fe1c33b7ca391ee58252bc7cf45bb29baf6a Mon Sep 17 00:00:00 2001 From: Bryan Haberberger Date: Wed, 13 May 2026 14:20:29 -0500 Subject: [PATCH 4/4] simplify. no need to watch .image-container, it is static --- components/simple-transcription/index.js | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/components/simple-transcription/index.js b/components/simple-transcription/index.js index 2872ad1b..d39a34d7 100644 --- a/components/simple-transcription/index.js +++ b/components/simple-transcription/index.js @@ -419,15 +419,12 @@ export default class SimpleTranscriptionInterface extends HTMLElement { }) // Keep #imgTop bounded by whatever space the workspace currently uses. - // Workspace height changes when tools open/close, and .image-container height - // can change when the project header grows/shrinks, so observe both live - // instead of using a fixed CSS reserve. + // Workspace height changes when tools open/close; .image-container is pinned + // at 100vh and only changes on window resize, which handleResize already covers. const workspaceEl = this.shadowRoot.querySelector('#transWorkspace') - const containerEl = this.shadowRoot.querySelector('.image-container') - if (typeof ResizeObserver !== 'undefined' && (workspaceEl || containerEl)) { + if (typeof ResizeObserver !== 'undefined' && workspaceEl) { const observer = new ResizeObserver(() => this.#updateImgTopMaxHeight()) - if (workspaceEl) observer.observe(workspaceEl) - if (containerEl) observer.observe(containerEl) + observer.observe(workspaceEl) this.renderCleanup.add(() => observer.disconnect()) } }