- Full implementation of tab bar next to logo in mobile client

- Customisation option in Tenant Make
- Splitting all controls in the newly created tabs

eveai_chat_client/static/assets/vue-components/ChatMessage.vue

@@ -784,21 +784,32 @@ export default {
     }
 }
 
-/* Bubble height constraints and inner scroll containment (apply on all viewports) */
+/* Bubble height constraints en inner scroll containment.
+   Fallback gebruikt klassieke vh-units; de @supports-blok hieronder
+   schakelt over naar SafeViewport via var(--safe-vh) wanneer mogelijk. */
 .message .message-content {
-    max-height: 33vh; /* fallback */
-    overflow-y: auto;
-    overscroll-behavior: contain; /* prevent scroll chaining to parent */
-    -webkit-overflow-scrolling: touch; /* iOS smooth inertia */
+	max-height: 33vh; /* fallback */
+	overflow-y: auto;
+	overscroll-behavior: contain; /* prevent scroll chaining to parent */
+	-webkit-overflow-scrolling: touch; /* iOS smooth inertia */
 }
-/* Active contexts (input area or sticky area): allow up to half viewport */
+
+/* Active contexts (input area of sticky area): mogen meer hoogte innemen */
 .message.input-area .message-content,
 .message.sticky-area .message-content {
-    max-height: 50vh; /* fallback */
+	max-height: 50vh; /* fallback */
 }
+
 @supports (max-height: 1svh) {
-    .message .message-content { max-height: 33svh; }
-    .message.input-area .message-content,
-    .message.sticky-area .message-content { max-height: 50svh; }
+	.message .message-content {
+		/* Gebruik veilige viewporthoogte die door useChatViewport gezet wordt */
+		max-height: calc(var(--safe-vh, 1vh) * 33);
+	}
+
+	.message.input-area .message-content,
+	.message.sticky-area .message-content {
+		/* In de input-/sticky-area mag de bubbel ruimer zijn */
+		max-height: calc(var(--safe-vh, 1vh) * 60);
+	}
 }
 </style>