From 37beb584ef3e1b4908477c041a79708883cfea51 Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Fri, 30 Sep 2022 12:44:32 -0700
Subject: [PATCH] fix comment bounty overflow style

---
 web/components/contract/bountied-contract-badge.tsx | 7 +++++--
 web/components/contract/contract-details.tsx        | 4 ++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/web/components/contract/bountied-contract-badge.tsx b/web/components/contract/bountied-contract-badge.tsx
index fd738895..72dc70e1 100644
--- a/web/components/contract/bountied-contract-badge.tsx
+++ b/web/components/contract/bountied-contract-badge.tsx
@@ -21,8 +21,11 @@ export function BountiedContractSmallBadge(props: {
   if (!openCommentBounties) return <div />
 
   return (
-    <Tooltip text={CommentBountiesTooltipText(openCommentBounties)}>
-      <span className="inline-flex cursor-default items-center gap-1 rounded-full bg-indigo-300 px-2 py-0.5 text-xs font-medium text-white">
+    <Tooltip
+      text={CommentBountiesTooltipText(openCommentBounties)}
+      placement="bottom"
+    >
+      <span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-indigo-300 px-2 py-0.5 text-xs font-medium text-white">
         <CurrencyDollarIcon className={'h3 w-3'} />
         {showAmount && formatMoney(openCommentBounties)} Bounty
       </span>
diff --git a/web/components/contract/contract-details.tsx b/web/components/contract/contract-details.tsx
index 7c84fadf..b06c6381 100644
--- a/web/components/contract/contract-details.tsx
+++ b/web/components/contract/contract-details.tsx
@@ -178,7 +178,7 @@ export function MarketSubheader(props: {
             />
           )}
         </Row>
-        <Row className="text-2xs text-greyscale-4 gap-2 sm:text-xs">
+        <Row className="text-2xs text-greyscale-4 flex-wrap gap-2 sm:text-xs">
           <CloseOrResolveTime
             contract={contract}
             resolvedDate={resolvedDate}
@@ -335,7 +335,7 @@ export function GroupDisplay(props: { groupToDisplay?: GroupLink | null }) {
   if (groupToDisplay) {
     return (
       <Link prefetch={false} href={groupPath(groupToDisplay.slug)}>
-        <a className="bg-greyscale-4 hover:bg-greyscale-3 max-w-[140px] truncate rounded-full py-0.5 px-2 text-xs text-white sm:max-w-[250px]">
+        <a className="bg-greyscale-4 hover:bg-greyscale-3 max-w-[140px] truncate whitespace-nowrap rounded-full py-0.5 px-2 text-xs text-white sm:max-w-[250px]">
           {groupToDisplay.name}
         </a>
       </Link>