# Инструкция по деплою исправлений скроллинга ссылок

## Исправления внесены в следующие файлы:

### 1. frontend/linktree-frontend/src/app/components/ExpandableGroup.tsx
- Исправлены стили компонента для корректного отображения как кнопки
- Добавлен класс `btn btn-outline-primary btn-sm` 
- Изменены размеры иконок и текста
- Заменены h6 и p теги на span для корректного отображения в кнопке

### 2. frontend/linktree-frontend/src/app/components/ExpandableGroup.module.css
- Обновлены размеры иконок с 40px на 20px
- Изменены отступы и стили для компактного отображения
- Добавлены стили для кнопочного представления
- Убран border и фон, чтобы использовать Bootstrap стили

### 3. frontend/linktree-frontend/src/app/[username]/page.tsx
- Заменены все `group.links.slice(0, 5).map()` на `ExpandableGroup`
- Обновлены макеты:
  - `renderGridLayout()` - использует ExpandableGroup
  - `renderCardsLayout()` - использует ExpandableGroup  
  - `renderCompactLayout()` - использует ExpandableGroup
  - `renderSidebarLayout()` - использует ExpandableGroup
  - `renderMasonryLayout()` - уже использовал ExpandableGroup
  - `renderMagazineLayout()` - уже использовал ExpandableGroup
  - `renderTestListLayout()` - уже реализован

## Команды для деплоя на сервере:

```bash
# 1. Обновить код
cd /var/www/links
git pull origin master

# 2. Пересобрать фронтенд
cd frontend/linktree-frontend
npm run build

# 3. Перезапустить контейнеры
cd /var/www/links
docker-compose down
docker-compose up -d
```

## Результат:
Теперь во всех макетах групп ссылок:
- Отображается максимум 5-10 ссылок по умолчанию (зависит от макета)
- Есть кнопка "Показать еще X ссылок" если ссылок больше лимита
- Кнопка "Скрыть (X ссылок)" для сворачивания списка
- Иконки ссылок корректно отображаются во всех макетах
- Сохранены все стили дизайна

## Исправленные проблемы:
✅ Скроллинг ссылок внутри группы
✅ Отображение иконок во всех макетах  
✅ Единообразное поведение во всех layout'ах
✅ Адаптивность и красивый дизайн кнопок расширения