Fixed various resource pane styling issues.

microsoft · Feb 8, 2019 · 7aea8df · 7aea8df
1 parent 01815fe
commit 7aea8df
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,3 +17,4 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [client] Renamed 'submit' button to 'save' in endpoint & service editors, in PR[#1296](https://github.com/Microsoft/BotFramework-Emulator/pull/1296)
 - [main] use correct values for subscriptionKey and endpointKey for qna services, in PR [#1301](https://github.com/Microsoft/BotFramework-Emulator/pull/1301)
 - [client] fix link to manage qna service, in PR [#1301](https://github.com/Microsoft/BotFramework-Emulator/pull/1301)
+- [client] Fixed resources pane styling issues, and added scrollbars, in PR [#1303](https://github.com/Microsoft/BotFramework-Emulator/pull/1303)
diff --git a/packages/app/client/src/ui/shell/explorer/explorerStyles.scss b/packages/app/client/src/ui/shell/explorer/explorerStyles.scss
@@ -73,17 +73,15 @@
   color: var(--input-label-color);
   display: flex;
   flex-flow: column nowrap;
-  height: 100%;
+  height: auto;
   list-style-type: none;
   margin: 0;
   overflow: hidden;
   padding: 0;
 
   & > li {
     display: flex;
-    flex-direction: column;
-    flex: 0 1 auto;
-    max-height: 100%;
-    overflow: hidden;
+    flex-flow: column nowrap;
+    height: 100%;
   }
 }
diff --git a/packages/app/client/src/ui/shell/explorer/resourcesBar/resourcesBar.scss b/packages/app/client/src/ui/shell/explorer/resourcesBar/resourcesBar.scss
@@ -1,3 +1,5 @@
 .resources-bar {
-  display: block;
+  display: flex;
+  flex-flow: column nowrap;
+  height: 100%;
 }
diff --git a/packages/app/client/src/ui/shell/explorer/servicePane/servicePane.scss b/packages/app/client/src/ui/shell/explorer/servicePane/servicePane.scss
@@ -1,6 +1,5 @@
 .service-pane {
   border-bottom: var(--explorer-panel-group-border);
-  display: inline-block;
   height: 100%;
   padding: 2px;
   position: relative;
@@ -62,6 +61,15 @@
   margin: 0;
   max-height: 400px;
   padding: 2px 0 2px 0;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-color);
+  }
 
   & > li {
     border: 1px solid transparent;

diff --git a/packages/app/client/src/ui/styles/themes/dark.css b/packages/app/client/src/ui/styles/themes/dark.css
@@ -212,6 +212,9 @@ html {
 
   /* Icons */
   --cosmos-db-contrast: var(--neutral-1);
+
+  /* Scrollbar */
+  --scrollbar-color: var(--neutral-6);
 }
 
 .dialog {

diff --git a/packages/app/client/src/ui/styles/themes/high-contrast.css b/packages/app/client/src/ui/styles/themes/high-contrast.css
@@ -211,6 +211,9 @@ html {
 
   /* Icons */
   --cosmos-db-contrast: var(--neutral-1);
+
+  /* Scrollbar */
+  --scrollbar-color: var(--neutral-1);
 }
 
 .dialog {

diff --git a/packages/app/client/src/ui/styles/themes/light.css b/packages/app/client/src/ui/styles/themes/light.css
@@ -136,6 +136,7 @@ html {
   --explorer-panel-group-title-color: var(--neutral-12);
   --explorer-panel-group-border: 1px solid transparent;
   --explorer-panel-empty-message-color: var(--neutral-15);
+  --service-panescrollbar-color: var(--neutral-13);
 
   /* Explorer Bar */
   --explorer-bar-header-bg: var(--neutral-3);
@@ -212,6 +213,9 @@ html {
 
   /* Icons */
   --cosmos-db-contrast: var(--neutral-16);
+
+  /* Scrollbar */
+  --scrollbar-color: var(--neutral-6);
 }
 
 .dialog {