//Вывод табов всех чатов на экран
function createTabsForAllChats() {
    // Очищаем существующие табы перед добавлением новых
    const parent = document.getElementById('tabs');
    parent.innerHTML = '';
    // Проходим по каждому ID и создаем таб
    chatIds.forEach((chatId, index) => {
        // Загружаем историю чата для текущего ID
        const storedChat = localStorage.getItem(`chatHistory_${chatId}`);
        if (storedChat) {
            const dialogData = JSON.parse(storedChat);
			
			// Получаем значение title из загруженных данных
            let tabName = 'Новый чат'; // Значение по умолчанию
            if (dialogData.title) {
                tabName = escapeHtml(dialogData.title); // Получаем значение title
            }
			
            // Определяем класс для таба (активный или обычный)
            const tabClass = chatId === currentChatId ? 'tab active' : 'tab';
			
            // Создаем таб
            parent.insertAdjacentHTML("beforeEnd", `
                <div data-v-927731f4="" class="${tabClass}" id="${chatId}" title="${tabName}">
                    <div data-v-927731f4="" class="name">${tabName}</div>
					<span data-v-927731f4="" class="edit" title="Переименовать чат">
                        ✏️️
                    </span>
                    <span data-v-927731f4="" class="remove"  title="Удалить чат">
                        <svg data-v-927731f4="" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" class="h-5 w-5 shrink-0">
                            <path data-v-927731f4="" fill="currentColor" fill-rule="evenodd" d="M10.556 4a1 1 0 0 0-.97.751l-.292 1.14h5.421l-.293-1.14A1 1 0 0 0 13.453 4zm6.224 1.892-.421-1.639A3 3 0 0 0 13.453 2h-2.897A3 3 0 0 0 7.65 4.253l-.421 1.639H4a1 1 0 1 0 0 2h.1l1.215 11.425A3 3 0 0 0 8.3 22H15.7a3 3 0 0 0 2.984-2.683l1.214-11.425H20a1 1 0 1 0 0-2zm1.108 2H6.112l1.192 11.214A1 1 0 0 0 8.3 20H15.7a1 1 0 0 0 .995-.894zM10 10a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0v-5a1 1 0 0 1 1-1m4 0a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0v-5a1 1 0 0 1 1-1" clip-rule="evenodd"></path>
                        </svg>
                    </span>
                </div>
            `);
			
			// Если это активный таб, сохраняем его элемент
            if (tabClass.includes('active')) {
                activeTabElement = parent.lastElementChild; 
            }
        }
    });
	
	// Прокручиваем контейнер к активному табу, если он существует
    if (activeTabElement) {
        activeTabElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }
}

.tabsMenu .tabs .tab[data-v-927731f4] {
    padding: 7px;
    border-radius: 5px;
    margin: 3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.tabsMenu .tabs .tab .name[data-v-927731f4] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.tabsMenu .tabs .tab .edit[data-v-927731f4] {
    color: #c43c3a;
    opacity: 0;
    padding-left: 10px;
}

.tabsMenu .tabs .tab .remove[data-v-927731f4] {
    color: #c43c3a;
    opacity: 0;
    padding-left: 10px;
}

Проблема в том, что названия таба выводятся не до конца таба, оно обрезается когда будет достигнута первая кнопка. В результате, когда курсор не наведен на таб кнопки скрыты и в табе пустое пространство вместо них. Нужно чтобы при наведении на таб кнопки скрывались с помощью visibility