From 16ff0c22db48862d2144f6b32937d12ee1defa7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Corinne=20B=C3=B6sch?= <corinne.boesch@gmail.com>
Date: Fri, 17 Jun 2022 12:25:05 +0100
Subject: [PATCH] Proposals box (#758)

* wrapping overflowing text when pubkey is passed as proposal title

* implementing min-width on voted proposal status badge
---
 components/Members/MemberOverview.tsx | 4 +---
 components/ProposalCard.tsx           | 4 +++-
 components/ProposalStatusBadge.tsx    | 2 +-
 pages/dao/[symbol]/proposal/[pk].tsx  | 4 +++-
 styles/index.css                      | 7 +++++++
 5 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/components/Members/MemberOverview.tsx b/components/Members/MemberOverview.tsx
index 6a3f5e511d..ad4f9a8a4e 100644
--- a/components/Members/MemberOverview.tsx
+++ b/components/Members/MemberOverview.tsx
@@ -266,9 +266,7 @@ const MemberOverview = ({ member }: { member: Member }) => {
                     className="bg-bkg-1 space-y-2 mt-2 px-4 py-3 rounded-md"
                     key={index}
                   >
-                    <p
-                      className={`flex items-center text-xs text-fgd-3 text-xs`}
-                    >
+                    <p className={`flex items-center text-fgd-3 text-xs`}>
                       <ChatAltIcon className="flex-shrink-0 h-5 mr-1.5 text-fgd-2 w-5" />
                       {msg}
                     </p>
diff --git a/components/ProposalCard.tsx b/components/ProposalCard.tsx
index 0895b77c21..32e2bbde8c 100644
--- a/components/ProposalCard.tsx
+++ b/components/ProposalCard.tsx
@@ -43,7 +43,9 @@ const ProposalCard = ({ proposalPk, proposal }: ProposalCardProps) => {
           <StyledCardWrapper className="border border-fgd-4 default-transition rounded-lg hover:bg-bkg-3">
             <div className="p-4">
               <div className="flex items-start justify-between">
-                <h3 className="text-fgd-1">{proposal.name}</h3>
+                <h3 className="text-fgd-1 overflow-wrap-anywhere">
+                  {proposal.name}
+                </h3>
                 <div className="flex items-center pl-4 pt-1">
                   <ProposalStateBadge
                     proposalPk={proposalPk}
diff --git a/components/ProposalStatusBadge.tsx b/components/ProposalStatusBadge.tsx
index fd3e062ca4..34a0d58c93 100644
--- a/components/ProposalStatusBadge.tsx
+++ b/components/ProposalStatusBadge.tsx
@@ -109,7 +109,7 @@ const ProposalStateBadge = ({
         <div
           className={`${getProposalStateStyle(
             proposal.state
-          )} inline-block px-2 py-1 rounded-full text-xs`}
+          )} min-w-max inline-block px-2 py-1 rounded-full text-xs`}
         >
           {statusLabel}
         </div>
diff --git a/pages/dao/[symbol]/proposal/[pk].tsx b/pages/dao/[symbol]/proposal/[pk].tsx
index 0a791a4031..bfd7774990 100644
--- a/pages/dao/[symbol]/proposal/[pk].tsx
+++ b/pages/dao/[symbol]/proposal/[pk].tsx
@@ -74,7 +74,9 @@ const Proposal = () => {
 
             <div className="py-4">
               <div className="flex items-center justify-between mb-1">
-                <h1 className="mr-2">{proposal?.account.name}</h1>
+                <h1 className="mr-2 overflow-wrap-anywhere">
+                  {proposal?.account.name}
+                </h1>
                 <ProposalStateBadge
                   proposalPk={proposal.pubkey}
                   proposal={proposal.account}
diff --git a/styles/index.css b/styles/index.css
index 8c0e2db10c..4ef45caa04 100644
--- a/styles/index.css
+++ b/styles/index.css
@@ -190,3 +190,10 @@ body::-webkit-scrollbar-corner {
 .bg-brand-gradient {
   @apply bg-gradient-to-r from-[#00C2FF] via-[#00E4FF] to-[#87F2FF];
 }
+
+/* break-words is depricated a tailwind and CSS class, 
+advised to use overflow-wrap instead - see documentation below
+https://developer.mozilla.org/en-US/docs/Web/CSS/word-break#values */
+.overflow-wrap-anywhere {
+  overflow-wrap: anywhere;
+}