Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix the filter are displayed cropped on screens of 575px to 767px #7047

Merged
merged 6 commits into from
Oct 2, 2024
+96 −53
Merged

Fix the filter are displayed cropped on screens of 575px to 767px #7047

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b7b2178
fix the filter are displayed cropped on screens of 575px to 767px
chantal-kelm Oct 1, 2024
462a2bd
update changelog
chantal-kelm Oct 1, 2024
391f6ac
update changelog
chantal-kelm Oct 1, 2024
1fc3ee9
Merge branch '4.10.0' into bug/7040-fix-the-filter-are-displayed-crop…
chantal-kelm Oct 1, 2024
078a819
Merge branch '4.10.0' into bug/7040-fix-the-filter-are-displayed-crop…
chantal-kelm Oct 2, 2024
e256843
Merge branch '4.10.0' into bug/7040-fix-the-filter-are-displayed-crop…
asteriscos Oct 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ All notable changes to the Wazuh app project will be documented in this file.

## Wazuh v4.10.0 - OpenSearch Dashboards 2.16.0 - Revision 01

## Fixed

- Fixed the filter are displayed cropped on screens of 575px to 767px in vulnerability detection module [#7047](https://github.com/wazuh/wazuh-dashboard-plugins/pull/7047)

### Added

- Support for Wazuh 4.10.0
Expand Down
5 changes: 3 additions & 2 deletions plugins/main/public/components/common/search-bar/search-bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
SearchBarProps,
Filter,
} from '../../../../../../src/plugins/data/public';
import '../../../../public/styles/media-queries.scss';

export interface WzSearchBarProps extends SearchBarProps {
fixedFilters?: Filter[];
Expand Down Expand Up @@ -85,14 +86,14 @@ export const WzSearchBar = ({
</EuiFlexGroup>
</EuiFlexItem>
)}
<EuiFlexItem>
<EuiFlexItem className='overflow-hidden'>
<EuiFlexGroup
gutterSize='s'
alignItems='center'
responsive={false}
wrap={true}
>
<EuiFlexItem>
<EuiFlexItem className='overflow-hidden'>
<SearchBar
{...restProps}
showQueryBar={false}
Expand Down
140 changes: 89 additions & 51 deletions plugins/main/public/styles/media-queries.scss
View file
Open in desktop
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could start using something like this: https://stackoverflow.com/a/49421832/12151113

Original file line number Diff line number Diff line change
Expand Up @@ -15,75 +15,113 @@
/* -------------------------------------------------------------------------- */

@-webkit-keyframes uil-ring-anim {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

@-moz-keyframes uil-ring-anim {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

@-webkit-keyframes uil-ring-anim {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

@-o-keyframes uil-ring-anim {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

@keyframes uil-ring-anim {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
.no-legend svg {
padding-top: 10px;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.no-legend svg {
padding-top: 10px;
}
}

@supports (-ms-ime-align:auto) {
.no-legend svg {
padding-top: 10px;
}
@supports (-ms-ime-align: auto) {
.no-legend svg {
padding-top: 10px;
}
}

@media (min-width: 960px) {
md-tooltip .md-content {
height: auto !important;
md-tooltip .md-content {
height: auto !important;
}
}

.wz-search-bar {
@media only screen and (min-width: 575px) and (max-width: 767px) {
.globalFilterGroup__filterBar {
margin-top: 0;
}
}

@media only screen and (min-width: 575px) and (max-width: 767px) {
.globalFilterGroup__wrapper-isVisible {
margin-top: 0;
}
}

@media only screen and (min-width: 575px) and (max-width: 767px) {
.euiFlexGroup--responsive > .euiFlexItem {
margin-bottom: 0 !important;
}
}

@media only screen and (min-width: 575px) and (max-width: 767px) {
.globalFilterGroup__wrapper-isVisible {
.euiFlexItem.euiFlexItem--flexGrowZero {
margin-bottom: 0px;
}
}
}

@media only screen and (min-width: 575px) and (max-width: 767px) {
.euiFlexGroup--responsive {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin-left: 0;
margin-right: 0;
margin-bottom: 6px;
margin-top: 10px;
}
}
}
Loading