feat(2601): token homepage proposals should have their width halved on larger breakpoints (#2603)

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,

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

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>

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}