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

@@ -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)`

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 }) {