more dashboard fixes (#9937)

* unify the panel styles

* min-width

* min-width

* fix issues

* fix css selector
This commit is contained in:
Alan Ren
2020-04-13 13:20:32 -07:00
committed by GitHub
parent 3aa357629d
commit 8c491d36f4
3 changed files with 30 additions and 18 deletions

View File

@@ -24,7 +24,7 @@ panel {
position: relative;
}
.tabbedPanel.vertical>.title {
.tabbedPanel.vertical > .title {
flex: 0 0 auto;
flex-direction: column;
height: 100%;
@@ -41,7 +41,6 @@ panel {
margin: 0 auto;
padding: 0;
justify-content: flex-start;
line-height: 35px;
white-space: nowrap;
flex: 1;
height: 100%;
@@ -50,17 +49,19 @@ panel {
.tabbedPanel .tabList .tab {
cursor: pointer;
margin: auto;
display: flex;
flex-flow: row;
}
.tabbedPanel.horizontal .tabList .tab .tabLabel {
.tabbedPanel.horizontal > .title .tabList .tab .tabLabel {
font-size: 12px;
font-weight: normal;
max-width: 100px;
}
.tabbedPanel.vertical .tabList .tab .tabLabel {
.tabbedPanel.vertical >.title .tabList .tab .tabLabel {
font-size: 13px;
padding-bottom: 0px;
font-weight: normal;
max-width: 200px;
}
.tabbedPanel .tabList .tab .tabLabel {
@@ -69,6 +70,14 @@ panel {
font-weight: 600;
}
.tabbedPanel.horizontal > .title .tabList .tab .tabLabel,
.tabbedPanel.vertical > .title .tabList .tab .tabLabel {
text-overflow: ellipsis;
overflow: hidden;
border: 0px;
font-weight: normal;
}
.tabbedPanel .tabList .tab-header {
display: flex;
padding-left: 5px;
@@ -124,23 +133,29 @@ panel {
flex-direction: row;
}
.tabbedPanel.vertical>.title {
.tabbedPanel.vertical > .title {
flex: 0 0 auto;
flex-direction: column;
height: 100%;
}
.tabbedPanel>.tab-content {
.tabbedPanel > .tab-content {
flex: 1 1 auto;
position: relative;
}
.tabbedPanel.vertical>.title > .tabContainer .tabList {
.tabbedPanel.vertical > .title > .tabContainer .tabList {
flex-flow: column;
height: calc(100% - 35px);
overflow: auto;
line-height: 35px;
}
.tabbedPanel.horizontal > .title > .tabContainer .tabList {
flex-flow: row;
width: 100%;
overflow: auto;
line-height: 35px;
}
.tabbedPanel > .title > .tabContainer > .monaco-scrollable-element {