From 429d0edbf8b712de629c97aab51c1e5d88b44892 Mon Sep 17 00:00:00 2001
From: schlagmichdoch <schlagmichdoch@users.noreply.github.com>
Date: Mon, 11 Dec 2023 21:44:13 +0100
Subject: [PATCH] Fix overflowing Brazilian Portuguese button and change style
 of current language button

---
 public/index.html                 | 64 ++++++++++++++++---------------
 public/scripts/ui.js              | 28 +++++++-------
 public/styles/deferred-styles.css | 27 ++++++++-----
 3 files changed, 65 insertions(+), 54 deletions(-)

diff --git a/public/index.html b/public/index.html
index 317a4cc..09d421b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -182,79 +182,81 @@
                 <div class="row center p2">
                     <h2 class="dialog-title" data-i18n-key="dialogs.language-selector-title" data-i18n-attrs="text"></h2>
                 </div>
-                <div class="language-buttons">
-                    <button class="btn fw" data-i18n-key="dialogs.system-language" data-i18n-attrs="text"></button>
-                    <button class="btn fw" value="ar">
+                <div class="language-buttons p2">
+                    <button class="btn fw wrap">
+                        <span data-i18n-key="dialogs.system-language" data-i18n-attrs="text"></span>
+                    </button>
+                    <button class="btn fw wrap" value="ar">
                         <span>العربية</span>
-                        <span>-</span>
+                        <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
                         <span>(Arabic)</span>
                     </button>
-                    <button class="btn fw" value="de">
+                    <button class="btn fw wrap" value="de">
                         <span>Deutsch</span>
-                        <span>-</span>
+                        <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
                         <span>(German)</span>
                     </button>
-                    <button class="btn fw" value="en">
+                    <button class="btn fw wrap" value="en">
                         <span>English</span>
                     </button>
-                    <button class="btn fw" value="es">
+                    <button class="btn fw wrap" value="es">
                         <span>Español</span>
-                        <span>-</span>
+                        <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
                         <span>(Spanish)</span>
                     </button>
-                    <button class="btn fw" value="fr">
+                    <button class="btn fw wrap" value="fr">
                         <span>Français</span>
-                        <span>-</span>
+                        <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
                         <span>(French)</span>
                     </button>
-                    <button class="btn fw" value="id">
+                    <button class="btn fw wrap" value="id">
                         <span>Bahasa Indonesia</span>
-                        <span>-</span>
+                        <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
                         <span>(Indonesian)</span>
                     </button>
-                    <button class="btn fw" value="it">
+                    <button class="btn fw wrap" value="it">
                         <span>Italiano</span>
-                        <span>-</span>
+                        <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
                         <span>(Italian)</span>
                     </button>
-                    <button class="btn fw" value="nl">
+                    <button class="btn fw wrap" value="nl">
                         <span>Nederlands</span>
-                        <span>-</span>
+                        <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
                         <span>(Dutch)</span>
                     </button>
-                    <button class="btn fw" value="nb">
+                    <button class="btn fw wrap" value="nb">
                         <span>Norsk</span>
-                        <span>-</span>
+                        <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
                         <span>(Norwegian)</span>
                     </button>
-                    <button class="btn fw" value="pt-BR">
+                    <button class="btn fw wrap" value="pt-BR">
                         <span>Português do Brasil</span>
-                        <span>-</span>
+                        <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
                         <span>(Brazilian Portuguese)</span>
                     </button>
-                    <button class="btn fw" value="ro">
+                    <button class="btn fw wrap" value="ro">
                         <span>Română</span>
-                        <span>-</span>
+                        <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
                         <span>(Romanian)</span>
                     </button>
-                    <button class="btn fw" value="ru">
+                    <button class="btn fw wrap" value="ru">
                         <span>Русский язык</span>
-                        <span>-</span>
+                        <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
                         <span>(Russian)</span>
                     </button>
-                    <button class="btn fw" value="tr">
+                    <button class="btn fw wrap" value="tr">
                         <span>Türkçe</span>
-                        <span>-</span>
+                        <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
                         <span>(Turkish)</span>
                     </button>
-                    <button class="btn fw" value="zh-CN">
+                    <button class="btn fw wrap" value="zh-CN">
                         <span>中文</span>
-                        <span>-</span>
+                        <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
                         <span>(Chinese)</span>
                     </button>
-                    <button class="btn fw" value="ja">
+                    <button class="btn fw wrap" value="ja">
                         <span>日本語</span>
-                        <span>-</span>
+                        <span>&nbsp;&nbsp;-&nbsp;&nbsp;</span>
                         <span>(Japanese)</span>
                     </button>
                 </div>
diff --git a/public/scripts/ui.js b/public/scripts/ui.js
index 8c0efd8..a6c6c8e 100644
--- a/public/scripts/ui.js
+++ b/public/scripts/ui.js
@@ -774,7 +774,7 @@ class LanguageSelectDialog extends Dialog {
         this.$languageSelectBtn = $('language-selector');
         this.$languageSelectBtn.addEventListener('click', _ => this.show());
 
-        this.$languageButtons = this.$el.querySelectorAll(".language-buttons button");
+        this.$languageButtons = this.$el.querySelectorAll(".language-buttons .btn");
         this.$languageButtons.forEach($btn => {
             $btn.addEventListener("click", e => this.selectLanguage(e));
         })
@@ -790,22 +790,22 @@ class LanguageSelectDialog extends Dialog {
     }
 
     show() {
-        if (Localization.isSystemLocale()) {
-            this.$languageButtons[0].focus();
-        }
-        else {
-            let locale = Localization.getLocale();
-            for (let i=0; i<this.$languageButtons.length; i++) {
-                const $btn = this.$languageButtons[i];
-                if ($btn.value === locale) {
-                    $btn.focus();
-                    break;
-                }
-            }
-        }
+        let locale = Localization.getLocale();
+        this.currentLanguageBtn = Localization.isSystemLocale()
+            ? this.$languageButtons[0]
+            : this.$el.querySelector(`.btn[value="${locale}"]`);
+
+        this.currentLanguageBtn.classList.add("current");
+
         super.show();
     }
 
+    hide() {
+        this.currentLanguageBtn.classList.remove("current");
+
+        super.hide();
+    }
+
     selectLanguage(e) {
         e.preventDefault()
         let languageCode = e.target.value;
diff --git a/public/styles/deferred-styles.css b/public/styles/deferred-styles.css
index eb574f9..d51688d 100644
--- a/public/styles/deferred-styles.css
+++ b/public/styles/deferred-styles.css
@@ -335,7 +335,7 @@ x-dialog x-paper {
     display: flex;
     margin: auto;
     flex-direction: column;
-    width: 400px;
+    max-width: 450px;
     z-index: 3;
     border-radius: 30px;
     overflow: hidden;
@@ -388,10 +388,6 @@ x-dialog a {
 
 /* Pair Devices Dialog & Public Room Dialog */
 
-#public-room-dialog x-paper {
-    width: 450px;
-}
-
 .input-key-container {
     width: 100%;
     display: flex;
@@ -556,12 +552,25 @@ x-paper > .btn-row {
     margin: 5px 10px 10px;
 }
 
-.language-buttons > button > span {
-    margin: 0 0.3em;
+.language-buttons > .btn {
+    border-top: solid lightgray 1px;
+    padding: 7px;
+    font-size: 12px;
 }
 
-.language-buttons > button {
-    min-height: 36px;
+.language-buttons > .btn:last-of-type {
+    border-bottom: solid lightgray 1px;
+}
+
+/* Ensure click event target is always button and never span */
+.language-buttons span {
+    z-index: -1;
+}
+
+.language-buttons > .current > span {
+    text-decoration: underline 4px;
+    text-decoration-skip-ink: none;
+    text-underline-position: under;
 }
 
 .file-description {