diff --git a/whisperlivekit/web/live_transcription.css b/whisperlivekit/web/live_transcription.css index 61c4f13..118b4f7 100644 --- a/whisperlivekit/web/live_transcription.css +++ b/whisperlivekit/web/live_transcription.css @@ -74,10 +74,13 @@ body { font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - margin: 20px; + margin: 0; text-align: center; background-color: var(--bg); color: var(--text); + height: 100vh; + display: flex; + flex-direction: column; } /* Record button */ @@ -168,9 +171,18 @@ body { } #status { - margin-top: 20px; + margin-top: 15px; font-size: 16px; color: var(--text); + margin-bottom: 0; +} + +.header-container { + position: sticky; + top: 0; + background-color: var(--bg); + z-index: 100; + padding: 20px; } /* Settings */ @@ -179,7 +191,6 @@ body { justify-content: center; align-items: center; gap: 15px; - margin-top: 20px; } .settings { @@ -297,9 +308,21 @@ label { border-radius: 999px; } +.transcript-container { + flex: 1; + overflow-y: auto; + padding: 20px; + scrollbar-width: none; + -ms-overflow-style: none; +} + +.transcript-container::-webkit-scrollbar { + display: none; +} + /* Transcript area */ #linesTranscript { - margin: 20px auto; + margin: 0 auto; max-width: 700px; text-align: left; font-size: 16px; @@ -407,6 +430,10 @@ label { /* for smaller screens */ @media (max-width: 768px) { + .header-container { + padding: 15px; + } + .settings-container { flex-direction: column; gap: 10px; @@ -430,11 +457,15 @@ label { .theme-selector-container { margin-top: 10px; } + + .transcript-container { + padding: 15px; + } } @media (max-width: 480px) { - body { - margin: 10px; + .header-container { + padding: 10px; } .settings { @@ -457,4 +488,8 @@ label { width: 14px; height: 14px; } + + .transcript-container { + padding: 10px; + } } diff --git a/whisperlivekit/web/live_transcription.html b/whisperlivekit/web/live_transcription.html index 90c54cb..2e7b518 100644 --- a/whisperlivekit/web/live_transcription.html +++ b/whisperlivekit/web/live_transcription.html @@ -9,63 +9,63 @@ -
-
- +
+
+ +
+
00:00
+
+ -
-
- - -
+
+
+ + +
-
- - -
+
+ + +
-
-
- - +
+
+ + - - + + - - + + +
-
-
+ +

- - -

- -
+
+
+
diff --git a/whisperlivekit/web/live_transcription.js b/whisperlivekit/web/live_transcription.js index 9fe4550..5d57e51 100644 --- a/whisperlivekit/web/live_transcription.js +++ b/whisperlivekit/web/live_transcription.js @@ -373,7 +373,10 @@ function renderLinesWithBuffer( .join(""); linesTranscriptDiv.innerHTML = linesHtml; - window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" }); + const transcriptContainer = document.querySelector('.transcript-container'); + if (transcriptContainer) { + transcriptContainer.scrollTo({ top: transcriptContainer.scrollHeight, behavior: "smooth" }); + } } function updateTimer() {