layout

app.py

@@ -483,8 +483,9 @@ body, .gradio-container, .gradio-container *{color:#111 !important}
 .svelte-3lgy39 .wrap-inner, .wrap-inner{ color: inherit; }
 #popup-overlay, #popup-overlay * {color:#f9fafb !important}
 #popup-overlay #ai-analysis-box, #popup-overlay #ai-analysis-box * { color: #1e293b !important; }
-/* Position login button in top right corner */
-#login_button {position: fixed !important; top: 16px !important; right: 16px !important; z-index: 1000 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;}
+/* Style login button to be compact */
+#login_button {max-width: 180px !important;}
+#login_button button {padding: 6px 14px !important; font-size: 0.9rem !important;}
 """
 
 # Client boot JS to initialize the mini-map reliably in Gradio (scripts in HTML are sanitized)
@@ -704,7 +705,10 @@ APP_BOOT_JS = """
 with gr.Blocks(css=APP_CSS, title="LLM GeoGuessr") as demo:
     user_profile = gr.State()
 
-    gr.Markdown("## LLM GeoGuessr", elem_id="title_md")
+    with gr.Row():
+        gr.Markdown("## LLM GeoGuessr", elem_id="title_md")
+        login_button = LoginButton(visible=True, elem_id="login_button", scale=0, min_width=180)
+    
     gr.Markdown("""
     ### How to Play
     1. **Select a difficulty** and click "Start Game".
@@ -714,8 +718,6 @@ with gr.Blocks(css=APP_CSS, title="LLM GeoGuessr") as demo:
     """)
     
     login_prompt_md = gr.Markdown("### Please log in with your Hugging Face account to play.", visible=True)
-    login_button = LoginButton(visible=True, elem_id="login_button")
-    
     logged_in_md = gr.Markdown(visible=False)
 
     with gr.Group(visible=False, elem_id="lobby_group") as lobby_group: