diff --git a/less/common/App.less b/less/common/App.less index 291c3b794..7c464c518 100644 --- a/less/common/App.less +++ b/less/common/App.less @@ -2,8 +2,8 @@ position: relative !important; padding-top: var(--header-height); padding-bottom: 50px; - overflow-x: hidden; min-height: 100vh; + width: 100%; @media @phone { padding-top: var(--header-height-phone); @@ -27,13 +27,16 @@ box-shadow: 0 2px 6px var(--shadow-color); } } - .App-primaryControl, .App-titleControl, .App-backControl { + .App-primaryControl, + .App-titleControl, + .App-backControl { position: absolute !important; z-index: calc(~"var(--zindex-header) + 1"); top: 0 !important; margin: 0; - .App.affix &, .Composer & { + .App.affix &, + .Composer & { position: fixed !important; } @@ -59,15 +62,18 @@ right: 0; &.Dropdown { - .Button, .Button-caret { + .Button, + .Button-caret { display: none !important; } - .Dropdown-toggle, .Button-icon { + .Dropdown-toggle, + .Button-icon { display: block !important; } } } - .App-primaryControl, .App-backControl { + .App-primaryControl, + .App-backControl { margin: 0 !important; > .Button { @@ -90,7 +96,8 @@ text-align: center; color: var(--header-color) !important; - &, > .Button { + &, + > .Button { font-size: 16px; } > .Button { @@ -143,7 +150,7 @@ .drawerOpen & { -webkit-transform: none !important; - transform: none !important; + transform: none !important; } } .drawer-backdrop { @@ -200,12 +207,15 @@ > li { padding: 0 10px 0; } - .FormControl, .ButtonGroup, .Button { + .FormControl, + .ButtonGroup, + .Button { width: 100%; text-align: left; } .Dropdown-menu { - .ButtonGroup, .Button { + .ButtonGroup, + .Button { width: auto; } } @@ -221,7 +231,7 @@ @media @phone { .App-drawer { & when (@config-colored-header = true) { - .light-contents(@name: 'header-colored'); + .light-contents(@name: "header-colored"); } } } @@ -245,7 +255,7 @@ } & when (@config-colored-header = true) { - .light-contents(@name: 'header-colored'); + .light-contents(@name: "header-colored"); } } @@ -254,7 +264,8 @@ margin-right: 25px; } .Header-controls { - &, > li { + &, + > li { display: inline-block; vertical-align: middle; } diff --git a/less/common/scaffolding.less b/less/common/scaffolding.less index 48280dae6..639b18bd9 100644 --- a/less/common/scaffolding.less +++ b/less/common/scaffolding.less @@ -13,6 +13,7 @@ body { font-size: 13px; line-height: 1.5; overflow-y: scroll; + width: 100%; } h1, h2, h3, h4, h5, h6 { diff --git a/less/forum/DiscussionPage.less b/less/forum/DiscussionPage.less index a3f53c9e1..118fbe7b0 100644 --- a/less/forum/DiscussionPage.less +++ b/less/forum/DiscussionPage.less @@ -15,7 +15,8 @@ margin: 15px; display: inline-block; - &.item-controls, &.item-scrubber { + &.item-controls, + &.item-scrubber { margin: 0; display: block; } @@ -23,22 +24,27 @@ } } @media @tablet-up { - .DiscussionPage-nav { - float: right; + .DiscussionPage-discussion > .container { + display: flex; + flex-direction: row-reverse; + } + + .DiscussionPage-nav { + min-width: 150px; - &, > ul { - width: 150px; - } > ul { - position: fixed; - margin-top: 30px; + margin-top: 24px; + position: sticky; + top: ~"calc(24px + var(--header-height))"; z-index: 1; + width: 100%; > li { margin-bottom: 10px; } } - .ButtonGroup, .Button { + .ButtonGroup, + .Button { width: 100%; } .ButtonGroup:not(.itemCount1) { @@ -54,7 +60,7 @@ @media @tablet-up { .DiscussionPage-stream { - margin-right: 225px; + margin-right: 75px; } } @@ -132,7 +138,8 @@ } } // When the pane is pinned, move the other page content inwards - .App-content, .App-footer { + .App-content, + .App-footer { .hasPane.panePinned & { margin-left: var(--pane-width);