From f16e24ba1177e7a6750a3138e59fa9e80f505617 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=90=D0=BD=D1=82=D0=BE=D0=BD=20=D0=A2=D1=80=D0=BE=D1=88?=
 =?UTF-8?q?=D0=B8=D0=BD?= <i@atroshin.ru>
Date: Sat, 12 Sep 2026 20:03:03 +0300
Subject: [PATCH] ui: enlarge the header sim/nosim icon to 30px

- the SVG artwork occupies only ~46% x 63% of its 183x183 canvas, so
  the 18px render showed ~8x11px of ink; 30px roughly doubles the
  visible glyph while staying under the 32px h1 line-height, so the
  header row height is unchanged
- guard test asserts the inline size stays within the 24-32px budget;
  SW cache v112 -> v113.
---
 frontend/index.html              | 2 +-
 frontend/sw.js                   | 2 +-
 frontend/tests/indicator.test.js | 8 ++++++++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index e7b1e48..550c8eb 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -22,7 +22,7 @@
 		<div class="flex items-center gap-4">
 			<span id="state-indicator" class="flex items-center select-none" style="cursor:default" title="Connecting...">
 				<span id="state-indicator-dot" class="text-xs text-gray-400" title="Connecting...">●</span>
-				<img id="state-indicator-img" class="hidden dark:invert" style="width:18px;height:18px" alt="" src="nosim.svg">
+				<img id="state-indicator-img" class="hidden dark:invert" style="width:30px;height:30px" alt="" src="nosim.svg">
 			</span>
 			<button id="install-btn" class="px-2 py-1 text-xs rounded border border-gray-300 dark:border-slate-600 hover:bg-gray-200 dark:hover:bg-slate-700" style="display:none">INSTALL PWA [for offline use]</button>
 			<a href="https://github.com/anttro/otaman" target="_blank" class="text-xs text-gray-400 hover:text-gray-600 dark:text-slate-500 dark:hover:text-slate-300">github</a>
diff --git a/frontend/sw.js b/frontend/sw.js
index a8648fe..ac12877 100644
--- a/frontend/sw.js
+++ b/frontend/sw.js
@@ -1,4 +1,4 @@
-const CACHE = 'otaman-v112';
+const CACHE = 'otaman-v113';
 const URLS = [
   'index.html',
   'help.html',
diff --git a/frontend/tests/indicator.test.js b/frontend/tests/indicator.test.js
index b832d4c..448b054 100644
--- a/frontend/tests/indicator.test.js
+++ b/frontend/tests/indicator.test.js
@@ -126,3 +126,11 @@ test('indicator markup carries the dot and image elements', () => {
 	assert.match(html, /id="state-indicator-dot"/);
 	assert.match(html, /id="state-indicator-img"[^>]*src="nosim\.svg"/);
 });
+
+test('indicator image stays within the 32px header row budget', () => {
+	const m = /id="state-indicator-img"[^>]*style="width:(\d+)px;height:(\d+)px"/.exec(html);
+	assert.ok(m, 'inline image size not found');
+	assert.strictEqual(m[1], m[2]);
+	const size = Number(m[1]);
+	assert.ok(size >= 24 && size <= 32, 'size ' + size + 'px would change the header height');
+});