diff --git a/components/scenes/scenes.vue b/components/scenes/scenes.vue index 2f99f58..20224e8 100644 --- a/components/scenes/scenes.vue +++ b/components/scenes/scenes.vue @@ -297,6 +297,7 @@ function updateFilter(prop, value, reload = true) { display: flex; background: var(--background-base-10); position: relative; + flex-grow: 1; } .scenes-header { diff --git a/pages/entities/@entitySlug/+Page.vue b/pages/entities/@entitySlug/+Page.vue index 1315c91..87dc19d 100644 --- a/pages/entities/@entitySlug/+Page.vue +++ b/pages/entities/@entitySlug/+Page.vue @@ -119,13 +119,11 @@ const scrollable = computed(() => children.value?.scrollWidth > children.value?. .page { display: flex; flex-direction: column; - overflow-y: hidden; } .content { display: flex; flex-direction: column; - overflow-y: auto; flex-grow: 1; } @@ -133,12 +131,20 @@ const scrollable = computed(() => children.value?.scrollWidth > children.value?. display: flex; justify-content: space-between; align-items: stretch; + position: sticky; + top: 0; + z-index: 1; color: var(--text-light); background: var(--grey-dark-50); + + .link { + display: flex; + align-items: center; + } } .logo { - height: 2.5rem; + height: 2rem; max-width: 15rem; padding: .75rem 1rem; object-fit: contain; @@ -152,6 +158,7 @@ const scrollable = computed(() => children.value?.scrollWidth > children.value?. .favicon { display: none; padding: .75rem 1rem; + height: 1.5rem; } .children-container { @@ -222,7 +229,11 @@ const scrollable = computed(() => children.value?.scrollWidth > children.value?. } } -@media(--small-10) { +@media(--compact) { + .logo { + height: 1.25rem; + } + .logo-parent { display: none; } @@ -230,12 +241,6 @@ const scrollable = computed(() => children.value?.scrollWidth > children.value?. .favicon { display: inline-block; } -} - -@media(--compact) { - .logo { - height: 1.75rem; - } .expand-text { display: none; @@ -245,4 +250,16 @@ const scrollable = computed(() => children.value?.scrollWidth > children.value?. margin-right: 1rem; } } + +@media(--small-20) { + .logo { + height: 1rem; + padding: .5rem 1rem; + } + + .favicon { + height: 1rem; + padding: .5rem 1rem; + } +}