Planungen android

frontend/src/components/AppHeader.vue

@@ -515,25 +515,60 @@ export default {
 }
 
 @media (max-width: 640px) {
+  .app-header {
+    padding: 4px 8px;
+  }
+
   .app-header__inner {
-    align-items: flex-start;
+    align-items: center;
+    gap: 8px;
   }
 
   .brand {
-    width: 100%;
+    flex: 1 1 auto;
+    width: auto;
+  }
+
+  .logo {
+    width: 34px;
+    height: 34px;
+    border-radius: 10px;
+  }
+
+  .brand-copy strong {
+    font-size: 0.94rem;
+  }
+
+  .brand-copy span {
+    font-size: 0.68rem;
   }
 
   .header-meta {
+    width: 100%;
     gap: 8px;
   }
 
+  .header-lang {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .header-lang__select {
+    min-width: 8.5rem;
+  }
+
   .connection-status {
     width: 100%;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
   }
 
   .status-indicator {
-    min-height: 32px;
+    min-height: 30px;
+    justify-content: center;
+    padding: 0 8px;
+    font-size: 0.68rem;
   }
 }
 </style>