added .jp-scrollbar-tiny for tiny scrollbar; tiny scrollbar for toolbar

packages/application/style/scrollbar.css

@@ -20,6 +20,13 @@
   scrollbar-color: rgba(var(--jp-scrollbar-thumb-color), 0.5) transparent;
 }
 
+/* tiny scrollbar */
+
+.jp-scrollbar-tiny {
+  scrollbar-color: rgba(var(--jp-scrollbar-thumb-color), 0.5) transparent;
+  scrollbar-width: thin;
+}
+
 /*
  * Webkit scrollbar styling
  */
@@ -85,6 +92,29 @@
   border-bottom: var(--jp-scrollbar-endpad) solid transparent;
 }
 
+/* tiny scrollbar */
+
+.jp-scrollbar-tiny::-webkit-scrollbar,
+.jp-scrollbar-tiny::-webkit-scrollbar-corner {
+  background-color: transparent;
+  height: 4px;
+  width: 4px;
+}
+
+.jp-scrollbar-tiny::-webkit-scrollbar-thumb {
+  background: rgba(var(--jp-scrollbar-thumb-color), 0.5);
+}
+
+.jp-scrollbar-tiny::-webkit-scrollbar-track:horizontal {
+  border-left: 0px solid transparent;
+  border-right: 0px solid transparent;
+}
+
+.jp-scrollbar-tiny::-webkit-scrollbar-track:vertical {
+  border-top: 0px solid transparent;
+  border-bottom: 0px solid transparent;
+}
+
 /*
  * Phosphor
  */

packages/apputils/src/toolbar.tsx

@@ -178,6 +178,7 @@ export class Toolbar<T extends Widget = Widget> extends Widget {
   constructor() {
     super();
     this.addClass(TOOLBAR_CLASS);
+    this.addClass('jp-scrollbar-tiny');
     this.layout = new ToolbarLayout();
   }
 

packages/apputils/style/toolbar.css

@@ -21,6 +21,10 @@
   min-height: var(--jp-toolbar-micro-height);
   padding: 2px;
   z-index: 1;
+  overflow-x: hidden;
+}
+
+.jp-Toolbar:hover {
   overflow-x: auto;
 }