diff --git a/src/client/components/modal-page-window.vue b/src/client/components/modal-page-window.vue index f57516360..31931a89b 100644 --- a/src/client/components/modal-page-window.vue +++ b/src/client/components/modal-page-window.vue @@ -2,12 +2,16 @@
- - + + + + + {{ pageInfo.title }} +
- + @@ -173,19 +177,39 @@ export default defineComponent({ $height-narrow: 42px; display: flex; flex-shrink: 0; + height: $height; + line-height: $height; + font-weight: bold; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; box-shadow: 0px 1px var(--divider); + > button { + height: $height; + width: $height; + + &:hover { + color: var(--fgHighlighted); + } + } + + @media (max-width: 500px) { + height: $height-narrow; + line-height: $height-narrow; + padding-left: 16px; + + > button { + height: $height-narrow; + width: $height-narrow; + } + } + > .title { flex: 1; - height: $height; - font-weight: bold; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - @media (max-width: 500px) { - height: $height-narrow; - padding-left: 16px; + > .icon { + margin-right: 0.5em; } } } diff --git a/src/client/ui/_common_/header.vue b/src/client/ui/_common_/header.vue index 5405c43f8..ca3d47dc7 100644 --- a/src/client/ui/_common_/header.vue +++ b/src/client/ui/_common_/header.vue @@ -82,10 +82,11 @@ export default defineComponent({ }, mounted() { - this.narrow = this.$el.offsetWidth < 500; + if (this.$el.parentElement == null) return; + this.narrow = this.$el.parentElement.offsetWidth < 500; new ResizeObserver((entries, observer) => { - this.narrow = this.$el.offsetWidth < 500; - }).observe(this.$el); + this.narrow = this.$el.parentElement.offsetWidth < 500; + }).observe(this.$el.parentElement); }, methods: { @@ -144,6 +145,7 @@ export default defineComponent({ .fdidabkb { --height: 60px; display: flex; + width: 100%; &.thin { --height: 50px;