Move annotation guide to top

app.py

@@ -318,6 +318,9 @@ def build_app() -> gr.Blocks:
                 min_width=220,
             )
 
+        with gr.Accordion("Annotation guide", open=True, elem_id="annotation-guide"):
+            gr.Markdown(GUIDE_MARKDOWN)
+
         progress = gr.HTML(progress_html(None, None), elem_id="audit-progress")
         status = gr.Markdown("**Select an annotator to begin**", elem_id="save-status")
         case_title = gr.Markdown("### Select an annotator", elem_id="case-title")
@@ -331,10 +334,6 @@ def build_app() -> gr.Blocks:
             elem_id="statement-image",
         )
         formula = gr.HTML(formula_html(BUNDLE.cases[0]), elem_id="formula-display")
-        with gr.Accordion("Annotation guide", open=True, elem_id="annotation-guide"):
-            gr.Markdown(GUIDE_MARKDOWN)
-
-
         with gr.Row(equal_height=False, elem_id="workbench"):
             with gr.Column(scale=6, min_width=420):
                 candidate = gr.Dataframe(

styles.css

@@ -49,7 +49,7 @@
 }
 
 #annotation-guide [data-testid="accordion-content"] {
-  max-height: 340px;
+  max-height: 160px;
   overflow-y: auto;
 }
 
@@ -189,7 +189,7 @@ progress {
 
 @media (max-width: 760px) {
   #annotation-guide [data-testid="accordion-content"] {
-    max-height: 260px;
+    max-height: 120px;
   }
 
   #topbar,