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 <[email protected]>
cowprotocol · Dec 1, 2021 · 890471f · 890471f
1 parent 478ee7b
commit 890471f
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git 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
@@ -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 }) {