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,72 +45,72 @@
             margin: 0;
         }
     }
+
+    .breadcrumb {
+        display: flex;
+        margin: 0;
+        align-items: center;
+        font-size: 0.9em;
+        gap: 0.25em;
+        flex-wrap: nowrap;
+        overflow: hidden;
+        max-width: 85%;
+
+        > span,
+        > span > span {
+            display: flex;
+            align-items: center;
+            min-width: 0;
+
+            a {
+                color: inherit;
+                text-decoration: none;
+                min-width: 0;
+                max-width: 150px;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                overflow: hidden;
+                display: block;
+                flex-shrink: 2;
+            }
+        }
+
+        > span:last-of-type a {
+            max-width: 300px;
+            flex-shrink: 1;
+        }
+
+        ul {
+            flex-direction: column;
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+        }
+
+        .dropdown-item span,
+        .dropdown-item strong,
+        .breadcrumb-last-item {
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            overflow: hidden;
+            display: block;
+            max-width: 300px;
+        }
+
+        .breadcrumb-last-item {
+            text-decoration: none;
+            color: unset;
+            cursor: text;
+        }
+
+        input {
+            padding: 0 10px;
+            width: 200px;
+        }
+    }
 }
 
 body.experimental-feature-new-layout .breadcrumb-row {
     padding-inline-end: 0;
 }
 
-.component.breadcrumb {
-    contain: none;
-    display: flex;
-    margin: 0;
-    align-items: center;
-    font-size: 0.9em;
-    gap: 0.25em;
-    flex-wrap: nowrap;
-    overflow: hidden;
-    max-width: 85%;
-
-    > span,
-    > span > span {
-        display: flex;
-        align-items: center;
-        min-width: 0;
-
-        a {
-            color: inherit;
-            text-decoration: none;
-            min-width: 0;
-            max-width: 150px;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-            display: block;
-            flex-shrink: 2;
-        }
-    }
-
-    > span:last-of-type a {
-        max-width: 300px;
-        flex-shrink: 1;
-    }
-
-    ul {
-        flex-direction: column;
-        list-style-type: none;
-        margin: 0;
-        padding: 0;
-    }
-
-    .dropdown-item span,
-    .dropdown-item strong,
-    .breadcrumb-last-item {
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-        display: block;
-        max-width: 300px;
-    }
-
-    .breadcrumb-last-item {
-        text-decoration: none;
-        color: unset;
-        cursor: text;
-    }
-
-    input {
-        padding: 0 10px;
-        width: 200px;
-    }
-}

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>
     );
 }