diff --git a/frontend/assets/scss/abstract/mixins/_media-queries.scss b/frontend/assets/scss/abstract/mixins/_media-queries.scss index 2e07afb97a..595ecbbc79 100644 --- a/frontend/assets/scss/abstract/mixins/_media-queries.scss +++ b/frontend/assets/scss/abstract/mixins/_media-queries.scss @@ -43,7 +43,7 @@ /// @example scss - Creates a single breakpoint with the label `phone` /// $breakpoints: ('phone': 320px); /// -$breakpoints: ( 'phone': 320px, 'tablet': 768px, 'desktop': 1024px, 'desktopLarge': 1450px, 'xxl': 1900px, ) !default; +$breakpoints: ( 'phone': 320px, 'tablet': 768px, 'desktop': 1100px, 'desktopLarge': 1450px, 'xxl': 1900px, ) !default; /// /// Creates a list of static expressions or media types /// diff --git a/frontend/components/commons/header/filters/FilterDropdown.vue b/frontend/components/commons/header/filters/FilterDropdown.vue index 79234940ad..956b59e6cb 100644 --- a/frontend/components/commons/header/filters/FilterDropdown.vue +++ b/frontend/components/commons/header/filters/FilterDropdown.vue @@ -124,7 +124,7 @@ export default { } &__content { position: absolute; - top: 50px; + top: calc(100% + 10px); left: 0; margin-top: 0; box-shadow: $shadow; diff --git a/frontend/components/commons/header/filters/FiltersArea.vue b/frontend/components/commons/header/filters/FiltersArea.vue index e75a926a0a..1750caff49 100644 --- a/frontend/components/commons/header/filters/FiltersArea.vue +++ b/frontend/components/commons/header/filters/FiltersArea.vue @@ -147,8 +147,11 @@ export default { width: calc(100% - 300px); } &__searchbar { - margin-right: 2em; + margin-right: 10px; width: 100%; + @include media(">desktop") { + margin-right: 15px; + } &.--extended { width: 100%; margin-right: 0; diff --git a/frontend/components/commons/header/filters/FiltersList.vue b/frontend/components/commons/header/filters/FiltersList.vue index e9c106ce25..87b41ca4a9 100644 --- a/frontend/components/commons/header/filters/FiltersList.vue +++ b/frontend/components/commons/header/filters/FiltersList.vue @@ -288,21 +288,24 @@ $number-size: 18px; $this: &; position: relative; display: inline-block; - z-index: 2; &__list { display: flex; &__content { width: 455px; - left: 0; - right: 0; + right: -10em; margin: auto; position: absolute; - top: calc(100% + 1em); + top: calc(100% + 10px); box-shadow: $shadow; background: $lighter-color; padding: 20px 20px 10px 4em; border-radius: $border-radius; max-height: 550px; + z-index: 2; + @include media(">desktop") { + left: 0; + right: 0; + } &--sort { max-width: 410px; } @@ -310,13 +313,6 @@ $number-size: 18px; // width: 910px; max-height: 80vh; overflow: auto; - & > span { - // display: inline-block; - // width: 50%; - // &:nth-child(2n + 1) { - // padding-right: 1em; - // } - } } } &__item { @@ -341,13 +337,17 @@ $number-size: 18px; position: relative; margin-bottom: 0; margin-top: 0; - padding: 0.8em 1em; + padding: 0.8em; border-radius: $border-radius; - margin-right: 1em; + margin-right: 10px; color: $font-secondary; @include font-size(15px); font-family: $sff; white-space: nowrap; + @include media(">desktop") { + padding: 0.8em 1em; + margin-right: 15px; + } &:hover { background: palette(grey, smooth); } diff --git a/frontend/components/core/ReTag.vue b/frontend/components/core/ReTag.vue index b2c2c09f01..b53e6d9fb4 100644 --- a/frontend/components/core/ReTag.vue +++ b/frontend/components/core/ReTag.vue @@ -20,11 +20,14 @@ export default { border-radius: 8px; padding: 0.3em 1em; margin: 3.5px; - max-width: 200px; + max-width: 175px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; background: palette(grey, bg); + @include media(">desktopLarge") { + max-width: 200px; + } } diff --git a/frontend/components/core/table/ReTableInfo.vue b/frontend/components/core/table/ReTableInfo.vue index 1b5af9810a..d02952fa9e 100644 --- a/frontend/components/core/table/ReTableInfo.vue +++ b/frontend/components/core/table/ReTableInfo.vue @@ -478,6 +478,11 @@ export default { @include font-size(14px); font-family: $sff; text-align: left; + @include media("<=desktop") { + .svg-icon { + display: block; + } + } span { white-space: nowrap; } @@ -494,7 +499,7 @@ export default { &__item { position: relative; list-style: none; - padding: 2em 8em 2em 2em; + padding: 2em 5em 2em 2em; display: flex; width: 100%; border-bottom: 1px solid $line-light-color; @@ -509,8 +514,9 @@ export default { max-width: 120px; } &:first-child { - flex-shrink: 0; - min-width: 240px; + width: auto; + min-width: auto; + flex-grow: 1.5; } } .svg-icon { diff --git a/frontend/components/core/table/TableFiltrableColumn.vue b/frontend/components/core/table/TableFiltrableColumn.vue index 9971069b8d..ff1d4ed1a8 100644 --- a/frontend/components/core/table/TableFiltrableColumn.vue +++ b/frontend/components/core/table/TableFiltrableColumn.vue @@ -228,9 +228,16 @@ button { outline: none; background: transparent; padding-left: 0; + padding-right: 0; color: $font-secondary; @include font-size(14px); font-family: $sff; + @include media("<=desktop") { + ::v-deep svg { + margin-right: 0 !important; + display: block; + } + } &:hover, &.active { background: $bg; diff --git a/frontend/components/text-classifier/labeling-rules/RulesManagement.vue b/frontend/components/text-classifier/labeling-rules/RulesManagement.vue index 1a90016179..bb72881b7a 100644 --- a/frontend/components/text-classifier/labeling-rules/RulesManagement.vue +++ b/frontend/components/text-classifier/labeling-rules/RulesManagement.vue @@ -258,13 +258,6 @@ export default { } &__table { margin-bottom: 2em !important; - @include media("<=desktop") { - ::v-deep .table-info__header { - .table-info__item__col:first-child button { - width: 70px; - } - } - } ::v-deep { .table-info__item__col { width: 130px;