Make the transcription sticky

app/gradio_config.py

@@ -21,6 +21,17 @@ css = """
 
 .transcription {
   font-size: large;
+  position: sticky;
+  top: 20px;
+}
+
+.transcription-column {
+  height: 100vh;
+}
+
+/* this is needed in order to make the transcription sticky */
+.app {
+  overflow: visible;
 }
 
 /* style of textline svg elements */

app/tabs/visualizer.py

@@ -65,7 +65,7 @@ with gr.Blocks() as visualizer:
                 right = gr.Button("Next →", visible=False, scale=0)
 
         # Transcription panel
-        with gr.Column(scale=1):
+        with gr.Column(scale=1, elem_classes="transcription-column"):
             gr.Markdown("## Transcription")
             transcription = gr.HTML(elem_classes="transcription", container=True, max_height="60vh")