From 271624cf3e966299e070da75b7261c17dffd8623 Mon Sep 17 00:00:00 2001
From: Shekhar Patel <90516956+duplixx@users.noreply.github.com>
Date: Thu, 28 Dec 2023 00:57:50 +0530
Subject: [PATCH 1/4] Update EventStats.tsx

---
 src/components/EventStats/EventStats.tsx | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/EventStats/EventStats.tsx b/src/components/EventStats/EventStats.tsx
index 6158c39075..6b9d82c1f6 100644
--- a/src/components/EventStats/EventStats.tsx
+++ b/src/components/EventStats/EventStats.tsx
@@ -3,8 +3,9 @@ import { Modal } from 'react-bootstrap';
 import { FeedbackStats } from './Statistics/Feedback';
 import { ReviewStats } from './Statistics/Review';
 import { AverageRating } from './Statistics/AverageRating';
-import Stack from '@mui/material/Stack';
+// import Stack from '@mui/material/Stack';
 import styles from './Loader.module.css';
+import styling from './EventStats.module.css';
 import { useQuery } from '@apollo/client';
 import { EVENT_FEEDBACKS } from 'GraphQl/Queries/Queries';
 
@@ -44,14 +45,12 @@ export const EventStats = ({
         <Modal.Header closeButton className="bg-primary">
           <Modal.Title className="text-white">Event Statistics</Modal.Title>
         </Modal.Header>
-        <Modal.Body>
-          <Stack direction="row" spacing={2}>
-            <FeedbackStats data={data} />
-            <div>
-              <ReviewStats data={data} />
-              <AverageRating data={data} />
-            </div>
-          </Stack>
+        <Modal.Body className={styling.stackEvents}>
+          <FeedbackStats data={data} />
+          <div>
+            <ReviewStats data={data} />
+            <AverageRating data={data} />
+          </div>
         </Modal.Body>
       </Modal>
     </>

From a1f40d3ea00dcab1945a6be7883c74ef69cc7538 Mon Sep 17 00:00:00 2001
From: Shekhar Patel <90516956+duplixx@users.noreply.github.com>
Date: Thu, 28 Dec 2023 00:58:32 +0530
Subject: [PATCH 2/4] Create EventStats.module.css

---
 .../EventStats/EventStats.module.css          | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 src/components/EventStats/EventStats.module.css

diff --git a/src/components/EventStats/EventStats.module.css b/src/components/EventStats/EventStats.module.css
new file mode 100644
index 0000000000..44ba75a0a8
--- /dev/null
+++ b/src/components/EventStats/EventStats.module.css
@@ -0,0 +1,35 @@
+.stackEvents {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 10px 20px;
+  padding: 10px 20px;
+  overflow: hidden;
+  gap: 2px;
+  column-gap: 2px;
+}
+
+@media screen and (min-width: 801px) {
+  .stackEvents {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: 0 2rem;
+    margin: 0 40px;
+    gap: 5px;
+    column-gap: 4px;
+  }
+}
+
+@media screen and (min-width: 768px) and (max-width: 800px) {
+  .stackEvents {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: 0 2rem;
+    margin: 0 20px;
+    gap: 5px;
+    column-gap: 4px;
+  }
+}

From ece25c7adbac722ff605d26bc3e48690292deea3 Mon Sep 17 00:00:00 2001
From: Shekhar Patel <90516956+duplixx@users.noreply.github.com>
Date: Fri, 29 Dec 2023 00:13:02 +0530
Subject: [PATCH 3/4] Update src/components/EventStats/EventStats.tsx

Co-authored-by: Noble Mittal <62551163+beingnoble03@users.noreply.github.com>
---
 src/components/EventStats/EventStats.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/EventStats/EventStats.tsx b/src/components/EventStats/EventStats.tsx
index 6b9d82c1f6..d708f4e7e6 100644
--- a/src/components/EventStats/EventStats.tsx
+++ b/src/components/EventStats/EventStats.tsx
@@ -3,7 +3,6 @@ import { Modal } from 'react-bootstrap';
 import { FeedbackStats } from './Statistics/Feedback';
 import { ReviewStats } from './Statistics/Review';
 import { AverageRating } from './Statistics/AverageRating';
-// import Stack from '@mui/material/Stack';
 import styles from './Loader.module.css';
 import styling from './EventStats.module.css';
 import { useQuery } from '@apollo/client';

From 4949e210e548478ff0d899e1010c0927dc53a77c Mon Sep 17 00:00:00 2001
From: Shekhar Patel <90516956+duplixx@users.noreply.github.com>
Date: Fri, 29 Dec 2023 07:05:45 +0530
Subject: [PATCH 4/4] Update EventStats.tsx

---
 src/components/EventStats/EventStats.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/EventStats/EventStats.tsx b/src/components/EventStats/EventStats.tsx
index d708f4e7e6..c9f1a70e8d 100644
--- a/src/components/EventStats/EventStats.tsx
+++ b/src/components/EventStats/EventStats.tsx
@@ -4,7 +4,7 @@ import { FeedbackStats } from './Statistics/Feedback';
 import { ReviewStats } from './Statistics/Review';
 import { AverageRating } from './Statistics/AverageRating';
 import styles from './Loader.module.css';
-import styling from './EventStats.module.css';
+import eventStatsStyles from './EventStats.module.css';
 import { useQuery } from '@apollo/client';
 import { EVENT_FEEDBACKS } from 'GraphQl/Queries/Queries';
 
@@ -44,7 +44,7 @@ export const EventStats = ({
         <Modal.Header closeButton className="bg-primary">
           <Modal.Title className="text-white">Event Statistics</Modal.Title>
         </Modal.Header>
-        <Modal.Body className={styling.stackEvents}>
+        <Modal.Body className={eventStatsStyles.stackEvents}>
           <FeedbackStats data={data} />
           <div>
             <ReviewStats data={data} />