Re-add language selector (#4723)

Fixed version

BTCPayServer/Views/UIInvoice/CheckoutV2.cshtml

@@ -164,9 +164,7 @@
             <a class="store-powered-by" href="https://btcpayserver.org" target="_blank" rel="noreferrer noopener">
                 {{$t("powered_by")}} <partial name="_StoreFooterLogo" />
             </a>
-			@* TODO: Re-add this once checkout v2 has been translated
+            <select asp-for="DefaultLang" asp-items="@LangService.GetLanguageSelectListItems()" class="form-select" v-on:change="changeLanguage"></select>
-            <select asp-for="DefaultLang" asp-items="@LangService.GetLanguageSelectListItems()" class="form-select w-auto" v-on:change="changeLanguage"></select>
-			*@
         </footer>
     </div>
     <noscript>

BTCPayServer/wwwroot/checkout-v2/checkout.css

@@ -168,13 +168,12 @@ section dl > div dd {
     color: var(--btcpay-body-text-muted);
 }
 #DefaultLang {
+    width: calc(var(--text-width, 110px) + 3rem);
     color: var(--btcpay-body-text-muted);
     background-color: transparent;
     box-shadow: none;
     border: none;
-    text-align: right;
     cursor: pointer;
-    margin-left: -4.5rem; /* Adjust for visual center */
 }
 #DefaultLang:hover {
     color: var(--btcpay-body-text-hover);

BTCPayServer/wwwroot/checkout-v2/checkout.js

@@ -51,11 +51,23 @@ function isLanguageAvailable(languageCode) {
     return availableLanguages.includes(languageCode);
 }
 
+function updateLanguageSelect() {
+    // calculate and set width, as we want it center aligned
+    const $languageSelect = document.getElementById('DefaultLang');
+    const element = document.createElement('div');
+    element.innerText = $languageSelect.querySelector('option:checked').text;
+    $languageSelect.parentElement.appendChild(element);
+    const width = element.offsetWidth;
+    $languageSelect.parentElement.removeChild(element);
+    $languageSelect.style.setProperty('--text-width', `${width}px`);
+}
+
 function updateLanguage(lang) {
     if (isLanguageAvailable(lang)) {
         i18next.changeLanguage(lang);
         urlParams.set('lang', lang);
         window.history.replaceState({}, '', `${location.pathname}?${urlParams}`);
+        updateLanguageSelect();
     }
 }
 
@@ -177,6 +189,7 @@ function initApp() {
             if (this.isActive) {
                 this.listenIn();
             }
+            updateLanguageSelect();
             window.parent.postMessage('loaded', '*');
         },
         methods: {