diff --git a/public/s/css/f0ckm.css b/public/s/css/f0ckm.css index 653294c..1ed1672 100644 --- a/public/s/css/f0ckm.css +++ b/public/s/css/f0ckm.css @@ -1754,47 +1754,34 @@ body.layout-modern .global-sidebar-right { body.layout-modern .item-layout-container .item-main-content { grid-column: 2; height: calc(100vh - var(--navbar-h, 50px)); - display: grid; - grid-template-rows: auto auto auto auto; - justify-items: center; - overflow: hidden; + display: flex; + flex-direction: column; + align-items: center; + overflow-x: hidden; + overflow-y: auto; padding: 20px; min-height: 0; min-width: 0; gap: 0; - overflow-y: scroll; - align-content: center; } - /* When image is expanded: flex column so metadata stays below the image */ - body.layout-modern .item-layout-container .item-main-content:has(.embed-responsive.is-expanded) { - display: flex; - flex-direction: column; - align-items: center; + /* Flex spacers: absorb remaining space to vertically center content when it fits, + collapse to 0 when content overflows — so scrolling works naturally. */ + body.layout-modern .item-layout-container .item-main-content::before, + body.layout-modern .item-layout-container .item-main-content::after { + content: ''; + flex: 1 0 0px; } - /* flex-shrink: 0 prevents children from compressing to fit the fixed-height container. - align-self: center overrides the grid-mode "align-self: start" rules — in flex-column - "start" means left, not top, so we explicitly center instead. */ - body.layout-modern .item-layout-container .item-main-content:has(.embed-responsive.is-expanded) > * { + /* All direct children must not shrink so they keep their natural size and + the container scrolls instead of compressing children. */ + body.layout-modern .item-layout-container .item-main-content > * { flex-shrink: 0; - align-self: center; - } - - body.layout-modern .item-layout-container .item-main-content ._204863 { - align-self: start; - } - - body.layout-modern .item-layout-container .item-main-content .item_title { - align-self: start; - } - - body.layout-modern .item-layout-container .item-main-content .content { - align-self: start; + width: 100%; + max-width: 1100px; } body.layout-modern .item-layout-container .item-main-content .metadata { - align-self: start; overflow: visible; }