Align Results tables and fix overlapping table headers

Lay out the Results page as two rows (charts, then tables) so the
architecture audit and pathway attention tables start at the same
height. Give pinned table headers an opaque background so scrolled rows
no longer show through them.

app.py

@@ -1378,16 +1378,21 @@ with gr.Blocks(title="BioLM-NET Workbench", fill_width=True) as demo:
                 results_empty_note = gr.HTML(ui.empty_note_html("Build the biological architecture, train a model, or run prediction to populate this page."))
                 with gr.Row(elem_classes=["results-stat-row"], visible=False) as results_stats_row:
                     results_stats = gr.HTML("")
-                with gr.Row(elem_classes=["results-grid"], equal_height=False, visible=False) as results_content:
-                    with gr.Column(scale=6, min_width=0):
-                        gr.HTML('<div class="mono sect">Training history</div>')
-                        results_loss_plot = gr.Plot(show_label=False)
-                        gr.HTML('<div class="mono sect sect-spaced">Sparse architecture audit</div>')
-                        results_architecture_table = gr.Dataframe(max_height=TABLE_MAX_HEIGHT, interactive=False, wrap=False, value=pd.DataFrame(), headers=[""], column_count=(1, "dynamic"))
-                    with gr.Column(scale=6, min_width=0):
-                        results_confusion = gr.HTML("")
-                        gr.HTML('<div class="mono sect sect-spaced">Pathway attention · top retained</div>')
-                        results_pathway_table = gr.Dataframe(max_height=TABLE_MAX_HEIGHT, interactive=False, wrap=False, value=pd.DataFrame(), headers=[""], column_count=(1, "dynamic"))
+                # Two rows so the side-by-side panels in each row start at the same height.
+                with gr.Column(visible=False) as results_content:
+                    with gr.Row(elem_classes=["results-grid"], equal_height=False):
+                        with gr.Column(scale=6, min_width=0):
+                            gr.HTML('<div class="mono sect">Training history</div>')
+                            results_loss_plot = gr.Plot(show_label=False)
+                        with gr.Column(scale=6, min_width=0):
+                            results_confusion = gr.HTML("")
+                    with gr.Row(elem_classes=["results-grid"], equal_height=False):
+                        with gr.Column(scale=6, min_width=0):
+                            gr.HTML('<div class="mono sect">Sparse architecture audit</div>')
+                            results_architecture_table = gr.Dataframe(max_height=TABLE_MAX_HEIGHT, interactive=False, wrap=False, value=pd.DataFrame(), headers=[""], column_count=(1, "dynamic"))
+                        with gr.Column(scale=6, min_width=0):
+                            gr.HTML('<div class="mono sect">Pathway attention · top retained</div>')
+                            results_pathway_table = gr.Dataframe(max_height=TABLE_MAX_HEIGHT, interactive=False, wrap=False, value=pd.DataFrame(), headers=[""], column_count=(1, "dynamic"))
                 with gr.Column(visible=False) as results_tables_bottom:
                     gr.HTML('<div class="mono sect sect-spaced">Validation predictions</div>')
                     results_validation_table = gr.Dataframe(max_height=TABLE_MAX_HEIGHT, interactive=False, wrap=False, value=pd.DataFrame(), headers=[""], column_count=(1, "dynamic"))

biolmnet/ui/styles.py

@@ -621,7 +621,9 @@ body, .gradio-container {
 .gradio-container table { color: var(--color-text) !important; font-size: 12.5px !important; }
 .gradio-container thead th {
   font: 500 10px/1 var(--font-mono) !important; letter-spacing: .1em; text-transform: uppercase;
-  color: var(--color-muted-2) !important; background: transparent !important;
+  color: var(--color-muted-2) !important;
+  /* opaque so rows scrolling under the pinned header stay hidden */
+  background: var(--color-bg) !important;
   border-bottom: 1px solid var(--color-divider) !important;
 }
 .gradio-container tbody td { border-bottom: 1px solid var(--color-row-rule) !important; }