From 47c0ec01ebc6cca1c3060c15d66d7e658e51ac7d Mon Sep 17 00:00:00 2001
From: Sam Keen <samuel@vegaprotocol.io>
Date: Thu, 12 Jan 2023 14:18:17 +0000
Subject: [PATCH] feat(2601): token homepage proposals should have their width
 halved on larger breakpoints (#2603)

---
 apps/token/src/components/heading/heading.tsx                | 2 +-
 apps/token/src/routes/home/index.tsx                         | 5 ++++-
 .../components/proposals-list-item/proposals-list-item.tsx   | 2 +-
 .../src/components/rounded-wrapper/rounded-wrapper.tsx       | 3 +++
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/token/src/components/heading/heading.tsx b/apps/token/src/components/heading/heading.tsx
index 7d446c4aa..c85771b4d 100644
--- a/apps/token/src/components/heading/heading.tsx
+++ b/apps/token/src/components/heading/heading.tsx
@@ -43,7 +43,7 @@ export const SubHeading = ({
 
   return (
     <h2
-      className={classNames('text-2xl font-alpha calt uppercase', {
+      className={classNames('text-2xl font-alpha calt uppercase break-words', {
         'mx-auto': centerContent,
         'mb-0': !marginBottom,
         'mb-4': marginBottom,
diff --git a/apps/token/src/routes/home/index.tsx b/apps/token/src/routes/home/index.tsx
index 55f744d14..e52d9304a 100644
--- a/apps/token/src/routes/home/index.tsx
+++ b/apps/token/src/routes/home/index.tsx
@@ -46,7 +46,10 @@ const HomeProposals = ({
           {t(`readMoreGovernance`)}
         </ExternalLink>
       </div>
-      <ul data-testid="home-proposal-list">
+      <ul
+        data-testid="home-proposal-list"
+        className="grid md:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2 gap-6"
+      >
         {proposals.map((proposal) => (
           <ProposalsListItem key={proposal.id} proposal={proposal} />
         ))}
diff --git a/apps/token/src/routes/proposals/components/proposals-list-item/proposals-list-item.tsx b/apps/token/src/routes/proposals/components/proposals-list-item/proposals-list-item.tsx
index f7145c82d..cf3a89da5 100644
--- a/apps/token/src/routes/proposals/components/proposals-list-item/proposals-list-item.tsx
+++ b/apps/token/src/routes/proposals/components/proposals-list-item/proposals-list-item.tsx
@@ -13,7 +13,7 @@ export const ProposalsListItem = ({ proposal }: ProposalsListItemProps) => {
 
   return (
     <li id={proposal.id} data-testid="proposals-list-item">
-      <RoundedWrapper paddingBottom={true}>
+      <RoundedWrapper paddingBottom={true} heightFull={true}>
         <ProposalHeader proposal={proposal} />
         <ProposalsListItemDetails proposal={proposal} />
       </RoundedWrapper>
diff --git a/libs/ui-toolkit/src/components/rounded-wrapper/rounded-wrapper.tsx b/libs/ui-toolkit/src/components/rounded-wrapper/rounded-wrapper.tsx
index 168a40598..8f1995629 100644
--- a/libs/ui-toolkit/src/components/rounded-wrapper/rounded-wrapper.tsx
+++ b/libs/ui-toolkit/src/components/rounded-wrapper/rounded-wrapper.tsx
@@ -6,6 +6,7 @@ export interface RoundedWrapperProps {
   border?: boolean;
   paddingBottom?: boolean;
   marginBottomLarge?: boolean;
+  heightFull?: boolean;
 }
 
 export const RoundedWrapper = ({
@@ -13,6 +14,7 @@ export const RoundedWrapper = ({
   border = true,
   paddingBottom = false,
   marginBottomLarge = false,
+  heightFull = false,
 }: RoundedWrapperProps) => (
   <div
     className={classnames('rounded-xl pt-4 px-4 overflow-hidden', {
@@ -20,6 +22,7 @@ export const RoundedWrapper = ({
       'pb-4': paddingBottom,
       'mb-10': marginBottomLarge,
       'mb-4': !marginBottomLarge,
+      'h-full': heightFull,
     })}
   >
     {children}