From 7f3373788877eff60ba48f252d6abfbc50caf048 Mon Sep 17 00:00:00 2001
From: Aleksander Nicacio da Silva <aleksander.silva@rocket.chat>
Date: Thu, 1 Feb 2024 18:52:02 -0300
Subject: [PATCH 1/2] fix: report's agents section not taking the full page
 width

---
 .../omnichannel/reports/ReportsPage.tsx       | 30 ++++++++++++++-----
 .../reports/sections/AgentsSection.tsx        |  1 -
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/apps/meteor/ee/client/omnichannel/reports/ReportsPage.tsx b/apps/meteor/ee/client/omnichannel/reports/ReportsPage.tsx
index 444b3f6f7a30f..1bb743de54dfb 100644
--- a/apps/meteor/ee/client/omnichannel/reports/ReportsPage.tsx
+++ b/apps/meteor/ee/client/omnichannel/reports/ReportsPage.tsx
@@ -1,4 +1,4 @@
-import { Box, CardGrid } from '@rocket.chat/fuselage';
+import { Box, CardGrid, Grid, GridItem } from '@rocket.chat/fuselage';
 import { usePermission, useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
 
@@ -7,6 +7,8 @@ import NotAuthorizedPage from '../../../../client/views/notAuthorized/NotAuthori
 import { useHasLicenseModule } from '../../hooks/useHasLicenseModule';
 import { AgentsSection, ChannelsSection, DepartmentsSection, StatusSection, TagsSection } from './sections';
 
+const BREAKPOINTS = { xs: 4, sm: 8, md: 8, lg: 12, xl: 6 } as const;
+
 const ReportsPage = () => {
 	const t = useTranslation();
 
@@ -24,13 +26,25 @@ const ReportsPage = () => {
 				{t('Omnichannel_Reports_Summary')}
 			</Box>
 			<PageScrollableContentWithShadow alignItems='center'>
-				<CardGrid breakpoints={{ xs: 4, sm: 8, md: 8, lg: 12, xl: 6 }}>
-					<StatusSection />
-					<ChannelsSection />
-					<DepartmentsSection />
-					<TagsSection />
-					<AgentsSection />
-				</CardGrid>
+				<Box width='100rem' maxWidth='100%'>
+					<Grid>
+						<GridItem {...BREAKPOINTS}>
+							<StatusSection />
+						</GridItem>
+						<GridItem {...BREAKPOINTS}>
+							<ChannelsSection />
+						</GridItem>
+						<GridItem {...BREAKPOINTS}>
+							<DepartmentsSection />
+						</GridItem>
+						<GridItem {...BREAKPOINTS}>
+							<TagsSection />
+						</GridItem>
+						<GridItem {...BREAKPOINTS} xl={12}>
+							<AgentsSection />
+						</GridItem>
+					</Grid>
+				</Box>
 			</PageScrollableContentWithShadow>
 		</Page>
 	);
diff --git a/apps/meteor/ee/client/omnichannel/reports/sections/AgentsSection.tsx b/apps/meteor/ee/client/omnichannel/reports/sections/AgentsSection.tsx
index a2b23ea9d089a..692bd1c330321 100644
--- a/apps/meteor/ee/client/omnichannel/reports/sections/AgentsSection.tsx
+++ b/apps/meteor/ee/client/omnichannel/reports/sections/AgentsSection.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/no-multi-comp */
 import { Box } from '@rocket.chat/fuselage';
 import { useResizeObserver } from '@rocket.chat/fuselage-hooks';
 import { useTranslation } from '@rocket.chat/ui-contexts';

From e7d0704ae36fb1822f27ce7f5967128cc117220a Mon Sep 17 00:00:00 2001
From: Aleksander Nicacio da Silva <aleksander.silva@rocket.chat>
Date: Thu, 1 Feb 2024 19:32:32 -0300
Subject: [PATCH 2/2] chore: removed unused import

---
 apps/meteor/ee/client/omnichannel/reports/ReportsPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/meteor/ee/client/omnichannel/reports/ReportsPage.tsx b/apps/meteor/ee/client/omnichannel/reports/ReportsPage.tsx
index 1bb743de54dfb..9ffd4d8367dd8 100644
--- a/apps/meteor/ee/client/omnichannel/reports/ReportsPage.tsx
+++ b/apps/meteor/ee/client/omnichannel/reports/ReportsPage.tsx
@@ -1,4 +1,4 @@
-import { Box, CardGrid, Grid, GridItem } from '@rocket.chat/fuselage';
+import { Box, Grid, GridItem } from '@rocket.chat/fuselage';
 import { usePermission, useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';