fix(layout): correct breadcrumb sticky behavior and controls wrapping overflow

- Extract breadcrumb from controls template into sibling component
- Fix breadcrumb sticky positioning (top: 0, z-index: calc(--z-header - 1))
- Add 1500px breakpoint to wrap controls-right and prevent overflow
- Adjust breadcrumb padding-bottom to cover controls-right area when sticky

static/css/components/sidebar.css

@@ -271,11 +271,16 @@
 
 /* Enhanced Sidebar Breadcrumb Styles */
 .sidebar-breadcrumb-container {
-    margin-top: 8px;
     padding: 8px 0;
     border-bottom: 1px solid var(--border-color);
     background: var(--bg-color);
     border-radius: var(--border-radius-xs);
+    /* Sticky positioning to stick below header when scrolling
+       top: 0 means stick at the top of the scroll container (page-content)
+       which is at header height (48px) from the viewport */
+    position: sticky;
+    top: 0;
+    z-index: calc(var(--z-header) - 1);
 }
 
 .sidebar-breadcrumb-nav {
@@ -284,7 +289,6 @@
     flex-wrap: wrap;
     gap: 4px;
     font-size: 0.85em;
-    padding: 0 8px;
 }
 
 .sidebar-breadcrumb-item {

static/css/layout.css

@@ -21,7 +21,7 @@
     top: -54px;
     z-index: calc(var(--z-header) - 1);
     background: var(--bg-color);
-    padding: var(--space-2) 0;
+    padding: var(--space-1) 0;
     box-shadow: 0 1px 3px rgba(0,0,0,0.05);
 }
 
@@ -397,6 +397,33 @@
     text-align: center;
 }
 
+/* Intermediate breakpoint: wrap controls-right to prevent overflow */
+@media (max-width: 1500px) {
+    .actions {
+        flex-wrap: wrap;
+        gap: var(--space-2);
+    }
+
+    .action-buttons {
+        flex-wrap: wrap;
+        gap: var(--space-1);
+    }
+
+    .controls-right {
+        width: 100%;
+        justify-content: flex-end;
+        margin-top: 8px;
+        padding-left: 0;
+    }
+
+    /* Reduce button sizes to fit better */
+    .control-group button {
+        min-width: 80px;
+        padding: 4px 8px;
+        font-size: 0.8em;
+    }
+}
+
 @media (max-width: 768px) {
     .actions {
         flex-wrap: wrap;

templates/checkpoints.html

@@ -28,6 +28,7 @@
 
 {% block content %}
     {% include 'components/controls.html' %}
+    {% include 'components/breadcrumb.html' %}
     {% include 'components/duplicates_banner.html' %}
     {% include 'components/folder_sidebar.html' %}
     

templates/components/breadcrumb.html

@@ -0,0 +1,5 @@
+<div id="breadcrumbContainer" class="sidebar-breadcrumb-container">
+    <nav class="sidebar-breadcrumb-nav" id="sidebarBreadcrumbNav">
+        <!-- Breadcrumbs will be populated by JavaScript -->
+    </nav>
+</div>

templates/components/controls.html

@@ -129,11 +129,4 @@
             </div>
         </div>
     </div>
-    
-    <!-- Breadcrumb Navigation -->
-    <div id="breadcrumbContainer" class="sidebar-breadcrumb-container">
-        <nav class="sidebar-breadcrumb-nav" id="sidebarBreadcrumbNav">
-            <!-- Breadcrumbs will be populated by JavaScript -->
-        </nav>
-    </div>
 </div>

templates/embeddings.html

@@ -26,6 +26,7 @@
 
 {% block content %}
     {% include 'components/controls.html' %}
+    {% include 'components/breadcrumb.html' %}
     {% include 'components/duplicates_banner.html' %}
     {% include 'components/folder_sidebar.html' %}
     

templates/loras.html

@@ -9,6 +9,7 @@
 
 {% block content %}
     {% include 'components/controls.html' %}
+    {% include 'components/breadcrumb.html' %}
     {% include 'components/duplicates_banner.html' %}
     {% include 'components/folder_sidebar.html' %}