mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-30 10:27:49 +00:00
fix(ui): фиксированная ширина 100vw — страницы не сдвигаются при появлении скроллбара
This commit is contained in:
@@ -190,7 +190,11 @@ export function AppShell({ children }: AppShellProps) {
|
|||||||
<PromptDialogHost />
|
<PromptDialogHost />
|
||||||
|
|
||||||
{/* Desktop Header */}
|
{/* 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 держат
|
{/* 3-зонный grid: лого | капсула | действия. Колонки 1fr_auto_1fr держат
|
||||||
капсулу строго по центру вьюпорта НЕЗАВИСИМО от ширины лого/действий,
|
капсулу строго по центру вьюпорта НЕЗАВИСИМО от ширины лого/действий,
|
||||||
а действия — у правого края. Поэтому ничего не «скачет» при переходах
|
а действия — у правого края. Поэтому ничего не «скачет» при переходах
|
||||||
|
|||||||
@@ -235,6 +235,17 @@
|
|||||||
scrollbar-color: rgb(var(--color-dark-700)) transparent;
|
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) */
|
/* Hide scrollbar on mobile (iOS/Android) */
|
||||||
@media (max-width: 1023px) {
|
@media (max-width: 1023px) {
|
||||||
html,
|
html,
|
||||||
|
|||||||
Reference in New Issue
Block a user