MM-59944 - FIxing playbooks scroll issue (#27861)

Этот коммит содержится в:
Asaad Mahmood
2024-08-08 15:38:56 +05:00
коммит произвёл GitHub
родитель eec9a4742a
Коммит 6316606289

Просмотреть файл

@@ -31,7 +31,7 @@ body {
.sticky { .sticky {
background: $white; background: $white;
> .channel-view { >.channel-view {
overflow: auto; overflow: auto;
height: 100vh; height: 100vh;
padding: 0 15px; padding: 0 15px;
@@ -40,7 +40,7 @@ body {
.inner-wrap { .inner-wrap {
width: 100%; width: 100%;
> .row { >.row {
&.content { &.content {
min-height: calc(100vh - 89px); min-height: calc(100vh - 89px);
@@ -64,7 +64,7 @@ body {
overflow: auto; overflow: auto;
} }
> .row { >.row {
&.main { &.main {
position: relative; position: relative;
height: 100%; height: 100%;
@@ -101,7 +101,7 @@ body.admin-onboarding #root {
.app__body { .app__body {
#root.channel-view { #root.channel-view {
&:has(.backstage-body){ &:has(.backstage-body) {
background-color: $bg--gray; background-color: $bg--gray;
} }
} }
@@ -115,11 +115,8 @@ body.app__body #root {
--columns: min-content minmax(385px, 1fr) min-content; --columns: min-content minmax(385px, 1fr) min-content;
grid-template: grid-template:
"announcement announcement announcement" min-content "announcement announcement announcement"min-content "admin-announcement admin-announcement admin-announcement"min-content "header header header"min-content "team-sidebar main app-sidebar"
"admin-announcement admin-announcement admin-announcement" min-content "footer footer footer"min-content / var(--columns);
"header header header" min-content
"team-sidebar main app-sidebar"
"footer footer footer" min-content / var(--columns);
> :only-child { > :only-child {
grid-area: main; grid-area: main;
@@ -131,13 +128,10 @@ body.app__body #root {
padding-bottom: 0; padding-bottom: 0;
padding-right: 0; padding-right: 0;
grid-template: grid-template:
'announcement announcement' min-content 'announcement announcement'min-content 'admin-announcement admin-announcement'min-content 'header header'min-content 'lhs center'
'admin-announcement admin-announcement' min-content 'footer footer'min-content;
'header header' min-content grid-template-columns: auto 1fr;
'lhs center' /* lhs takes its content width, center takes remaining space */
'footer footer' min-content
;
grid-template-columns: auto 1fr; /* lhs takes its content width, center takes remaining space */
} }
&.container-fluid { &.container-fluid {
@@ -164,7 +158,7 @@ body.app__body #root {
.main-wrapper { .main-wrapper {
position: relative; position: relative;
display: grid; display: grid;
overflow:hidden; overflow: hidden;
background-color: var(--sidebar-bg); background-color: var(--sidebar-bg);
border: var(--border-light); border: var(--border-light);
margin: 0 4px 4px 4px; margin: 0 4px 4px 4px;
@@ -175,30 +169,29 @@ body.app__body #root {
; ;
grid-template-columns: min-content minmax(385px, 1fr) min-content; grid-template-columns: min-content minmax(385px, 1fr) min-content;
&:has(.backstage-body){ &:has(.backstage-body) {
background: inherit; background: inherit;
padding: 0; padding: 0;
margin:0; margin: 0;
border-radius: 0; border-radius: 0;
grid-template: grid-template:
'header' min-content 'header'min-content 'main'
'main'
; ;
} }
&:has(#playbooks-backstageRoot){ &:has(#playbooks-backstageRoot) {
margin:0; margin: 0;
border-radius: 0; border-radius: 0;
} }
} }
&:has(.app-bar){ &:has(.app-bar) {
.main-wrapper { .main-wrapper {
margin-right:0; margin-right: 0;
} }
} }
&:has(.team-sidebar){ &:has(.team-sidebar) {
.main-wrapper { .main-wrapper {
margin-left: 0; margin-left: 0;
} }
@@ -214,6 +207,10 @@ body.app__body #root {
overflow: visible; overflow: visible;
} }
.product-wrapper {
overflow: auto;
}
.sidebar--right--width-holder { .sidebar--right--width-holder {
grid-area: rhs; grid-area: rhs;
} }
@@ -237,16 +234,13 @@ body.app__body #root {
padding-right: 0; padding-right: 0;
z-index: 17; z-index: 17;
grid-template: grid-template:
'announcement' min-content 'announcement'min-content 'header'min-content 'main'auto 'footer'min-content / auto;
'header' min-content
'main' auto
'footer' min-content
/ auto
;
.team-sidebar, .team-sidebar,
.app-bar { .app-bar {
grid-area: main; grid-area: main;
} }
#SidebarContainer.move--right { #SidebarContainer.move--right {
position: relative; position: relative;
} }
@@ -256,7 +250,7 @@ body.app__body #root {
grid-template: grid-template:
'main' 'main'
; ;
padding:0; padding: 0;
border-radius: 0; border-radius: 0;
#channel_view, #channel_view,
@@ -281,14 +275,17 @@ body.app__body #root {
.sidebar--right--width-holder { .sidebar--right--width-holder {
display: none; display: none;
} }
#sidebar-right { #sidebar-right {
position: absolute; position: absolute;
width: 100%; width: 100%;
grid-area: center; grid-area: center;
transition: width .25s ease-in-out; transition: width .25s ease-in-out;
} }
--columns: min-content auto min-content; --columns: min-content auto min-content;
} }
#sidebar-right { #sidebar-right {
transition: none; transition: none;
} }