From 890471f590e5e35d7310dbc0c89f7ecbe8e9770a Mon Sep 17 00:00:00 2001
From: Moody Salem <moodysalem@users.noreply.github.com>
Date: Wed, 1 Dec 2021 10:23:02 -0500
Subject: [PATCH] fix: fix layout of proposal list items on the vote page on
 mobile (#2898)

* fix: fixing layout from using grid to flexbox

* fix: setting WrapSmall to nowrap due to layout issue on mobile

* fix: using width auto instead of disabling flex wrap

Co-authored-by: Julian Anderson <juliancanderson@gmail.com>
---
 src/pages/Vote/Landing.tsx | 10 ++++++++--
 src/pages/Vote/styled.tsx  |  2 ++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/pages/Vote/Landing.tsx b/src/pages/Vote/Landing.tsx
index 55f166033d..263099a699 100644
--- a/src/pages/Vote/Landing.tsx
+++ b/src/pages/Vote/Landing.tsx
@@ -40,8 +40,8 @@ const Proposal = styled(Button)`
   width: 100%;
   margin-top: 1rem;
   border-radius: 12px;
-  display: grid;
-  grid-template-columns: 48px 1fr 120px;
+  display: flex;
+  justify-content: space-between;
   align-items: center;
   text-align: left;
   outline: none;
@@ -59,10 +59,16 @@ const Proposal = styled(Button)`
 
 const ProposalNumber = styled.span`
   opacity: 0.6;
+  flex: 0 0 40px;
 `
 
 const ProposalTitle = styled.span`
   font-weight: 600;
+  flex: 1;
+  max-width: 420px;
+  white-space: initial;
+  word-wrap: break-word;
+  padding-right: 10px;
 `
 
 const VoteCard = styled(DataCard)`
diff --git a/src/pages/Vote/styled.tsx b/src/pages/Vote/styled.tsx
index effe5b1808..3cfcf7d883 100644
--- a/src/pages/Vote/styled.tsx
+++ b/src/pages/Vote/styled.tsx
@@ -54,6 +54,8 @@ const StyledProposalContainer = styled.span<{ status: ProposalState }>`
   width: fit-content;
   justify-self: flex-end;
   text-transform: uppercase;
+  flex: 0 0 100px;
+  text-align: center;
 `
 
 export function ProposalStatus({ status }: { status: ProposalState }) {