Complete 3.3.1: Mobile Layout Optimization - Implemented mobile-first redesign with touch-friendly navigation and responsive chat overlay behavior.

This commit is contained in:
Vincent 2025-09-29 21:02:33 -04:00
parent 9e8dea7662
commit 68b97e946b
3 changed files with 73 additions and 15 deletions

View file

@ -51,16 +51,27 @@
if (!chatSection || !videoSection || !toggleBtn) return;
const isMobile = window.innerWidth <= AppConfig.ui.mobileBreakpoint;
AppState.chatCollapsed = !AppState.chatCollapsed;
if (AppState.chatCollapsed) {
chatSection.classList.add('collapsed');
videoSection.classList.add('expanded');
toggleBtn.textContent = 'Show Chat';
if (isMobile) {
chatSection.classList.remove('mobile-visible');
toggleBtn.textContent = 'Show Chat';
} else {
chatSection.classList.add('collapsed');
videoSection.classList.add('expanded');
toggleBtn.textContent = 'Show Chat';
}
} else {
chatSection.classList.remove('collapsed');
videoSection.classList.remove('expanded');
toggleBtn.textContent = 'Hide Chat';
if (isMobile) {
chatSection.classList.add('mobile-visible');
toggleBtn.textContent = 'Hide Chat';
} else {
chatSection.classList.remove('collapsed');
videoSection.classList.remove('expanded');
toggleBtn.textContent = 'Hide Chat';
}
// Clear unread count when reopening
AppState.unreadCount = 0;
updateNotificationBadge();