# Карточка горизонтального переполнения

К статье https://keivo.ru/blog/gorizontalnaya-prokrutka-na-telefone/

URL / дата / версия:
Телефон / браузер / ориентация или ширина окна:
Когда появляется ошибка: сразу / после загрузки / после открытия меню / другое:

## Наблюдение

1. Исходное состояние:
2. Действия для воспроизведения:
3. Что двигается: отдельный блок или вся страница:
4. Что оказалось за краем:
5. Снимок или запись без приватных данных:

## Учебный пример

На странице сравнения таблица из шести столбцов расширяет всю страницу — нужно сохранить данные и ограничить прокрутку областью таблицы, основной текст должен помещаться в экран

Наблюдение подтверждено шагами — CSS-причина пока является гипотезой

## Диагностика разработчика

- Подтверждённый элемент и правило:
- Почему выбранное исправление сохраняет содержание:
- Требуется ли другое представление таблицы по решению владельца:
- Изменённые шаблоны:

## Проверка исправления

- [ ] Повторены исходные шаги на том же устройстве
- [ ] Проверены соседние ширины, поворот и меню
- [ ] Доступны первая и последняя ячейки таблицы
- [ ] Текст, кнопки и видимый фокус не обрезаны
- [ ] Проверена версия на публичном домене

Скрытие выступающего содержимого не считается исправлением, если потеряны данные или действия

## Как подтвердить область проблемы

1. Верните страницу к левому краю и воспроизведите состояние, в котором возникло смещение
2. Проверьте жест в обычном тексте и отдельно в таблице — запишите, движется документ или локальный блок
3. Дождитесь изображений и встроенных элементов — ошибка может появляться после их загрузки
4. Сохраните URL, ширину, браузер, ориентацию и шаги

## Разбор для разработчика

В Console можно прочитать размеры документа

```js
({
  available: document.documentElement.clientWidth,
  content: document.documentElement.scrollWidth
})
```

Учебный результат `available:360,content:640` показывает, что содержимое шире доступной области — он не называет CSS-причину

Затем выберите подозрительный элемент на панели Elements, проверьте действующие width/min-width/отступы/переносы — временно измените одно правило и снова измерьте документ

Не подтверждайте диагноз только скрытием всего блока — вместе с симптомом при этом исчезает само содержимое

## Заполненный учебный разбор

Объект: таблица из шести столбцов внутри flex-колонки материала
Состояние: вертикальная узкая подача 360, все изображения загружены
Наблюдение: основной текст двигается вместе со всей страницей, документ требует 640 пикселей
Гипотеза: таблица и автоматическая минимальная ширина колонки не дают родителю сжаться
Проверка: отдельно исследованы таблица, обёртка и flex-элемент — после изменения минимальной ширины колонки и локальной прокрутки таблицы документ помещается в 360, сама таблица остаётся широкой
Требуемое содержание: все шесть столбцов и подписи должны сохраниться

В своей работе приложите фактические размеры до/после и указание подтверждённого правила — учебные 640/360 не переносятся в чужой отчёт как измерения

## Матрица повторного прохода

| Условие | Действие | Результат / доказательство |
|---|---|---|
| Исходное устройство | Повторить появление ошибки | |
| Соседняя узкая ширина | Дочитать текст, дойти до последней ячейки | |
| Открытое меню | Открыть, перейти, закрыть | |
| Поворот и возврат | Дождаться перестроения | |
| Клавиатура | Добраться до прокручиваемого блока и его конца | |
| Другой адрес общего компонента | Повторить сценарий | |

Если вместо локальной прокрутки требуется другое представление таблицы, зафиксируйте это как отдельное согласованное решение — не удаляйте столбцы ради отсутствия полосы