mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-28 09:33:46 +00:00
fix(ui): фиксированная ширина 100vw — страницы не сдвигаются при появлении скроллбара
This commit is contained in:
@@ -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 держат
|
||||
капсулу строго по центру вьюпорта НЕЗАВИСИМО от ширины лого/действий,
|
||||
а действия — у правого края. Поэтому ничего не «скачет» при переходах
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user