Use dropdown for language selection

app.py

@@ -509,11 +509,12 @@ def update_language(language: str) -> gr.Markdown:
 
 with gr.Blocks(css=custom_css, css_paths="style.css", theme=gr.themes.Base()) as demo:
     with gr.Row(elem_classes="language-switch-container"):
-        language = gr.Radio(
+        language = gr.Dropdown(
             choices=["🇯🇵 JP", "🇺🇸 EN"],
             value="🇯🇵 JP",
-            elem_classes="language-switch-radio",
+            elem_classes="language-selector",
             show_label=False,
+            container=False,
         )
 
     gr.HTML(TITLE)

style.css

@@ -1,60 +1,7 @@
-.language-switch-container {
+.language-selector {
     position: absolute;
     top: 10px;
     right: 10px;
     z-index: 1000;
     width: auto;
 }
-
-#space-title {
-    margin-top: 50px; /* Add margin to the top of the title */
-}
-
-.language-switch-radio {
-    display: inline-flex !important;
-    gap: 0 !important;
-    border: 1px solid var(--border-color-primary);
-    border-radius: 4px;
-    overflow: hidden;
-    background-color: var(--background-fill-primary);
-}
-
-.language-switch-radio .gr-form {
-    display: contents;
-}
-
-.language-switch-radio .gr-radio-row {
-    display: contents;
-}
-
-.language-switch-radio .gr-radio-row > div {
-    display: contents;
-}
-
-.language-switch-radio input[type="radio"] {
-    display: none;
-}
-
-.language-switch-radio label {
-    padding: 5px 10px;
-    font-size: 14px;
-    min-width: 60px;
-    text-align: center;
-    cursor: pointer;
-    transition: background-color 0.3s, color 0.3s;
-    display: inline-block;
-    color: var(--body-text-color);
-}
-
-.language-switch-radio input[type="radio"]:checked + label {
-    background-color: var(--primary-500);
-    color: var(--background-fill-primary);
-}
-
-.language-switch-radio label:hover {
-    background-color: var(--background-fill-secondary);
-}
-
-.language-switch-radio input[type="radio"]:checked + label:hover {
-    background-color: var(--primary-600);
-}