Fix mobile frame: tabbar inside frame, button visible, proper layout

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;
+  height: 60px;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: calc(60px + env(safe-area-inset-bottom));
   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;
   }
 }
 

public/index.html

@@ -14,7 +14,6 @@
   <button id="mode-toggle" title="Переключить режим">📱 Мобильный</button>
   <div id="mobile-frame">
     <div id="app"></div>
-  </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>
@@ -34,6 +33,7 @@
         <span>Настройки</span>
       </button>
     </nav>
+  </div>
   <script src="/js/tg.js"></script>
   <script src="/js/api.js"></script>
   <script src="/js/views/map.js"></script>