From 34927e3f52fab69383503f88ce0f010edabc7043 Mon Sep 17 00:00:00 2001
From: 4aiman <konsorumaniakku@ya.ru>
Date: Mon, 7 Sep 2026 17:15:19 +0300
Subject: [PATCH] rec screen: status-bar backdrop so the system bar stays
 visible over the map
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The recording map is edge-to-edge and drew behind the system status bar,
leaving its icons unreadable over the tiles (the map controls were already
offset by --safe-area-top, so the design intended a visible bar). Paint a
solid strip the height of the top inset behind the bar — like the header on
every other screen. Disabled in the rotated landscape modes.
---
 .../2026-09-07_rec-statusbar-backdrop.md      | 24 +++++++++++++++++++
 frontend/css/styles.css                       | 15 ++++++++++++
 2 files changed, 39 insertions(+)
 create mode 100644 docs/session-logs/2026-09-07_rec-statusbar-backdrop.md

diff --git a/docs/session-logs/2026-09-07_rec-statusbar-backdrop.md b/docs/session-logs/2026-09-07_rec-statusbar-backdrop.md
new file mode 100644
index 0000000..b075fa4
--- /dev/null
+++ b/docs/session-logs/2026-09-07_rec-statusbar-backdrop.md
@@ -0,0 +1,24 @@
+# Сессия 2026-09-07: статус-бар на экране записи
+
+## Проблема
+При включённом трекинге не видно системный статус-бар. Пользователь: перекрывают его только
+карты, остальное приложение ведёт себя нормально. Просьба — сделать бар видимым (не рисовать свой
+индикатор батареи).
+
+## Причина
+Карта на экране записи (`.rec-map-wrap`/`.rec-map`) рисуется edge-to-edge и заходит под системный
+статус-бар. Контролы карты (компас, зум-кнопки leaflet) уже сдвинуты вниз на `--safe-area-top`
+(строки 1155, 1161 styles.css) — то есть дизайн задумывался с видимым статус-баром, но у самого бара
+нет подложки: иконки теряются на тайлах карты. На остальных экранах подложку даёт «шапка»
+(`padding-top: calc(... + var(--safe-area-top)); background: var(--surface)`).
+
+## Решение (только CSS, без сдвига координат карты)
+Псевдоэлемент `.rec-map-wrap::before` — сплошная полоса высотой `var(--safe-area-top)` цвета
+`var(--surface)`, `z-index:1100`, `pointer-events:none`. Даёт статус-бару подложку как «шапка».
+Контролы карты уже начинаются ниже полосы, наложения нет. В ландшафте (rot-90/270) полоса отключена
+(`display:none`) — там карта повёрнута и инсет физически в другом месте.
+
+`--safe-area-top` ставится из нативных инсетов (main.js:189, get_safe_insets), на устройстве ненулевой.
+
+## Файлы
+- frontend/css/styles.css — `.rec-map-wrap::before` + отключение в rot-90/270.
diff --git a/frontend/css/styles.css b/frontend/css/styles.css
index 14faeec..ff48d88 100644
--- a/frontend/css/styles.css
+++ b/frontend/css/styles.css
@@ -1159,6 +1159,21 @@ select {
 }
 /* Keep Leaflet zoom controls below the status bar on the recording map. */
 .rec-map-wrap .leaflet-top { margin-top: var(--safe-area-top, 0px); }
+/* Status-bar backdrop. The recording map is edge-to-edge (draws behind the system
+   status bar), so the bar had no backing and its icons were unreadable over the map
+   tiles. Paint a solid strip the height of the top inset — like the header on every
+   other screen — so the status bar stays visible. Controls already start below it. */
+.rec-map-wrap::before {
+  content: "";
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: var(--safe-area-top, 0px);
+  background: var(--surface);
+  z-index: 1100;
+  pointer-events: none;
+}
+.rec-screen.rot-90 .rec-map-wrap::before,
+.rec-screen.rot-270 .rec-map-wrap::before { display: none; }
 .rec-compass-arrow { position: absolute; inset: 0; transition: transform 0.12s linear; }
 .rec-compass-arrow::before {
   content: "N"; position: absolute; top: 1px; left: 50%; transform: translateX(-50%);