Change poll layout (#31)

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`

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;
+  }
 `

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;
   }