UI fixes

app.py

@@ -207,7 +207,7 @@ body, gradio-app, .gradio-container, .main, .wrap, .contain { background: var(--
 footer { display: none !important; }
 .block, .form, .panel, .gr-group, .gr-box { background: transparent !important; border: none !important; box-shadow: none !important; }
 #topbar { display:flex; justify-content:space-between; align-items:center; padding:22px 0 22px; border-bottom:1px solid var(--line); }
-#topbar .brand { font-family: Helvetica, Arial, sans-serif; font-weight:700; font-size:22px; letter-spacing:-0.04em; color:var(--fg); }
+#topbar .brand { white-space:nowrap; font-family: Helvetica, Arial, sans-serif; font-weight:700; font-size:22px; letter-spacing:-0.04em; color:var(--fg); }
 #topbar .mark { display:inline-flex; width:34px; height:34px; background:#000; border:1px solid var(--line); margin-right:12px;
   align-items:center; justify-content:center; vertical-align:middle; font-size:15px; }
 #topbar a { color: var(--fg); text-decoration:none; font-size:13px; }
@@ -232,6 +232,7 @@ button.secondary { background:transparent !important; color:var(--fg) !important
   font-size:14px !important; padding:14px !important; }
 button.secondary:hover:not(:disabled) { border-color:var(--fg) !important; }
 button:disabled { opacity:0.35 !important; cursor:not-allowed; }
+.linkbtn, .linkbtn button { white-space:nowrap !important; width:auto !important; flex:none !important; }
 .linkbtn { background:transparent !important; border:none !important; color:var(--muted) !important; text-decoration:underline !important;
   text-underline-offset:4px; font-size:13px !important; padding:4px 0 !important; min-width:0 !important; box-shadow:none !important; }
 .linkbtn:hover { color:var(--fg) !important; }
@@ -257,7 +258,9 @@ table.lb .org { color:var(--muted); font-size:11px; margin-top:3px; }
 .prose h3 { color: var(--fg); font-size:15px; margin: 26px 0 8px; }
 .prose a { color: var(--fg); }
 #foot { border-top:1px solid var(--line); margin-top:56px; padding:22px 0 40px; color:var(--muted); font-size:12px; line-height:1.6; }
-@media (max-width: 640px) { #hero { padding-top:36px; } #hero h1 { font-size:34px; } button[role="tab"] { padding:12px 10px !important; } }
+#votes > * { min-width: 0 !important; }
+@media (max-width: 640px) { #votes { display:grid !important; grid-template-columns:1fr 1fr; gap:8px; }
+  #topbar .muted { display:none; } #hero { padding-top:36px; } #hero h1 { font-size:34px; } button[role="tab"] { padding:12px 10px !important; } }
 """
 
 FORCE_DARK = """
@@ -293,7 +296,7 @@ Every text you submit and every vote is written to the arena's Hugging Face buck
 
 with gr.Blocks(title="TTS Arena", theme=THEME, css=CSS, js=FORCE_DARK) as demo:
     gr.HTML('<div id="topbar"><div class="brand"><span class="mark">▶</span>TTS Arena</div>'
-            '<a href="#about">How it works ↗</a></div>'
+            '<span class="muted" style="font-size:13px">small models · blind votes</span></div>'
             '<div id="hero"><div class="crumb">ARENA / TEXT-TO-SPEECH</div><h1>Which voice<br>sounds better?</h1>'
             '<p>Blind battles between small text-to-speech models. Two read the same text, you pick the better one.</p></div>')
 
@@ -312,7 +315,7 @@ with gr.Blocks(title="TTS Arena", theme=THEME, css=CSS, js=FORCE_DARK) as demo:
                 with gr.Column():
                     gr.HTML('<div class="side-label">MODEL B</div>')
                     out_b = gr.Audio(show_label=False, interactive=False, elem_classes="audio-box", show_download_button=False)
-            with gr.Row():
+            with gr.Row(elem_id="votes"):
                 btn_a = gr.Button("← " + VOTE_LABELS["a"], interactive=False, variant="secondary")
                 btn_tie = gr.Button(VOTE_LABELS["tie"], interactive=False, variant="secondary")
                 btn_bad = gr.Button(VOTE_LABELS["both_bad"], interactive=False, variant="secondary")
@@ -323,7 +326,7 @@ with gr.Blocks(title="TTS Arena", theme=THEME, css=CSS, js=FORCE_DARK) as demo:
             plot = gr.Plot(value=leaderboard_plot(), show_label=False)
             refresh = gr.Button("Refresh", elem_classes="linkbtn")
         with gr.Tab("About"):
-            gr.HTML('<a id="about"></a>' + ABOUT)
+            gr.HTML(ABOUT)
 
     gr.HTML('<div id="foot">Texts and votes are logged to a Hugging Face bucket. '
             'Audio is generated on demand; no clip is stored.</div>')