diff --git a/code/frontend/src/app/features/events/events.component.scss b/code/frontend/src/app/features/events/events.component.scss index 0b70e4fc..44065cfa 100644 --- a/code/frontend/src/app/features/events/events.component.scss +++ b/code/frontend/src/app/features/events/events.component.scss @@ -5,8 +5,7 @@ > .toolbar { animation: slide-up var(--duration-normal) var(--ease-default) both; animation-delay: 0ms; - position: relative; - z-index: 1; + @include sticky-page-header; } > .event-count { animation: slide-up var(--duration-normal) var(--ease-default) both; @@ -41,10 +40,6 @@ } // Events list -.events-list { - max-height: 70vh; - overflow-y: auto; -} .event-row { border-bottom: 1px solid var(--divider); diff --git a/code/frontend/src/app/features/logs-component/logs.component.scss b/code/frontend/src/app/features/logs-component/logs.component.scss index dc734c09..d8ed8286 100644 --- a/code/frontend/src/app/features/logs-component/logs.component.scss +++ b/code/frontend/src/app/features/logs-component/logs.component.scss @@ -5,8 +5,7 @@ > .toolbar { animation: slide-up var(--duration-normal) var(--ease-default) both; animation-delay: 0ms; - position: relative; - z-index: 1; + @include sticky-page-header; } > .log-count { animation: slide-up var(--duration-normal) var(--ease-default) both; @@ -38,8 +37,6 @@ // Log console .log-console { - max-height: 70vh; - overflow-y: auto; font-family: var(--font-mono); font-size: var(--font-size-xs); } diff --git a/code/frontend/src/app/features/seeker-stats/quality-tab/quality-tab.component.scss b/code/frontend/src/app/features/seeker-stats/quality-tab/quality-tab.component.scss index 4637eb91..24569126 100644 --- a/code/frontend/src/app/features/seeker-stats/quality-tab/quality-tab.component.scss +++ b/code/frontend/src/app/features/seeker-stats/quality-tab/quality-tab.component.scss @@ -62,10 +62,6 @@ } // Scores list -.scores-list { - max-height: 70vh; - overflow-y: auto; -} .score-row { border-bottom: 1px solid var(--divider); diff --git a/code/frontend/src/app/features/seeker-stats/searches-tab/searches-tab.component.scss b/code/frontend/src/app/features/seeker-stats/searches-tab/searches-tab.component.scss index e0c04090..05f397d2 100644 --- a/code/frontend/src/app/features/seeker-stats/searches-tab/searches-tab.component.scss +++ b/code/frontend/src/app/features/seeker-stats/searches-tab/searches-tab.component.scss @@ -216,10 +216,6 @@ } // List rows -.list { - max-height: 70vh; - overflow-y: auto; -} .list-row { border-bottom: 1px solid var(--divider); diff --git a/code/frontend/src/app/features/seeker-stats/seeker-stats.component.scss b/code/frontend/src/app/features/seeker-stats/seeker-stats.component.scss index df9b7e47..fc7b839d 100644 --- a/code/frontend/src/app/features/seeker-stats/seeker-stats.component.scss +++ b/code/frontend/src/app/features/seeker-stats/seeker-stats.component.scss @@ -1,7 +1,11 @@ +@use 'data-toolbar' as *; + .page-content { > app-tabs { animation: slide-up var(--duration-normal) var(--ease-default) both; animation-delay: 0ms; + display: block; + @include sticky-page-header; } > .tab-content { diff --git a/code/frontend/src/app/features/seeker-stats/upgrades-tab/upgrades-tab.component.scss b/code/frontend/src/app/features/seeker-stats/upgrades-tab/upgrades-tab.component.scss index 44214c17..fbdd78d7 100644 --- a/code/frontend/src/app/features/seeker-stats/upgrades-tab/upgrades-tab.component.scss +++ b/code/frontend/src/app/features/seeker-stats/upgrades-tab/upgrades-tab.component.scss @@ -53,10 +53,6 @@ } // Upgrades list -.upgrades-list { - max-height: 70vh; - overflow-y: auto; -} .upgrade-row { border-bottom: 1px solid var(--divider); diff --git a/code/frontend/src/app/features/strikes/strikes.component.scss b/code/frontend/src/app/features/strikes/strikes.component.scss index 0e19caca..4a934d0c 100644 --- a/code/frontend/src/app/features/strikes/strikes.component.scss +++ b/code/frontend/src/app/features/strikes/strikes.component.scss @@ -5,8 +5,7 @@ > .toolbar { animation: slide-up var(--duration-normal) var(--ease-default) both; animation-delay: 0ms; - position: relative; - z-index: 1; + @include sticky-page-header; } > .strike-count { animation: slide-up var(--duration-normal) var(--ease-default) both; @@ -41,10 +40,6 @@ } // Strikes list -.strikes-list { - max-height: 70vh; - overflow-y: auto; -} .strike-row { border-bottom: 1px solid var(--divider); diff --git a/code/frontend/src/styles/_data-toolbar.scss b/code/frontend/src/styles/_data-toolbar.scss index 5f55b670..e091a79e 100644 --- a/code/frontend/src/styles/_data-toolbar.scss +++ b/code/frontend/src/styles/_data-toolbar.scss @@ -4,6 +4,24 @@ // Usage: @use 'data-toolbar' as *; // ============================================================================= +// Pins a page header bar to the top of the shell scroll container +@mixin sticky-page-header { + position: sticky; + top: calc(-1 * var(--content-padding, var(--space-6))); + z-index: var(--z-sticky); + background: var(--surface-overlay); + backdrop-filter: blur(20px) saturate(1.4); + -webkit-backdrop-filter: blur(20px) saturate(1.4); + padding-top: var(--content-padding, var(--space-6)); + padding-bottom: var(--space-3); + padding-left: var(--content-padding, var(--space-6)); + padding-right: var(--content-padding, var(--space-6)); + margin-top: calc(-1 * var(--content-padding, var(--space-6))); + margin-left: calc(-1 * var(--content-padding, var(--space-6))); + margin-right: calc(-1 * var(--content-padding, var(--space-6))); + box-shadow: 0 10px 18px -14px rgba(0, 0, 0, 0.35); +} + @mixin data-toolbar { display: flex; align-items: center;