diff --git a/extensions/odoo_theme/static/style.scss b/extensions/odoo_theme/static/style.scss index f79d8702c..249dc2500 100644 --- a/extensions/odoo_theme/static/style.scss +++ b/extensions/odoo_theme/static/style.scss @@ -378,14 +378,13 @@ header { display: none; @include media-breakpoint-up(xl) { display: block; + grid-area: toc; top: $o-headers-height; - right: 0; padding: $padding-m $padding-s $padding-m 0; overflow-y: auto; } position: -webkit-sticky; position: sticky; - width: $o-on-page-width; height: 100%; max-height: calc(100vh - #{$o-headers-height}); } @@ -423,10 +422,13 @@ header { //------------------------------------------------------------------------------ #wrap { + display: grid; + grid-template-areas: "main"; + grid-template-columns: minmax(0,100%); margin-top: $o-headers-mobile-height; @include media-breakpoint-up(lg) { - display: flex; - justify-content: space-between; + grid-template-areas: "sidebar main toc"; + grid-template-columns: minmax(0,$o-side-nav-width) minmax(0,auto) minmax(0,$o-on-page-width); margin-top: $o-headers-height; } @@ -473,22 +475,19 @@ header { main { position: relative; + grid-area: main; padding-bottom: $padding-l; @include media-breakpoint-up(lg) { - left: calc(#{$o-side-nav-width} - #{$padding-s}); - max-width: calc(100vw - #{$o-side-nav-width}); padding: $padding-m $padding-l; margin: 0; + grid-column-end: toc; } @include media-breakpoint-up(xl) { - left: $o-side-nav-width; - max-width: calc(100vw - #{$o-side-nav-width} - #{$o-on-page-width}); + grid-column-end: main; } &.o_index, &.o_fullwidth_page, &.o_has_code_column { - @include media-breakpoint-up(xl) { - max-width: calc(100vw - #{$o-side-nav-width}); - } + grid-column-end: toc; } // Homepage