diff --git a/src/components/v-button/v-button.vue b/src/components/v-button/v-button.vue index 8d2d516cf3..c0c52646dc 100644 --- a/src/components/v-button/v-button.vue +++ b/src/components/v-button/v-button.vue @@ -311,6 +311,8 @@ body { .content { position: relative; + display: flex; + align-items: center; line-height: normal; &.invisible { diff --git a/src/lang/en-US/index.json b/src/lang/en-US/index.json index 3f579c15a5..6d80151545 100644 --- a/src/lang/en-US/index.json +++ b/src/lang/en-US/index.json @@ -203,6 +203,8 @@ "add_a_new_item": "Add a new item...", "add_filter": "Add Filter", + "upper_limit": "Upper limit...", + "lower_limit": "Lower limit...", "user_directory": "User Directory", "help_and_docs": "Help & Docs", diff --git a/src/layouts/cards/cards.vue b/src/layouts/cards/cards.vue index 1d59ad426c..b13e0cb762 100644 --- a/src/layouts/cards/cards.vue +++ b/src/layouts/cards/cards.vue @@ -472,8 +472,9 @@ export default defineComponent({ .item-count { position: relative; - margin-right: 8px; + margin: 0 8px; color: var(--foreground-subdued); + white-space: nowrap; } .fade-enter-active, diff --git a/src/layouts/tabular/tabular.vue b/src/layouts/tabular/tabular.vue index 8450a46971..38ec39d5c2 100644 --- a/src/layouts/tabular/tabular.vue +++ b/src/layouts/tabular/tabular.vue @@ -600,8 +600,9 @@ export default defineComponent({ .item-count { position: relative; - margin-right: 8px; + margin: 0 8px; color: var(--foreground-subdued); + white-space: nowrap; } .fade-enter-active, diff --git a/src/views/private/components/filter-drawer-detail/filter-drawer-detail.vue b/src/views/private/components/filter-drawer-detail/filter-drawer-detail.vue index 65dbc6cc6f..b6b96f9422 100644 --- a/src/views/private/components/filter-drawer-detail/filter-drawer-detail.vue +++ b/src/views/private/components/filter-drawer-detail/filter-drawer-detail.vue @@ -187,10 +187,10 @@ export default defineComponent({ diff --git a/src/views/private/components/filter-drawer-detail/filter-input.vue b/src/views/private/components/filter-drawer-detail/filter-input.vue index ba8ae23986..e38be3fcb9 100644 --- a/src/views/private/components/filter-drawer-detail/filter-input.vue +++ b/src/views/private/components/filter-drawer-detail/filter-input.vue @@ -6,6 +6,7 @@ :value="csvValue[0]" @input="setCSV(0, $event)" :disabled="disabled" + :placeholder="$t('upper_limit')" > diff --git a/src/views/private/components/header-bar/header-bar.vue b/src/views/private/components/header-bar/header-bar.vue index b57adc0070..9ff0b8a392 100644 --- a/src/views/private/components/header-bar/header-bar.vue +++ b/src/views/private/components/header-bar/header-bar.vue @@ -8,7 +8,7 @@ -
+
@@ -106,6 +106,26 @@ export default defineComponent({ .title-container { position: relative; margin-left: 12px; + overflow: hidden; + + &.full { + margin-right: 20px; + padding-right: 20px; + + &::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + width: 20px; + background: linear-gradient( + 90deg, + rgba(var(--background-page-rgb), 0) 0%, + rgba(var(--background-page-rgb), 1) 100% + ); + content: ''; + } + } .headline { position: absolute; @@ -119,10 +139,11 @@ export default defineComponent({ position: relative; display: flex; align-items: center; - } - h1 { - flex-grow: 1; + h1 { + flex-grow: 1; + white-space: nowrap; + } } }