fix(ui): фиксированная ширина 100vw — страницы не сдвигаются при появлении скроллбара

This commit is contained in:
kewldan
2026-07-13 01:46:22 +03:00
parent 758a645dff
commit b40f939e91
2 changed files with 16 additions and 1 deletions

View File

@@ -190,7 +190,11 @@ export function AppShell({ children }: AppShellProps) {
<PromptDialogHost />
{/* Desktop Header */}
<header className="fixed left-0 right-0 top-0 z-50 hidden border-b border-dark-800/50 bg-dark-950/95 lg:block">
{/* w-screen вместо left-0 right-0: right-0 упирается в край вьюпорта БЕЗ
скроллбара, и капсула по центру прыгала бы на полширины скроллбара при
переходах между страницами со скроллом и без. 100vw даёт ту же ось
центрирования, что и у body (тоже 100vw). */}
<header className="fixed left-0 top-0 z-50 hidden w-screen border-b border-dark-800/50 bg-dark-950/95 lg:block">
{/* 3-зонный grid: лого | капсула | действия. Колонки 1fr_auto_1fr держат
капсулу строго по центру вьюпорта НЕЗАВИСИМО от ширины лого/действий,
а действия — у правого края. Поэтому ничего не «скачет» при переходах

View File

@@ -235,6 +235,17 @@
scrollbar-color: rgb(var(--color-dark-700)) transparent;
}
body {
/* 100vw включает ширину скроллбара, поэтому центрированный контент не
сдвигается, когда при навигации появляется/исчезает вертикальный
скроллбар; лишние ~6px справа уходят под скроллбар и срезаются
overflow-x: hidden на html. Вариант со scrollbar-gutter: stable не
подошёл: фоновый слой (fixed-портал) не красит зарезервированный жёлоб,
и справа остаётся пустая полоса. На мобильных overlay-скроллбары места
не занимают — правило ни на что не влияет. */
width: 100vw;
}
/* Hide scrollbar on mobile (iOS/Android) */
@media (max-width: 1023px) {
html,