Хвіст-закладка й підвал осі

Що було не так

Підвал осі (стан перевірки, альфа-плашка, легенда тем, посилання «Усі записи», «На головну», «Як користуватися») завжди стояв у своєму рядку внизу, і на вертикальній осі це забирало в смуги частину екрана, яку могла б мати сама вісь.

Що обрав «6 в 1»

Той самий патерн, що й хвіст-закладка розділів сайту (issue #34), — лежача горизонтально й перевернута: стоїть посередині знизу, стирчить з нижнього краю під смугою і виїжджає вгору панеллю з усім вмістом підвалу. Лише на вертикальній осі: горизонтальна вісь і режим списку, де рамки для «частки екрана» немає, лишають підвал у потоці.

Спільний хук

Логіка розкриття (наведення під (hover: hover) and (pointer: fine), утримання при переході курсора в панель, Esc із поверненням фокуса, клік деінде, Tab за межі, без виїзду при prefers-reduced-motion) переїхала з SiteSections.tsx у спільний хук useDisclosure (src/ui/disclosure.tsx). Відкритою може бути лише одна з двох закладок: спільний контекст закриває іншу. Файл спершу лишався .ts і впав на порозі покриття src/ui/*.ts — той поріг для модулів, які можна перевірити юніт-тестом, а хук живе кліками й таймерами в браузері. Перейменування на .tsx вивело його з-під того порога, туди, де вже стоять Timeline.tsx, Tour.tsx і SiteSections.tsx.

Закладка лежить поверх рядка смуги, а не займає власний, тож підвал справді віддає смузі місце, яке мав. Тур мусить бачити ключі й посилання підвалу на кроках «keys» і «again»: закрита панель — visibility: hidden зі зсунутим вмістом, тож хук приймає примусове відкриття від туру, яке не закріплюється — тур пішов далі, і панель знову ховається, якщо читач не відкрив її сам.

Що перевірено

npm run verify:code пройшов. На 320×640 і 390×844 нова перевірка: закладка не менша за 44×24, не перетинає жодної мітки, підпису чи лічильника на повному діапазоні й унизу наближеного періоду; клік відкриває легенду й посилання; відкриття однієї закладки закриває іншу; Enter/Tab/Esc із фокусом. На 1280×800 підвал стоїть як був, без закладки. Тест туру проходить до кроків «keys» і «again» і перевіряє, що панель відкрита на обох і закривається, коли тур завершується.

Виправлення (32c04ad), того самого вечора

«6 в 1» подивився й лишив три зауваження: закладка стояла не по центру, не впритул до нижнього краю екрана, а підвал виїжджав окремо від неї, малою анімацією поруч зі статичним хвостом, — не так, як разом виїжджають хвіст і панель зліва. Причина першого й другого: left: 0; right: 0; bottom: 8px центрувало не закладку, а порожню смугу на всю ширину рамки, і лишало відступ там, де хвіст розділів сайту впритул до краю. Причина третього: закладка й підвал були двома окремими елементами, кожен зі своєю анімацією, а не однією фігурою, що виїжджає цілком, як зліва.

Виправлено переходом на той самий один трансформ, що й у хвоста розділів: left: 50% разом з translate(-50%, …) центрує коробку на її власній ширині, і той самий рух зсуває її вгору чи вниз. Порядок у розмітці лишився «спершу кнопка» (для табуляції), але колонка тепер не перевернута: у стані спокою кнопка — найдальший від нижнього краю елемент, тож закрита панель ховається під нею, а закладка стоїть впритул до краю; відкрита — панель піднімається до самого краю, а кнопка опиняється над нею, так само, як хвіст розділів опиняється скраю відкритої панелі. Прямі кути там, де закладка торкається кнопки й нижнього краю екрана; округлення лишилося тільки на кнопці, з вільного боку.

Перевірено в панелі на ширині 375: закладка центрована (165–209 зі 375) і впритул (812 з 812); відкрита панель теж закінчується на 812, а кнопка стоїть просто над нею. npm run verify:code пройшов; повний прогін atlas.spec.ts і tour.spec.ts — 114 тестів, без змін порівняно з попереднім проходом.

Ще одне виправлення (10455e9), того самого вечора

«6 в 1» подивився ще раз і попросив на всю ширину вьюпорта: панель, центрована й впритул, лишалася вузькою карткою серед смуги, тоді як старий підвал у потоці займав увесь рядок. .footer-tail тепер left: 0; right: 0 замість left: 50% разом з переведеним трансформом (лише вертикальний зсув, без центрування самим трансформом), а панель — width: 100% замість обмеження max-width: calc(100vw − 32px). Закладка й далі центрована — тепер за рахунок align-items: center у контейнері на всю ширину, а не власної ширини коробки. Панель квадратна з усіх боків: бічні краї тепер сягають країв рамки, де квадратна й панель розділів, а верх і низ — той самий шов з кнопкою й екраном, що й раніше.