diff --git a/static/css/components/sidebar.css b/static/css/components/sidebar.css index 24d26c3f..f20d567e 100644 --- a/static/css/components/sidebar.css +++ b/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 { diff --git a/static/css/layout.css b/static/css/layout.css index 95014ee6..e07de0b7 100644 --- a/static/css/layout.css +++ b/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; diff --git a/templates/checkpoints.html b/templates/checkpoints.html index 5635761e..988bb6cc 100644 --- a/templates/checkpoints.html +++ b/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' %} diff --git a/templates/components/breadcrumb.html b/templates/components/breadcrumb.html new file mode 100644 index 00000000..16a39428 --- /dev/null +++ b/templates/components/breadcrumb.html @@ -0,0 +1,5 @@ + diff --git a/templates/components/controls.html b/templates/components/controls.html index a2ef9856..b0fe8cfd 100644 --- a/templates/components/controls.html +++ b/templates/components/controls.html @@ -129,11 +129,4 @@ - - - diff --git a/templates/embeddings.html b/templates/embeddings.html index de8b807a..627fb651 100644 --- a/templates/embeddings.html +++ b/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' %} diff --git a/templates/loras.html b/templates/loras.html index 5ede68d9..e9d58564 100644 --- a/templates/loras.html +++ b/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' %}