Fix styles in small height viewports

CHANGELOG.md

@@ -50,7 +50,8 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Fixed an error of malformed table row on the generation of PDF reports [#6558](https:/wazuh/wazuh-dashboard-plugins/pull/6558)
 - Fixed the sample alerts scripts to generate valid IP ranges and file hashes [#6667](https:/wazuh/wazuh-dashboard-plugins/pull/6667)
 - Fixed cronjob max seconds interval validation [#6730](https:/wazuh/wazuh-dashboard-plugins/pull/6730)
-
+- Fixed styles in small height viewports [#6747](https:/wazuh/wazuh-dashboard-plugins/pull/6747)
+
 ### Removed
 
 - Removed some branding references across the application. [#6155](https:/wazuh/wazuh-dashboard-plugins/pull/6155)

plugins/main/public/components/common/doc-viewer/doc-viewer.tsx

@@ -134,7 +134,7 @@ const DocViewer = (props: tDocViewerProps) => {
  {...fieldIconProps}
  />
  </EuiFlexItem>
- <EuiFlexItem style={{ maxWidth: '25vw' }}>
+ <EuiFlexItem style={{ maxWidth: '25vw', minWidth: '200px' }}>
  <span style={{ wordBreak: 'break-all' }}>
  <b>{displayName}</b>
  </span>

plugins/main/public/components/common/wazuh-data-grid/wazuh-data-grid.scss

@@ -1,14 +1,23 @@
 .wazuhDataGridContainer {
-  max-width: 100%;
-  min-width: 100%;
+ max-width: 100%;
+ min-width: 100%;
 
- .euiDataGrid--fullScreen {
- height: calc(100vh - 49px);
- bottom: 0;
- top: auto;
+ .euiDataGrid__virtualized {
+ height: max-content !important;
+ }
+
+ .euiDataGrid--fullScreen {
+ height: calc(100vh - 49px);
+ bottom: 0;
+ top: auto;
+
+ .euiDataGrid__virtualized {
+ height: calc(100vh - 147px) !important;
+ width: 100% !important;
  }
+ }
 }
 
 .headerIsExpanded .wazuhDataGridContainer {
-  height: calc(100vh - 153px);
-}
+ height: calc(100vh - 153px);
+}

plugins/main/public/components/common/wazuh-discover/discover.scss

@@ -1,14 +1,17 @@
 .discoverContainer {
- height: calc(100vh - 104px);
+ .euiDataGrid__virtualized {
+ height: max-content !important;
+ }
 
  .euiDataGrid--fullScreen {
  height: calc(100vh - 49px);
  bottom: 0;
  top: auto;
- }
 
- .discoverDataGrid {
- height: calc(100vh - 458px);
+ .euiDataGrid__virtualized {
+ height: calc(100vh - 147px) !important;
+ width: 100% !important;
+ }
  }
 
  .discoverChartContainer {
@@ -22,7 +25,3 @@
  }
  }
 }
-
-.headerIsExpanded .discoverContainer {
- height: calc(100vh - 153px);
-}

plugins/main/public/components/common/wazuh-discover/render-columns.tsx

@@ -85,8 +85,4 @@ export const wzDiscoverRenderColumns: tDataGridRenderColumn[] = [
  <div>{renderMitreTechnique(value)}</div>
  ),
  },
- {
- id: 'timestamp',
- render: value => formatUIDate(value),
- },
 ];

plugins/main/public/components/common/wazuh-discover/wz-discover.tsx

@@ -234,7 +234,7 @@ const WazuhDiscoverComponent = (props: WazuhDiscoverProps) => {
  </EuiPanel>
  </EuiPanel>
  </EuiFlexItem>
- <EuiFlexItem grow={false} className='discoverDataGrid'>
+ <EuiFlexItem>
  <EuiDataGrid
  {...dataGridProps}
  className={sideNavDocked ? 'dataGridDockedNav' : ''}

plugins/main/public/components/overview/mitre/framework/components/techniques/components/flyout-technique/flyout-technique-columns.tsx

@@ -1,28 +1,34 @@
 import React from 'react';
-import { formatUIDate, AppNavigate } from '../../../../../../../../react-services';
+import {
+ formatUIDate,
+ AppNavigate,
+} from '../../../../../../../../react-services';
 import { tDataGridColumn } from '../../../../../../../common/data-grid';
 import { EuiLink, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { getCore } from '../../../../../../../../kibana-services';
-import { rules, endpointSummary } from '../../../../../../../../utils/applications';
+import {
+ rules,
+ endpointSummary,
+} from '../../../../../../../../utils/applications';
 import { RedirectAppLinks } from '../../../../../../../../../../../src/plugins/opensearch_dashboards_react/public';
 
 const navigateTo = (ev, section, params) => {
  AppNavigate.navigateToModule(ev, section, params);
 };
 
 const renderTechniques = (value: []) => {
- const techniques = value.map((technique) => {
- /* 
+ const techniques = value.map(technique => {
+ /*
  ToDo:
  This link redirect to the Intelligence tab and open the flyout technique detail
- This must be replaced by the RedirectAppLinks but right now the RedirectAppLinks is not working, 
+ This must be replaced by the RedirectAppLinks but right now the RedirectAppLinks is not working,
  doesn't open the tab and the flyout technique, so we are using the AppNavigate.navigateToModule
  */
  return (
  <EuiFlexItem key={technique}>
  <EuiLink
  key={technique}
- onClick={(e) =>
+ onClick={e =>
  navigateTo(e, 'overview', {
  tab: 'mitre',
  tabView: 'intelligence',
@@ -38,70 +44,74 @@ const renderTechniques = (value: []) => {
  });
 
  return (
- <EuiFlexGroup gutterSize="s" direction="column">
+ <EuiFlexGroup gutterSize='s' direction='column'>
  {techniques}
  </EuiFlexGroup>
  );
 };
 
 export const techniquesColumns: tDataGridColumn[] = [
- { id: 'timestamp', displayAsText: 'Time', render: (value) => formatUIDate(value) },
+ {
+ id: 'timestamp',
+ displayAsText: 'Time',
+ render: value => formatUIDate(value),
+ },
  {
  id: 'agent.id',
  displayAsText: 'Agent',
- render: (agentId) => (
+ render: agentId => (
  <RedirectAppLinks application={getCore().application}>
  <EuiLink
  href={`${endpointSummary.id}#/agents?tab=welcome&agent=${agentId}`}
  >
  {agentId}
- </EuiLink >
+ </EuiLink>
  </RedirectAppLinks>
  ),
  },
  { id: 'agent.name', displayAsText: 'Agent Name' },
  {
  id: 'rule.mitre.id',
  displayAsText: 'Technique(s)',
- render: (value) => renderTechniques(value),
+ render: value => renderTechniques(value),
  },
  { id: 'rule.mitre.tactic', displayAsText: 'Tactic(s)' },
  { id: 'rule.level', displayAsText: 'Level' },
  {
  id: 'rule.id',
  displayAsText: 'Rule ID',
- render: (value) => (
+ render: value => (
  <RedirectAppLinks application={getCore().application}>
- <EuiLink
- href={`${rules.id}#/manager/?tab=rules&redirectRule=${value}`}
- >
+ <EuiLink href={`${rules.id}#/manager/?tab=rules&redirectRule=${value}`}>
  {value}
- </EuiLink >
+ </EuiLink>
  </RedirectAppLinks>
  ),
  },
  { id: 'rule.description', displayAsText: 'Description' },
 ];
 
 export const agentTechniquesColumns: tDataGridColumn[] = [
- { id: 'timestamp', displayAsText: 'Time' },
+ {
+ id: 'timestamp',
+ displayAsText: 'Time',
+ render: value => formatUIDate(value),
+ },
  {
  id: 'rule.mitre.id',
  displayAsText: 'Technique(s)',
- render: (value) => renderTechniques(value),
+ render: value => renderTechniques(value),
  },
  { id: 'rule.mitre.tactic', displayAsText: 'Tactic(s)' },
  { id: 'rule.level', displayAsText: 'Level' },
  {
  id: 'rule.id',
  displayAsText: 'Rule ID',
- render: (value) => (
+ render: value => (
  <RedirectAppLinks application={getCore().application}>
- <EuiLink
- href={`${rules.id}#/manager/?tab=rules&redirectRule=${value}`}
- >
+ <EuiLink href={`${rules.id}#/manager/?tab=rules&redirectRule=${value}`}>
  {value}
- </EuiLink >
+ </EuiLink>
  </RedirectAppLinks>
  ),
  },