fixed mobile formatting

lm-sys · Jan 12, 2025 · e978cd8 · e978cd8
1 parent 74a4b2e
commit e978cd8
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/fastchat/serve/gradio_web_server.py b/fastchat/serve/gradio_web_server.py
@@ -698,7 +698,7 @@ def bot_response(
 
 @media screen and (max-width: 769px) {
     .visualizer {
-        height: 100vw;
+        height: 180vw;
         overflow-y: scroll;
         width: 100%;
         overflow-x: hidden;

diff --git a/fastchat/serve/gradio_web_server_multi.py b/fastchat/serve/gradio_web_server_multi.py
@@ -54,14 +54,15 @@ def build_visualizer():
     visualizer_markdown = """
     # 🔍 Arena Visualizer
     This tool provides an interactive way to explore how people are using Chatbot Arena. 
-    Using [topic clustering](https://github.com/MaartenGr/BERTopic), we organized user-submitted prompts from Arena battles into broad and specific categories. 
+    Using *[topic clustering](https://github.com/MaartenGr/BERTopic)*, we organized user-submitted prompts from Arena battles into broad and specific categories. 
     Dive in to uncover insights about the distribution and themes of these prompts!
     """
     gr.Markdown(visualizer_markdown, elem_id="visualizer_markdown")
     expandText = "👇 Expand to see detailed instructions on how to use the visualizer"
     with gr.Accordion(expandText, open=False):
         instructions = """
         - Hover Over Segments: View the category name, the number of prompts, and their percentage.
+            - *On mobile devices*: Tap instead of hover.
         - Click to Explore: 
             - Click on a main category to see its subcategories.
             - Click on subcategories to see example prompts in the sidebar.