feat(layout/status_bar): integrate breadcrumbs

apps/client/src/layouts/desktop_layout.tsx

@@ -143,7 +143,6 @@ export default class DesktopLayout {
                                                             new FlexContainer("row")
                                                                 .class("breadcrumb-row")
                                                                 .cssBlock(".breadcrumb-row > * { margin: 5px; }")
-                                                                .child(<Breadcrumb />)
                                                                 .optChild(isNewLayout, <BreadcrumbBadges />)
                                                                 .child(<SpacerWidget baseSize={0} growthFactor={1} />)
                                                                 .child(<MovePaneButton direction="left" />)

apps/client/src/widgets/Breadcrumb.css

@@ -1,9 +1,7 @@
 .breadcrumb-row {
     position: relative;
-    height: 30px;
     min-height: 30px;
     align-items: center;
-    padding: 10px;
     container-type: inline-size;
 
     @container (max-width: 700px) {
@@ -47,14 +45,8 @@
             margin: 0;
         }
     }
-}
 
-body.experimental-feature-new-layout .breadcrumb-row {
-    padding-inline-end: 0;
-}
-
-.component.breadcrumb {
-    contain: none;
+    .breadcrumb {
         display: flex;
         margin: 0;
         align-items: center;
@@ -115,4 +107,10 @@ body.experimental-feature-new-layout .breadcrumb-row {
             padding: 0 10px;
             width: 200px;
         }
+    }
 }
+
+body.experimental-feature-new-layout .breadcrumb-row {
+    padding-inline-end: 0;
+}
+

apps/client/src/widgets/layout/StatusBar.css

@@ -1,3 +1,5 @@
 .component.status-bar {
     contain: none;
+    border-top: 1px solid var(--main-border-color);
+    background-color: var(--left-pane-background-color)
 }

apps/client/src/widgets/layout/StatusBar.tsx

@@ -1,9 +1,12 @@
+import Breadcrumb from "../Breadcrumb";
 import "./StatusBar.css";
 
 export default function StatusBar() {
     return (
         <div className="status-bar">
-            Status bar goes here.
+            <div className="breadcrumb-row">
+                <Breadcrumb />
+            </div>
         </div>
     );
 }