logboard/SCROLL_FIX_SUMMARY.md

Исправление проблемы со скроллом в Multi View режиме

Проблема

В режиме Multi View со свернутым sidebar не работал скролл в логах контейнеров. Проблема была связана с неправильными CSS стилями, которые не учитывали правильную высоту и overflow для multi-view логов в свернутом состоянии sidebar.

Причина

Основные причины проблемы:

1. Неправильная высота multi-view-log: В свернутом состоянии sidebar элементы .multi-view-log получали неправильную высоту calc(100vh - var(--header-height)) вместо 100%
2. Отсутствие flex-свойств: Элементы не имели правильных flex-свойств для корректного распределения пространства
3. Неправильный overflow: Контейнеры .multi-view-content не имели правильных настроек overflow

Исправления

1. CSS стили для свернутого sidebar

Добавлены дополнительные CSS правила для правильного отображения multi-view в свернутом состоянии:

/* Исправляем скролл для multi-view в свернутом состоянии */
.sidebar.collapsed ~ .main-content .multi-view-content {
  height: calc(100vh - var(--header-height) - 60px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.sidebar.collapsed ~ .main-content .multi-view-log {
  height: 100% !important;
  overflow: auto !important;
  display: block !important;
  max-height: none !important;
  min-height: 200px !important;
  position: relative !important;
  flex: 1 !important;
  min-height: 0 !important;
}

2. Новая функция forceFixMultiViewStyles()

Добавлена новая функция для принудительного исправления стилей multi-view логов:

function forceFixMultiViewStyles() {
  const multiViewLogs = document.querySelectorAll('.multi-view-log');
  
  multiViewLogs.forEach((log, index) => {
    // Принудительно устанавливаем все необходимые стили
    log.style.setProperty('height', '100%', 'important');
    log.style.setProperty('overflow', 'auto', 'important');
    log.style.setProperty('max-height', 'none', 'important');
    log.style.setProperty('display', 'block', 'important');
    log.style.setProperty('min-height', '200px', 'important');
    log.style.setProperty('position', 'relative', 'important');
    log.style.setProperty('flex', '1', 'important');
    log.style.setProperty('min-height', '0', 'important');
    
    // Принудительно вызываем пересчет layout
    log.style.setProperty('transform', 'translateZ(0)', 'important');
    
    // Дополнительно устанавливаем inline стили для максимальной надежности
    log.setAttribute('style', log.getAttribute('style') + '; height: 100% !important; overflow: auto !important; flex: 1 !important; min-height: 0 !important;');
  });
}

3. Обновление функции updateLogStyles()

Исправлена функция updateLogStyles() для правильного применения стилей:

• Использует setProperty() с флагом important для принудительного применения стилей
• Вызывает forceFixMultiViewStyles() для дополнительной надежности
• Принудительно вызывается пересчет layout с помощью transform: translateZ(0)

4. Улучшение функции toggleSidebar()

Добавлена дополнительная проверка для multi-view логов при переключении sidebar:

// Дополнительная проверка для multi-view логов
if (state.multiViewMode) {
  console.log('Sidebar toggle: Force fixing multi-view styles');
  forceFixMultiViewStyles();
}

5. Обновление функции setupMultiView()

Добавлена принудительная проверка стилей при создании multi-view:

// Принудительно обновляем стили логов для multi-view
setTimeout(() => {
  updateLogStyles();
  
  // Дополнительная проверка для multi-view логов
  console.log('setupMultiView: Force fixing multi-view styles');
  forceFixMultiViewStyles();
}, 200);

6. Инициализация при загрузке страницы

Добавлена дополнительная проверка при инициализации:

// Дополнительная проверка для multi-view логов при загрузке
setTimeout(() => {
  if (state.multiViewMode) {
    console.log('Initialization: Force fixing multi-view styles');
    forceFixMultiViewStyles();
  }
}, 1000);

7. Периодическая проверка и обработчики событий

Добавлены дополнительные механизмы для обеспечения правильной работы:

• Периодическая проверка: Каждые 5 секунд проверяются и исправляются стили multi-view логов
• Обработчик изменения размера окна: При изменении размера браузера автоматически исправляются стили
• Глобальные функции: Добавлены функции forceFixMultiViewStyles() и updateLogStyles() в глобальную область для ручного вызова из консоли

Результат

После применения исправлений:

1. ✅ Скролл работает корректно в Multi View режиме со свернутым sidebar
2. ✅ Логи контейнеров отображаются в правильной высоте
3. ✅ Переключение sidebar не нарушает функциональность скролла
4. ✅ Автопрокрутка работает корректно
5. ✅ Стили применяются правильно при всех сценариях использования

Тестирование

Для проверки исправлений:

1. Включите Multi View режим (выберите несколько контейнеров)
2. Сверните sidebar (Ctrl+B или кнопка)
3. Убедитесь, что скролл работает в каждом контейнере
4. Проверьте автопрокрутку при поступлении новых логов
5. Разверните sidebar и убедитесь, что скролл продолжает работать

Ручное исправление (если проблема все еще возникает)

Если скролл все еще не работает в некоторых окнах, можно вручную исправить стили:

1. Откройте консоль браузера (F12)
2. Выполните команду: forceFixMultiViewStyles()
3. Или выполните команду: updateLogStyles()
4. Для всех контейнеров: fixAllContainers()
5. Для обратной совместимости: fixProblematicContainers() (перенаправляет на fixAllContainers())

Эти функции принудительно исправят стили всех multi-view логов на странице.

Универсальное исправление для всех контейнеров

Вместо специальной обработки только для проблемных контейнеров, теперь применяется универсальное решение:

• Универсальные CSS правила для всех multi-view логов (с более специфичными селекторами)
• Единообразное исправление стилей для всех контейнеров
• Проверка родительских элементов для всех контейнеров
• Автоматическое исправление в периодических проверках и при изменении размера окна
• Защита от влияния на другие элементы - все селекторы теперь специфичны для .multi-view-content .multi-view-log

Исправление проблемы с wrap text

Проблема с wrap text была решена путем:

• Более специфичных селекторов - изменил .log на .main-content .log в функции applyWrapSettings()
• Добавления вызовов applyWrapSettings() в ключевых местах:
  • После обновления логов (refreshLogsAndCounters())
  • После исправления стилей (forceFixMultiViewStyles())
  • После исправления всех контейнеров (fixAllContainers())
  • После переключения контейнеров (switchToSingle())
  • После открытия мульти-контейнеров (openMulti())
• Сохранения существующих вызовов в setupMultiView() и других местах

Автор

Сергей Антропов Сайт: https://devops.org.ru