From 38f8c6b99528533d3dae7fe4eb867e0f3fb89452 Mon Sep 17 00:00:00 2001
From: Evan <evanpelle@gmail.com>
Date: Mon, 5 Jan 2026 17:57:26 -0800
Subject: [PATCH] Move language button to bottom left (#2796)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description:

Move the language button to the bottom left so it takes up less space.

<img width="615" height="567" alt="Screenshot 2026-01-05 at 5 54 23 PM"
src="https://github.com/user-attachments/assets/f29d5bcb-8627-493a-8c0f-1966cb9c9be6"
/>

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

evan
---
 index.html                 |  8 +++-----
 src/client/LangSelector.ts | 28 +++++++++++++---------------
 2 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/index.html b/index.html
index 2ab3f22a6..43fdcf5b3 100644
--- a/index.html
+++ b/index.html
@@ -311,9 +311,6 @@
           block
           secondary
         ></o-button>
-        <div class="container__row">
-          <lang-selector class="w-full"></lang-selector>
-        </div>
       </div>
     </main>
 
@@ -322,12 +319,12 @@
       id="settings-button"
       title="Settings"
       class="fixed bottom-4 right-4 z-50 rounded-full p-2 shadow-lg transition-colors duration-300 flex items-center justify-center"
-      style="width: 80px; height: 80px; background-color: #0075ff"
+      style="width: 60px; height: 60px; background-color: #0075ff"
     >
       <img
         src="/images/SettingIconWhite.svg"
         alt="Settings"
-        style="width: 72px; height: 72px"
+        style="width: 52px; height: 52px"
       />
     </button>
 
@@ -455,6 +452,7 @@
     <help-modal></help-modal>
     <game-info-modal></game-info-modal>
     <dark-mode-button></dark-mode-button>
+    <lang-selector></lang-selector>
     <stats-button></stats-button>
     <alert-frame></alert-frame>
     <chat-modal></chat-modal>
diff --git a/src/client/LangSelector.ts b/src/client/LangSelector.ts
index 782d82f77..d5a5b5770 100644
--- a/src/client/LangSelector.ts
+++ b/src/client/LangSelector.ts
@@ -264,21 +264,19 @@ export class LangSelector extends LitElement {
           });
 
     return html`
-      <div class="container__row">
-        <button
-          id="lang-selector"
-          @click=${this.openModal}
-          class="text-center appearance-none w-full bg-blue-100 dark:bg-gray-700 hover:bg-blue-200 dark:hover:bg-gray-600 text-blue-900 dark:text-gray-100 p-3 sm:p-4 lg:p-5 font-medium text-sm sm:text-base lg:text-lg rounded-md border-none cursor-pointer transition-colors duration-300 flex items-center gap-2 justify-center"
-        >
-          <img
-            id="lang-flag"
-            class="w-6 h-4"
-            src="/flags/${currentLang.svg}.svg"
-            alt="flag"
-          />
-          <span id="lang-name">${currentLang.native} (${currentLang.en})</span>
-        </button>
-      </div>
+      <button
+        id="lang-selector"
+        title="Change Language"
+        @click=${this.openModal}
+        class="fixed bottom-4 left-4 z-50 border-none bg-none cursor-pointer"
+      >
+        <img
+          id="lang-flag"
+          class="w-20 h-14"
+          src="/flags/${currentLang.svg}.svg"
+          alt="flag"
+        />
+      </button>
 
       <language-modal
         .visible=${this.showModal}