From be8d1967340038064cd9717938a2d4e68d4a026e Mon Sep 17 00:00:00 2001
From: root <root@alpnaxnwas.local>
Date: Thu, 20 Aug 2026 17:58:30 +0000
Subject: [PATCH] Fix mobile frame: tabbar inside frame, button visible, proper
 layout

---
 public/css/app.css | 37 ++++++++++++++++++++++++-------------
 public/index.html  | 38 +++++++++++++++++++-------------------
 2 files changed, 43 insertions(+), 32 deletions(-)

diff --git a/public/css/app.css b/public/css/app.css
index 5ee392e..646ee70 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -42,18 +42,21 @@ body {
   overflow-y: auto;
   overflow-x: hidden;
   -webkit-overflow-scrolling: touch;
+  flex: 1;
+}
+
+body.mobile-mode #app {
+  height: auto;
+  min-height: 0;
 }
 
 #tabbar {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: calc(60px + env(safe-area-inset-bottom));
+  height: 60px;
   padding-bottom: env(safe-area-inset-bottom);
   background: var(--bg-elev);
   border-top: 1px solid var(--border);
   display: flex;
+  flex-shrink: 0;
   z-index: 100;
 }
 .tab {
@@ -242,40 +245,48 @@ label { font-size: 13px; color: var(--text-dim); margin-bottom: 4px; display: bl
 
 /* Mobile emulator — на десктопе показываем как на мобиле */
 body.mobile-mode {
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  min-height: 100vh;
   background: #1a1a1f;
+  padding: 16px;
 }
 
 body.mobile-mode #mobile-frame {
   width: 390px;
   max-width: 100vw;
-  height: 100vh;
+  height: calc(100vh - 32px);
+  margin: 0 auto;
   background: var(--bg);
-  position: relative;
+  border-radius: 16px;
   overflow: hidden;
   box-shadow: 0 0 40px rgba(0,0,0,0.4);
   display: flex;
   flex-direction: column;
+  position: relative;
 }
 
 body.mobile-mode #app {
-  height: calc(100vh - 60px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
   flex: 1;
+  height: auto;
+  overflow-y: auto;
 }
 
 body.mobile-mode #tabbar {
   position: relative;
   width: 390px;
   max-width: 100vw;
+  margin: 0 auto;
+  border-radius: 0 0 16px 16px;
 }
 
 @media (max-width: 600px) {
-  body.mobile-mode #mobile-frame,
+  body.mobile-mode { padding: 0; }
+  body.mobile-mode #mobile-frame {
+    width: 100vw;
+    height: 100vh;
+    border-radius: 0;
+  }
   body.mobile-mode #tabbar {
     width: 100vw;
+    border-radius: 0;
   }
 }
 
diff --git a/public/index.html b/public/index.html
index 5d87eaf..82f72a1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -14,26 +14,26 @@
   <button id="mode-toggle" title="Переключить режим">📱 Мобильный</button>
   <div id="mobile-frame">
     <div id="app"></div>
+    <nav id="tabbar">
+      <button class="tab" data-view="map">
+        <svg viewBox="0 0 24 24" width="24" height="24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>
+        <span>Карта</span>
+      </button>
+      <button class="tab" data-view="chats">
+        <svg viewBox="0 0 24 24" width="24" height="24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>
+        <span>Чаты</span>
+        <span class="badge" id="chats-badge" hidden></span>
+      </button>
+      <button class="tab" data-view="profile">
+        <svg viewBox="0 0 24 24" width="24" height="24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+        <span>Профиль</span>
+      </button>
+      <button class="tab" data-view="settings">
+        <svg viewBox="0 0 24 24" width="24" height="24"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 0 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6A3.6 3.6 0 1 1 12 8.4a3.6 3.6 0 0 1 0 7.2z"/></svg>
+        <span>Настройки</span>
+      </button>
+    </nav>
   </div>
-  <nav id="tabbar">
-    <button class="tab" data-view="map">
-      <svg viewBox="0 0 24 24" width="24" height="24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 0 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>
-      <span>Карта</span>
-    </button>
-    <button class="tab" data-view="chats">
-      <svg viewBox="0 0 24 24" width="24" height="24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>
-      <span>Чаты</span>
-      <span class="badge" id="chats-badge" hidden></span>
-    </button>
-    <button class="tab" data-view="profile">
-      <svg viewBox="0 0 24 24" width="24" height="24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
-      <span>Профиль</span>
-    </button>
-    <button class="tab" data-view="settings">
-      <svg viewBox="0 0 24 24" width="24" height="24"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 0 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6A3.6 3.6 0 1 1 12 8.4a3.6 3.6 0 0 1 0 7.2z"/></svg>
-      <span>Настройки</span>
-    </button>
-  </nav>
   <script src="/js/tg.js"></script>
   <script src="/js/api.js"></script>
   <script src="/js/views/map.js"></script>