From 9f1e409193a09f37b28d01a9b4e5b18e41033a27 Mon Sep 17 00:00:00 2001
From: German Khokhlov <ouchlock@gmail.com>
Date: Tue, 13 Oct 2026 20:47:00 +0400
Subject: [PATCH] fix(i18n): Street Level errors in the UI language; hint row
 wraps

The Street Level error line and its toasts showed provider errors as
thrown (Google's key-rejected message stayed English). They go through
translateKnown now. In a translation the coverage hint no longer shrinks
to a narrow column beside OPEN GOOGLE STREET VIEW: the button takes its
own line when both do not fit. English layout is unchanged.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/ui/streetLevelControls.js     |  9 +++++----
 src/ui/streetLevelPresentation.js |  3 ++-
 src/ui/styles/street-level.css    | 14 ++++++++++++++
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/ui/streetLevelControls.js b/src/ui/streetLevelControls.js
index 9b52dc1fe..216dcdd28 100644
--- a/src/ui/streetLevelControls.js
+++ b/src/ui/streetLevelControls.js
@@ -5,7 +5,7 @@ import {
   SINCE_STOPS,
 } from './streetLevelPresentation.js';
 
-import { t } from '../i18n/index.js';
+import { t, translateKnown } from '../i18n/index.js';
 const RENDER_MODE_KEY = 'gev:street-level:render-mode';
 const FOCUSABLE =
   'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
@@ -229,7 +229,8 @@ export class StreetLevelControls {
       await this.actions.setEnabled?.(true);
     } catch (error) {
       this.actions.showToast?.(
-        error?.message || t('Street Level could not start'),
+        translateKnown(error?.message || '') ||
+          t('Street Level could not start'),
       );
       return false;
     }
@@ -242,7 +243,7 @@ export class StreetLevelControls {
       await this.actions.setEnabled?.(!enabled);
     } catch (error) {
       this.actions.showToast?.(
-        error?.message || t('Street Level toggle failed'),
+        translateKnown(error?.message || '') || t('Street Level toggle failed'),
       );
     }
   }
@@ -276,7 +277,7 @@ export class StreetLevelControls {
       await this.actions.setEnabled?.(false);
     } catch (error) {
       this.actions.showToast?.(
-        error?.message || t('Street Level toggle failed'),
+        translateKnown(error?.message || '') || t('Street Level toggle failed'),
       );
     }
   }
diff --git a/src/ui/streetLevelPresentation.js b/src/ui/streetLevelPresentation.js
index 3a26b8bce..da941ec34 100644
--- a/src/ui/streetLevelPresentation.js
+++ b/src/ui/streetLevelPresentation.js
@@ -253,7 +253,8 @@ export function presentStreetLevelPanel(state, { now = Date.now() } = {}) {
     providers: presentProviders(state),
     error: keyMissing
       ? null
-      : state.street.error || state.coverage.error || null,
+      : translateKnown(state.street.error || state.coverage.error || '') ||
+        null,
     filter: { pano: filter.pano, sinceDays: Number(filter.sinceDays) || 0 },
     filterControls: {
       pano: state.filterControls?.pano !== false,
diff --git a/src/ui/styles/street-level.css b/src/ui/styles/street-level.css
index 7f5b83cdc..dfe5b0d86 100644
--- a/src/ui/styles/street-level.css
+++ b/src/ui/styles/street-level.css
@@ -205,6 +205,20 @@ button.sl-status:focus-visible {
   display: none;
 }
 
+/* Longer translations: rather than squeeze the hint into a narrow column
+   beside the button, put the button on its own line when both do not fit. */
+html:not([lang='en']) .sl-meta-row {
+  flex-wrap: wrap;
+}
+
+html:not([lang='en']) .sl-meta-row .sl-meta {
+  flex: 1 1 14em;
+}
+
+html:not([lang='en']) .sl-meta-row .sl-nearest-btn {
+  flex: 1 0 auto;
+}
+
 /* ── Errors ──────────────────────────────────────────────────────────────── */
 .sl-error {
   font-family: var(--font-sans);