fix(android): match the browser's text size, and let the status bar wrap

Android's WebView scales text by the system font-size setting; Chrome
ignores it and uses its own accessibility preference. With the system
font one step above default, the wrapper rendered every string ~20%
larger than the website at an identical layout width -- the brand
truncated to "mc-web...", message bodies wrapped early, and the footer
broke apart. Pin textZoom to 100 so the wrapper matches the browser.

The footer was fragile independently of that. Status, region badge and
the "Updated:" time sat in a justify-content-between row with no wrap,
so once they exceeded the width each item broke internally instead of
the row reflowing -- a dot with "Polaczono" stranded below it, a time
split from its own label. Longer translated labels ("Aktualizacja:" vs
"Updated:") hit this well before English did. Adding flex-wrap plus
text-nowrap on the items makes them reflow as whole units; .badge
already carries white-space: nowrap, so it needs nothing.

Verified in Chrome against the local container, pl locale, region badge
forced visible, at 412/360/320 CSS px and with a 1.2x text-only override
that reproduces textZoom: before/after screenshots show the reported
breakage and a clean two-line reflow respectively, with no horizontal
overflow. At full width the change is a no-op.

Rides along in the already-pending, never-built wrapper 1.2.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
MarekWo
2026-08-01 18:46:18 +02:00
parent 4d2b3eb6be
commit 09dcf26f87
4 changed files with 15 additions and 7 deletions
@@ -177,6 +177,9 @@ class MainActivity : AppCompatActivity() {
javaScriptEnabled = true
domStorageEnabled = true
cacheMode = WebSettings.LOAD_DEFAULT
// WebView scales text by the system font-size setting, Chrome does not.
// Pin it so the wrapper renders the page exactly like the browser does.
textZoom = 100
}
installNotificationShim()
+3 -3
View File
@@ -193,11 +193,11 @@
</div>
<!-- Status Bar -->
<div class="border-top">
<div class="p-2 small text-muted d-flex justify-content-between align-items-center">
<span id="dmStatusText">
<div class="p-2 small text-muted d-flex flex-wrap gap-2 justify-content-between align-items-center">
<span id="dmStatusText" class="text-nowrap">
<i class="bi bi-circle-fill text-secondary"></i> {{ t('common.connecting') }}
</span>
<span id="dmLastRefresh">{{ t('chat.updated', time=t('common.never')) }}</span>
<span id="dmLastRefresh" class="text-nowrap">{{ t('chat.updated', time=t('common.never')) }}</span>
</div>
</div>
</div>
+4 -4
View File
@@ -96,9 +96,9 @@
</div>
<!-- Status Bar -->
<div class="border-top">
<div class="p-2 small text-muted d-flex justify-content-between align-items-center">
<div class="d-flex gap-2 align-items-center">
<span id="statusText">
<div class="p-2 small text-muted d-flex flex-wrap gap-2 justify-content-between align-items-center">
<div class="d-flex flex-wrap gap-2 align-items-center">
<span id="statusText" class="text-nowrap">
<i class="bi bi-circle-fill text-secondary"></i> {{ t('common.connecting') }}
</span>
<span id="regionIndicator" class="badge bg-info text-dark d-none" role="button"
@@ -106,7 +106,7 @@
<i class="bi bi-pin-map"></i> <span id="regionIndicatorName"></span>
</span>
</div>
<span id="lastRefresh">{{ t('chat.updated', time=t('common.never')) }}</span>
<span id="lastRefresh" class="text-nowrap">{{ t('chat.updated', time=t('common.never')) }}</span>
</div>
</div>
</div>
+5
View File
@@ -16,6 +16,11 @@ For deep technical notes, see [architecture.md](architecture.md). For the full g
- **You can add a language yourself, without waiting for a release.** A language is a single file. Copy `en.json` from `app/translations/`, translate the values, and drop it into a `translations` folder inside your config directory — the same place the database lives. Refresh the page and it appears in the Language list, named however you named it, with no rebuild and no restart. Anything you leave untranslated falls back to English, so a half-finished translation is perfectly usable. A file you drop in also overrides one that ships with the app, so you can correct the built-in Polish on your own server. English and Polish ship in the box; everything else is open to whoever wants to write it. See [translations.md](translations.md), which explains the format and — importantly — which words to leave alone: mesh terms like flood, hop, advert, RSSI and the repeater roles stay English in every language, because that is what the firmware, the CLI and the forums all use. The Console and the log lines themselves stay English for the same reason.
- **Times and dates behave the same in every language.** Only the words are translated — "Yesterday" becomes "Wczoraj", "5 min ago" becomes "5 min temu". The clock and the number formatting keep following your browser's own settings, so switching the menus to English will not suddenly turn your 24-hour clock into "9:53 AM". One display of large numbers on the repeater statistics page had been hard-coded to American thousands separators; it now follows your locale like everything else.
### Fixes
- **The Android app no longer renders text larger than the browser does.** The app is a wrapper around the same page you open in Chrome, but Android's WebView quietly scales text by your phone's system font-size setting while Chrome ignores it and uses its own. If you had enlarged the system font even one step, everything in the app came out around 20% bigger than on the website — the title truncated to "mc-web…", longer messages wrapped earlier, and the connection status and refresh time at the bottom broke across two lines each. The app now pins text at the same size the browser uses. This needs a new APK, so reinstall the app to pick it up.
- **The bar at the bottom copes with text that does not fit.** The connection status, the region badge and the "Updated:" time sat in a row that could not wrap, so when they ran out of room each one broke apart internally instead — a green dot with "Connected" stranded underneath it, a time split from its own label. They now drop onto a second line as whole items. This mostly showed up in translated interfaces, where the labels are longer than the English ones they were laid out for ("Aktualizacja:" against "Updated:"), and on narrow phones.
---
## 2.4.2 — 2026-07-31