From c61ddb38c26dfa0afdc6c9d8d2bfa44a07b9685a Mon Sep 17 00:00:00 2001
From: manjunath <manjunath@halfpixel.ai>
Date: Fri, 30 Oct 2026 23:47:54 +0530
Subject: [PATCH] keep the phone credit line on screen

On phones the credit line kept white-space: nowrap, so map plus outline credits ran past the right edge and cut off the Data attribution link. Cesium's credit block is absolutely positioned inside #cesium-credits, so the box needs a real width for the credits to wrap: give it the screen width divided by its 0.8 scale, overriding the dock's width: auto !important the way the phone offset already does. Desktop keeps its one-line rule.
---
 changelog.d/842-voice-outlines.md |  3 +++
 src/ui/mobileShell.test.mjs       | 10 ++++++++++
 src/ui/styles/mobile-shell.css    | 10 +++++++++-
 3 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/changelog.d/842-voice-outlines.md b/changelog.d/842-voice-outlines.md
index 812ef7922..67f17c666 100644
--- a/changelog.d/842-voice-outlines.md
+++ b/changelog.d/842-voice-outlines.md
@@ -30,3 +30,6 @@
 - Skip Nominatim place and outline lookups when the server reports that no
   Nominatim endpoint is configured, so a default install sends no request it
   would refuse (Manjunath, #842).
+- Keep the phone credit line on screen when map and outline credits make it
+  longer, wrapping it within the screen instead of running off the edge
+  (Manjunath, #842).
diff --git a/src/ui/mobileShell.test.mjs b/src/ui/mobileShell.test.mjs
index bb7599547..7793fadd4 100644
--- a/src/ui/mobileShell.test.mjs
+++ b/src/ui/mobileShell.test.mjs
@@ -499,6 +499,16 @@ test('the phone shell keeps the required attribution visible', () => {
     idleCredit,
     /display:\s*none|visibility:\s*hidden|opacity:\s*0/,
   );
+  // A long credit line (map plus outline credits) wraps inside the screen:
+  // the box needs a real width for Cesium's absolutely positioned credit
+  // block, set before the 0.8 scale, so it is divided by it.
+  assert.match(idleCredit, /white-space: normal;/);
+  assert.match(
+    idleCredit,
+    /[^-]width: calc\(\(100vw - 20px\) \/ 0\.8\) !important;/,
+  );
+  assert.match(idleCredit, /max-width: none !important;/);
+  assert.match(idleCredit, /scale: 0\.8;/);
   // Open sheet: above everything the sheet covers, drawn above the sheets.
   const sheetCredit = rule(
     'body.mobile-shell[data-mobile-sheet]:not(.recording-mode):not(.cockpit-mode):not(.ui-clean-view) #cesium-credits',
diff --git a/src/ui/styles/mobile-shell.css b/src/ui/styles/mobile-shell.css
index a406b8f3b..e509f9ddf 100644
--- a/src/ui/styles/mobile-shell.css
+++ b/src/ui/styles/mobile-shell.css
@@ -378,7 +378,15 @@ body.mobile-shell:not(.recording-mode):not(.cockpit-mode):not(.ui-clean-view)
   right: auto;
   bottom: calc(var(--mobile-tab-space) + 106px) !important;
   left: 10px;
-  max-width: calc(100vw - 20px);
+  /* Cesium's credit block is absolutely positioned inside this box, so the
+     box needs a real width (a max-width alone leaves it 0 wide) for the
+     credits to wrap at the screen width rather than one word per line. The
+     width applies before the 0.8 scale, keeping the scaled line 10px from the
+     right edge, so every credit and "Data attribution" stay on screen. Like
+     the offset above, it must beat the dock's width: auto !important. */
+  width: calc((100vw - 20px) / 0.8) !important;
+  max-width: none !important;
+  white-space: normal;
   transform-origin: left bottom;
   scale: 0.8;
 }