From a2bca6f2ea4fa94762550cb6bd3f4498582a63f0 Mon Sep 17 00:00:00 2001
From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com>
Date: Tue, 31 Aug 2021 21:54:08 +0200
Subject: [PATCH] Change poll layout (#31)

---
 .../react-components/src/WakuPolling/Poll.tsx     |  5 ++++-
 .../react-components/src/WakuPolling/PollList.tsx | 15 ++++++++++++++-
 .../react-components/src/WakuPolling/index.tsx    |  4 ++++
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/react-components/src/WakuPolling/Poll.tsx b/packages/react-components/src/WakuPolling/Poll.tsx
index 494308f..d602b29 100644
--- a/packages/react-components/src/WakuPolling/Poll.tsx
+++ b/packages/react-components/src/WakuPolling/Poll.tsx
@@ -94,8 +94,11 @@ const PollWrapper = styled.div`
   box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.15);
   border-radius: 6px;
   background-color: #fbfbfe;
-  margin-bottom: 24px;
   padding: 32px;
+
+  @media (max-width: 768px) {
+    padding: 24px;
+  }
 `
 
 const PollTitle = styled.div`
diff --git a/packages/react-components/src/WakuPolling/PollList.tsx b/packages/react-components/src/WakuPolling/PollList.tsx
index 309483a..f170b86 100644
--- a/packages/react-components/src/WakuPolling/PollList.tsx
+++ b/packages/react-components/src/WakuPolling/PollList.tsx
@@ -53,13 +53,26 @@ export function PollList({ wakuVoting, signer }: PollListProps) {
     </PollListWrapper>
   )
 }
+
 const PollListWrapper = styled.div`
   display: flex;
+  flex-wrap: wrap;
   width: 100%;
+  gap: 24px;
+  align-items: flex-start;
+
+  @media (max-width: 768px) {
+    gap: 16px;
+    justify-content: center;
+  }
 `
 
 const ColumnWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  margin-right: 25px;
+  gap: 24px;
+
+  @media (max-width: 768px) {
+    gap: 16px;
+  }
 `
diff --git a/packages/react-components/src/WakuPolling/index.tsx b/packages/react-components/src/WakuPolling/index.tsx
index ddb0a30..cea9071 100644
--- a/packages/react-components/src/WakuPolling/index.tsx
+++ b/packages/react-components/src/WakuPolling/index.tsx
@@ -97,6 +97,10 @@ const Wrapper = styled.div`
   padding: 150px 32px 50px;
   width: 100%;
 
+  @media (max-width: 1146px) {
+    max-width: 780px;
+  }
+
   @media (max-width: 600px) {
     padding: 132px 16px 32px;
   }