@theia/core 1.17.2 → 1.18.0-next.05f289b3

package/src/browser/status-bar/status-bar.tsx

@@ -195,8 +195,10 @@ export class StatusBarImpl extends ReactWidget implements StatusBar {
                 const octicon = getIconByName(val.name);
                 if (octicon) {
                     children.push(<span key={key} className={val.animation ? 'fa-' + val.animation : 'fa'}><Octicon icon={octicon} height={12.5} width={12.5} /></span>);
+                } else if (val.name.startsWith('codicon-')) {
+                    children.push(<span key={key} className={`codicon ${val.name}${val.animation ? ' fa-' + val.animation : ''}`}></span>);
                 } else {
-                    children.push(<span key={key} className={`fa fa-${val.name} ${val.animation ? 'fa-' + val.animation : ''}`}></span>);
+                    children.push(<span key={key} className={`fa fa-${val.name}${val.animation ? ' fa-' + val.animation : ''}`}></span>);
                 }
             } else {
                 children.push(<span key={key}>{val}</span>);

package/src/browser/style/breadcrumbs.css

@@ -0,0 +1,131 @@
+/********************************************************************************
+ * Copyright (C) 2019 TypeFox and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+:root {
+    --theia-breadcrumbs-height: 22px;
+}
+
+.theia-breadcrumbs {
+    height: var(--theia-breadcrumbs-height);
+    position: relative;
+    user-select: none;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: center;
+    outline-style: none;
+    margin: .5rem;
+    list-style-type: none;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    background-color: var(--theia-breadcrumb-background);
+}
+
+.theia-breadcrumbs .ps__thumb-x {
+    /* Same scrollbar height as in tab bar. */
+    height: var(--theia-private-horizontal-tab-scrollbar-height) !important;
+}
+
+.theia-breadcrumbs .theia-breadcrumb-item {
+    display: flex;
+    align-items: center;
+    flex: 0 1 auto;
+    white-space: nowrap;
+    align-self: center;
+    height: 100%;
+    color: var(--theia-breadcrumb-foreground);
+    outline: none;
+    padding: 0 .3rem 0 .25rem;
+}
+
+.theia-breadcrumbs .theia-breadcrumb-item:hover {
+    color: var(--theia-breadcrumb-focusForeground);
+}
+
+.theia-breadcrumbs .theia-breadcrumb-item:not(:last-of-type)::after {
+    font-family: codicon;
+    font-size: var(--theia-ui-font-size2);
+    content: "\eab6";
+    display: flex;
+    align-items: center;
+    width: .8em;
+    text-align: right;
+    padding-left: 4px;
+}
+
+.theia-breadcrumbs .theia-breadcrumb-item::before {
+    width: 16px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.theia-breadcrumbs .theia-breadcrumb-item:first-of-type::before {
+    content: " ";
+}
+
+.theia-breadcrumb-item-haspopup:hover {
+    background: var(--theia-accent-color3);
+    cursor: pointer;
+}
+
+#theia-breadcrumbs-popups-overlay {
+    height: 0px;
+}
+
+.theia-breadcrumbs-popup {
+    position: fixed;
+    width: 300px;
+    max-height: 200px;
+    z-index: 10000;
+    padding: 0px;
+    background: var(--theia-breadcrumbPicker-background);
+    font-size: var(--theia-ui-font-size1);
+    color: var(--theia-ui-font-color1);
+    box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
+    overflow: hidden;
+}
+
+.theia-breadcrumbs-popup:focus {
+    outline-width: 0;
+    outline-style: none;
+}
+
+.theia-breadcrumbs-popup ul {
+    display: flex;
+    flex-direction: column;
+    outline-style: none;
+    list-style-type: none;
+    padding-inline-start: 0px;
+    margin: 0 0 0 4px;
+}
+
+.theia-breadcrumbs-popup ul li {
+    display: flex;
+    align-items: center;
+    flex: 0 1 auto;
+    white-space: nowrap;
+    cursor: pointer;
+    outline: none;
+    padding: .25rem .25rem .25rem .25rem;
+}
+
+.theia-breadcrumbs-popup ul li:hover {
+    background: var(--theia-accent-color3);
+}

package/src/browser/style/index.css

@@ -163,6 +163,16 @@ blockquote {
     outline: none;
 }
 
+.action-item {
+  padding: 2px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.action-item:hover {
+    background-color: rgba(50%, 50%, 50%, 0.2);
+}
+
 button.theia-button, .theia-button {
     border: none;
     color: var(--theia-button-foreground);
@@ -248,3 +258,4 @@ button.secondary[disabled], .theia-button.secondary[disabled] {
 @import './widget.css';
 @import './quick-title-bar.css';
 @import './progress-bar.css';
+@import './breadcrumbs.css';

package/src/browser/style/menus.css

@@ -180,16 +180,26 @@
 
 .p-Menu-itemIcon::before,
 .p-Menu-itemSubmenuIcon::before {
-  font-family: FontAwesome;
+  font: normal normal normal 16px/1 codicon;
+  display: inline-block;
+  text-decoration: none;
+  text-rendering: auto;
+  text-align: center;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  transform: translateY(20%);
 }
 
 
 .p-Menu-item.p-mod-toggled > .p-Menu-itemIcon::before {
-  content: '\f00c';
+  content: '\eab2';
+  transform: scale(0.8) translateY(20%);
 }
 
 
 .p-Menu-item[data-type='submenu'] > .p-Menu-itemSubmenuIcon::before {
-  content: '\f0da';
-
+  content: '\eab6';
 }

package/src/browser/style/scrollbars.css

@@ -48,12 +48,14 @@
 |----------------------------------------------------------------------------*/
 
 #theia-app-shell .ps__rail-x,
-#theia-dialog-shell .ps__rail-x {
+#theia-dialog-shell .ps__rail-x,
+#theia-breadcrumbs-popups-overlay .ps__rail-x {
     height: var(--theia-scrollbar-rail-width);
 }
 
 #theia-app-shell .ps__rail-x > .ps__thumb-x,
-#theia-dialog-shell .ps__rail-x > .ps__thumb-x {
+#theia-dialog-shell .ps__rail-x > .ps__thumb-x,
+#theia-breadcrumbs-popups-overlay .ps__thumb-x {
     height: var(--theia-scrollbar-width);
     bottom: calc((var(--theia-scrollbar-rail-width) - var(--theia-scrollbar-width)) / 2);
     background: var(--theia-scrollbarSlider-background);
@@ -63,7 +65,9 @@
 #theia-app-shell .ps__rail-x:hover,
 #theia-app-shell .ps__rail-x:focus,
 #theia-dialog-shell .ps__rail-x:hover,
-#theia-dialog-shell .ps__rail-x:focus {
+#theia-dialog-shell .ps__rail-x:focus,
+#theia-breadcrumbs-popups-overlay .ps__rail-x:hover,
+#theia-breadcrumbs-popups-overlay .ps__rail-x:focus {
     height: var(--theia-scrollbar-rail-width);
 }
 
@@ -72,17 +76,22 @@
 #theia-app-shell .ps__rail-x.ps--clicking .ps__thumb-x,
 #theia-dialog-shell .ps__rail-x:hover > .ps__thumb-x,
 #theia-dialog-shell .ps__rail-x:focus > .ps__thumb-x,
-#theia-dialog-shell .ps__rail-x.ps--clicking .ps__thumb-x  {
+#theia-dialog-shell .ps__rail-x.ps--clicking .ps__thumb-x,
+#theia-breadcrumbs-popups-overlay .ps__rail-x:hover > .ps__thumb-x,
+#theia-breadcrumbs-popups-overlay .ps__rail-x:focus > .ps__thumb-x,
+#theia-breadcrumbs-popups-overlay .ps__rail-x.ps--clicking .ps__thumb-x  {
     height: var(--theia-scrollbar-width);
 }
 
 #theia-app-shell .ps__rail-y,
-#theia-dialog-shell .ps__rail-y {
+#theia-dialog-shell .ps__rail-y,
+#theia-breadcrumbs-popups-overlay .ps__rail-y {
     width: var(--theia-scrollbar-rail-width);
 }
 
 #theia-app-shell .ps__rail-y > .ps__thumb-y,
-#theia-dialog-shell .ps__rail-y > .ps__thumb-y {
+#theia-dialog-shell .ps__rail-y > .ps__thumb-y,
+#theia-breadcrumbs-popups-overlay .ps__rail-y > .ps__thumb-y {
     width: var(--theia-scrollbar-width);
     right: calc((var(--theia-scrollbar-rail-width) - var(--theia-scrollbar-width)) / 2);
     background: var(--theia-scrollbarSlider-background);
@@ -92,7 +101,9 @@
 #theia-app-shell .ps__rail-y:hover,
 #theia-app-shell .ps__rail-y:focus,
 #theia-dialog-shell .ps__rail-y:hover,
-#theia-dialog-shell .ps__rail-y:focus {
+#theia-dialog-shell .ps__rail-y:focus,
+#theia-breadcrumbs-popups-overlay .ps__rail-y:hover,
+#theia-breadcrumbs-popups-overlay .ps__rail-y:focus {
     width: var(--theia-scrollbar-rail-width);
 }
 
@@ -101,27 +112,32 @@
 #theia-app-shell .ps__rail-y.ps--clicking .ps__thumb-y,
 #theia-dialog-shell .ps__rail-y:hover > .ps__thumb-y,
 #theia-dialog-shell .ps__rail-y:focus > .ps__thumb-y,
-#theia-dialog-shell .ps__rail-y.ps--clicking .ps__thumb-y  {
+#theia-dialog-shell .ps__rail-y.ps--clicking .ps__thumb-y,
+#theia-breadcrumbs-popups-overlay .ps__rail-y:hover > .ps__thumb-y,
+#theia-breadcrumbs-popups-overlay .ps__rail-y:focus > .ps__thumb-y,
+#theia-breadcrumbs-popups-overlay .ps__rail-y.ps--clicking .ps__thumb-y  {
     right: calc((var(--theia-scrollbar-rail-width) - var(--theia-scrollbar-width)) / 2);
     width: var(--theia-scrollbar-width);
 }
 
 #theia-app-shell .ps [class^='ps__rail'].ps--clicking > [class^='ps__thumb'],
-#theia-dialog-shell .ps [class^='ps__rail'].ps--clicking > [class^='ps__thumb']{
+#theia-dialog-shell .ps [class^='ps__rail'].ps--clicking > [class^='ps__thumb'],
+#theia-breadcrumbs-popups-overlay .ps [class^='ps__rail'].ps--clicking > [class^='ps__thumb'] {
     background-color: var(--theia-scrollbarSlider-activeBackground);
 }
 
 #theia-app-shell .ps [class^='ps__rail'] > [class^='ps__thumb']:hover,
 #theia-app-shell .ps [class^='ps__rail'] > [class^='ps__thumb']:focus,
 #theia-dialog-shell .ps [class^='ps__rail'] > [class^='ps__thumb']:hover,
-#theia-dialog-shell .ps [class^='ps__rail'] > [class^='ps__thumb']:focus
-{
+#theia-dialog-shell .ps [class^='ps__rail'] > [class^='ps__thumb']:focus,
+#theia-breadcrumbs-popups-overlay .ps [class^='ps__rail'] > [class^='ps__thumb']:hover,
+#theia-breadcrumbs-popups-overlay .ps [class^='ps__rail'] > [class^='ps__thumb']:focus {
     background: var(--theia-scrollbarSlider-hoverBackground);
 }
 
 #theia-app-shell .ps [class^='ps__rail'] > [class^='ps__thumb']:active,
-#theia-dialog-shell .ps [class^='ps__rail'] > [class^='ps__thumb']:active
-{
+#theia-dialog-shell .ps [class^='ps__rail'] > [class^='ps__thumb']:active,
+#theia-breadcrumbs-popups-overlay .ps [class^='ps__rail'] > [class^='ps__thumb']:active {
     background: var(--theia-scrollbarSlider-activeBackground);
 }
 
@@ -130,7 +146,10 @@
 #theia-app-shell .ps--scrolling-y > [class^='ps__rail'],
 #theia-dialog-shell .ps:hover > [class^='ps__rail'],
 #theia-dialog-shell .ps--focus > [class^='ps__rail'],
-#theia-dialog-shell .ps--scrolling-y > [class^='ps__rail'] {
+#theia-dialog-shell .ps--scrolling-y > [class^='ps__rail'],
+#theia-breadcrumbs-popups-overlay .ps:hover > [class^='ps__rail'],
+#theia-breadcrumbs-popups-overlay .ps--focus > [class^='ps__rail'],
+#theia-breadcrumbs-popups-overlay .ps--scrolling-y > [class^='ps__rail'] {
     opacity: 1;
     background: transparent;
 }

package/src/browser/style/sidepanel.css

@@ -19,13 +19,13 @@
 |----------------------------------------------------------------------------*/
 
 :root {
-  --theia-private-sidebar-tab-width: 50px;
+  --theia-private-sidebar-tab-width: 48px;
   --theia-private-sidebar-tab-height: 32px;
   --theia-private-sidebar-tab-padding-top-and-bottom: 11px;
   --theia-private-sidebar-tab-padding-left-and-right: 10px;
   --theia-private-sidebar-scrollbar-rail-width: 7px;
   --theia-private-sidebar-scrollbar-width: 5px;
-  --theia-private-sidebar-icon-size: 28px;
+  --theia-private-sidebar-icon-size: 24px;
 }
 
 
@@ -42,6 +42,10 @@
   max-width: var(--theia-private-sidebar-tab-width);
 }
 
+.p-TabBar-content {
+  gap: 4px 0px;
+}
+
 .p-TabBar.theia-app-sides .p-TabBar-content {
   z-index: 1;
 }
@@ -109,10 +113,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 23px;
+  font-size: var(--theia-private-sidebar-icon-size);
   text-align: center;
   color: inherit;
-  background-color: var(--theia-activityBar-inactiveForeground);
 
   /* svg */
   width: var(--theia-private-sidebar-tab-width);
@@ -139,6 +142,10 @@
 .p-TabBar.theia-app-sides .p-TabBar-tabIcon:hover,
 .p-TabBar.theia-app-sides .p-mod-current .p-TabBar-tabIcon {
   color: var(--theia-activityBar-foreground);
+}
+
+.p-TabBar.theia-app-sides .p-TabBar-tabIcon.theia-plugin-view-container:hover,
+.p-TabBar.theia-app-sides .p-mod-current .p-TabBar-tabIcon.theia-plugin-view-container {
   background-color: var(--theia-activityBar-foreground);
 }
 

package/src/browser/style/status-bar.css

@@ -15,7 +15,7 @@
  ********************************************************************************/
 
 :root {
-    --theia-statusBar-height: 19px;
+    --theia-statusBar-height: 22px;
 }
 
 #theia-statusBar {
@@ -59,6 +59,11 @@ body.theia-no-open-workspace #theia-statusBar {
     margin-left: calc(var(--theia-ui-padding)/2);
 }
 
+#theia-statusBar .area .element .codicon {
+    /* Scaling down codicons from 16 to 14 pixels */
+    font-size: 14px;
+}
+
 #theia-statusBar .area .element > *:last-child {
     margin-right: calc(var(--theia-ui-padding)/2);
 }

package/src/browser/style/tabs.css

@@ -9,6 +9,7 @@
   --theia-private-horizontal-tab-scrollbar-height: 5px;
   --theia-tabbar-toolbar-z-index: 1001;
   --theia-toolbar-active-transform-scale: 1.272019649;
+  --theia-horizontal-toolbar-height: calc(var(--theia-private-horizontal-tab-height) + var(--theia-private-horizontal-tab-scrollbar-rail-height) / 2);
 }
 
 /*-----------------------------------------------------------------------------
@@ -22,7 +23,7 @@
 .p-TabBar[data-orientation='horizontal'] {
   overflow-x: hidden;
   overflow-y: hidden;
-  min-height: calc(var(--theia-private-horizontal-tab-height) + var(--theia-private-horizontal-tab-scrollbar-rail-height) / 2);
+  min-height: var(--theia-horizontal-toolbar-height);
 }
 
 .p-TabBar .p-TabBar-content {
@@ -31,7 +32,7 @@
 
 .p-TabBar[data-orientation='horizontal'] .p-TabBar-tab {
   flex: none;
-  height: calc(var(--theia-private-horizontal-tab-height) + var(--theia-private-horizontal-tab-scrollbar-rail-height) / 2);
+  height: var(--theia-horizontal-toolbar-height);
   min-width: 35px;
   line-height: var(--theia-private-horizontal-tab-height);
   padding: 0px 8px;
@@ -189,19 +190,11 @@ body.theia-editor-highlightModifiedTabs
     min-height: 14px;
     background-size: 13px;
     background-position-y: 3px;
-    background: var(--theia-icon-foreground);
     -webkit-mask-repeat: no-repeat;
     -webkit-mask-size: auto 13px;
     mask-repeat: no-repeat;
     mask-size: auto 13px;
-    padding-right: calc(var(--theia-ui-padding)/2);
-}
-
-.p-TabBar[data-orientation='horizontal'] .p-TabBar-tabIcon.file-icon,
-.p-TabBar-tab.p-mod-drag-image .p-TabBar-tabIcon.file-icon {
-    background: none;
-    padding-bottom: 0px;
-    min-height: 20px;
+    padding-right: 8px;
 }
 
 .p-TabBar[data-orientation='horizontal'] .p-TabBar-tabIcon.fa,
@@ -212,32 +205,48 @@ body.theia-editor-highlightModifiedTabs
 }
 
 .p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon {
-  padding-left: 10px;
+  padding: 2px;
+  margin-top: 2px;
+  margin-left: 4px;
   height: var(--theia-icon-size);
   width: var(--theia-icon-size);
-  background-size: 13px;
-  background-position: center;
-  background-repeat: no-repeat;
+  font: normal normal normal 16px/1 codicon;
+  display: inline-block;
+  text-decoration: none;
+  text-rendering: auto;
+  text-align: center;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+
+.p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon:hover {
+  border-radius: 5px;
+  background-color: rgba(50%, 50%, 50%, 0.2);
 }
 
 .p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable {
-  padding-right: 2px;
+  padding-right: 4px;
 }
 
+.p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-current > .theia-tab-icon-label > .p-TabBar-tabIcon {
+  margin-top: -2px;
+}
 
-.p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable:hover > .p-TabBar-tabCloseIcon,
 .p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-current > .p-TabBar-tabCloseIcon {
-  background-image: var(--theia-icon-close);
+  margin-top: 0px;
 }
 
-.p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable.theia-mod-dirty > .p-TabBar-tabCloseIcon {
-  background-size: 10px;
-  background-image: var(--theia-icon-circle);
+.p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable:not(.theia-mod-dirty):hover > .p-TabBar-tabCloseIcon:before,
+.p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable:not(.theia-mod-dirty).p-TabBar-tab.p-mod-current > .p-TabBar-tabCloseIcon:before,
+.p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable.theia-mod-dirty > .p-TabBar-tabCloseIcon:hover:before { 
+  content: "\ea76" 
 }
 
-.p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable.theia-mod-dirty > .p-TabBar-tabCloseIcon:hover {
-  background-size: 13px;
-  background-image: var(--theia-icon-close);
+.p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable.theia-mod-dirty > .p-TabBar-tabCloseIcon:before { 
+  content: "\ea71" 
 }
 
 .p-TabBar-tabIcon.no-icon {
@@ -279,23 +288,23 @@ body.theia-editor-highlightModifiedTabs
 | Perfect scrollbar
 |----------------------------------------------------------------------------*/
 
-.p-TabBar[data-orientation='horizontal'] > .p-TabBar-content-container > .ps__rail-x {
+.p-TabBar[data-orientation='horizontal'] .p-TabBar-content-container > .ps__rail-x {
   height: var(--theia-private-horizontal-tab-scrollbar-rail-height);
   z-index: 1000;
 }
 
-.p-TabBar[data-orientation='horizontal'] > .p-TabBar-content-container > .ps__rail-x  > .ps__thumb-x {
+.p-TabBar[data-orientation='horizontal'] .p-TabBar-content-container > .ps__rail-x  > .ps__thumb-x {
   height: var(--theia-private-horizontal-tab-scrollbar-height) !important;
   bottom: calc((var(--theia-private-horizontal-tab-scrollbar-rail-height) - var(--theia-private-horizontal-tab-scrollbar-height)) / 2);
 }
 
-.p-TabBar[data-orientation='horizontal'] > .p-TabBar-content-container > .ps__rail-x:hover,
-.p-TabBar[data-orientation='horizontal'] > .p-TabBar-content-container > .ps__rail-x:focus {
+.p-TabBar[data-orientation='horizontal'] .p-TabBar-content-container > .ps__rail-x:hover,
+.p-TabBar[data-orientation='horizontal'] .p-TabBar-content-container > .ps__rail-x:focus {
   height: var(--theia-private-horizontal-tab-scrollbar-rail-height) !important;
 }
 
-.p-TabBar[data-orientation='horizontal'] > .p-TabBar-content-container > .ps__rail-x:hover > .ps__thumb-x,
-.p-TabBar[data-orientation='horizontal'] > .p-TabBar-content-container > .ps__rail-x:focus > .ps__thumb-x {
+.p-TabBar[data-orientation='horizontal'] .p-TabBar-content-container > .ps__rail-x:hover > .ps__thumb-x,
+.p-TabBar[data-orientation='horizontal'] .p-TabBar-content-container > .ps__rail-x:focus > .ps__thumb-x {
   height: calc(var(--theia-private-horizontal-tab-scrollbar-height) / 2) !important;
   bottom: calc((var(--theia-private-horizontal-tab-scrollbar-rail-height) - var(--theia-private-horizontal-tab-scrollbar-height)) / 2);
 }
@@ -342,8 +351,8 @@ body.theia-editor-highlightModifiedTabs
 .p-TabBar-toolbar .item {
   display: flex;
   align-items: center;
-  margin-left: 8px; /* `padding` + `margin-right` from the container toolbar */
-  opacity: var(--theia-mod-disabled-opacity);;
+  margin-left: 4px; /* `padding` + `margin-right` from the container toolbar */
+  opacity: var(--theia-mod-disabled-opacity);
   cursor: default;
 }
 
@@ -352,8 +361,9 @@ body.theia-editor-highlightModifiedTabs
     cursor: pointer;
 }
 
-.p-TabBar-toolbar .item.enabled.active {
-    transform: scale(var(--theia-toolbar-active-transform-scale));
+.p-TabBar-toolbar :not(.item.enabled) .action-item {
+  background: transparent;
+  cursor: default;
 }
 
 .p-TabBar-toolbar .item.toggled {
@@ -387,3 +397,18 @@ body.theia-editor-highlightModifiedTabs
 .p-TabBar-toolbar .item .cancel {
   background: var(--theia-icon-close) no-repeat;
 }
+
+.theia-tabBar-breadcrumb-row {
+  min-width: 100%;
+}
+
+.p-TabBar.theia-tabBar-multirow[data-orientation='horizontal'] {
+  min-height: calc(var(--theia-breadcrumbs-height) + var(--theia-horizontal-toolbar-height));
+  flex-direction: column;
+}
+
+.theia-tabBar-tab-row {
+  display: flex;
+  flex-flow: row nowrap;
+  min-width: 100%;
+}