Proposals box (solana-labs#758)

* wrapping overflowing text when pubkey is passed as proposal title * implementing min-width on voted proposal status badge
d0bby5 · Jun 17, 2022 · 16ff0c2 · 16ff0c2
1 parent 87a92d0
commit 16ff0c2
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;
+}