Виправлення UI/UX багів (React, Tailwind, Framer Motion)

Замовник: AI | Опубліковано: 07.03.2026

Сині назви розділів у шапці (Мобільна версія) Проблема: У мобільній версії назви розділів у шапці відображаються синім кольором замість білого. Контекст: Ймовірно, колір перебивається дефолтними стилями браузера для посилань (a:visited/link) або конфліктом кастомних класів з Tailwind. Проблема з плавучою кнопкою (Мобільна версія) Проблема: Плавуча кнопка (окрас/прозрачність) у мобільній версії відображається некоректно. Важливий контекст: Кнопка реалізована з використанням framer-motion (анімований компонент). Потрібно обережно полагодити її відображення (відновити коректний glassmorphism та прозорість), не зламавши при цьому саму фізику/анімацію компонента. Погана читабельність назв розділів у шапці (Широка версія) Проблема: У момент виділенням таблеткою на назву розділу в навігаційній шапці (AnimatedTabs) накладається світлий ефект/фон (від плавучої "таблетки" framer-motion або самого фону). Через це білий текст частково перекривається і стає нечитабельним. Очікування: Пофіксити шарування (z-index, mix-blend-mode або прозорість фону), щоб білий текст назв завжди був зверху активної "плашки" і чітко читався. Зникнення шапки при відкритті правої панелі (Мобільна версія) Проблема: У мобільній версії при відкриванні правої бічної панелі (спливаюче вікно з деталями) зникає шапка додатку при скролі. Важливий контекст: Шапка стилізована якposition: sticky. Однак відкриття панелі загорнуте вframer-motion анімацію. Анімаційні трансформації (transform: translate) ламають поведінкуsticky для дочірніх елементів у CSS. Необхідно розв’язати цей конфлікт (наприклад, переробити архітектуру скрол-контейнера).