diff --git a/web/components/contract/contract-card.tsx b/web/components/contract/contract-card.tsx
index c054abab..3d4fa8d1 100644
--- a/web/components/contract/contract-card.tsx
+++ b/web/components/contract/contract-card.tsx
@@ -122,19 +122,6 @@ export function ContractCard(props: {
           ) : (
             <FreeResponseTopAnswer contract={contract} truncate="long" />
           ))}
-        <Row className={'absolute bottom-3 gap-2 md:gap-0'}>
-          <AvatarDetails
-            contract={contract}
-            short={true}
-            className={'block md:hidden'}
-          />
-          <MiscDetails
-            contract={contract}
-            showHotVolume={showHotVolume}
-            showTime={showTime}
-            hideGroupLink={hideGroupLink}
-          />
-        </Row>
       </Col>
       {showQuickBet ? (
         <QuickBet contract={contract} user={user} />
@@ -172,6 +159,24 @@ export function ContractCard(props: {
           <ProbBar contract={contract} />
         </>
       )}
+      <Row
+        className={clsx(
+          'absolute bottom-3 gap-2 truncate px-5 md:gap-0',
+          showQuickBet ? 'w-[85%]' : 'w-full'
+        )}
+      >
+        <AvatarDetails
+          contract={contract}
+          short={true}
+          className={'block md:hidden'}
+        />
+        <MiscDetails
+          contract={contract}
+          showHotVolume={showHotVolume}
+          showTime={showTime}
+          hideGroupLink={hideGroupLink}
+        />
+      </Row>
     </Row>
   )
 }
diff --git a/web/components/contract/contract-details.tsx b/web/components/contract/contract-details.tsx
index 71998b9d..5a62313f 100644
--- a/web/components/contract/contract-details.tsx
+++ b/web/components/contract/contract-details.tsx
@@ -58,13 +58,13 @@ export function MiscDetails(props: {
   const isNew = createdTime > Date.now() - DAY_MS && !isResolved
 
   return (
-    <Row className="items-center gap-3 text-sm text-gray-400">
+    <Row className="items-center gap-3 truncate text-sm text-gray-400">
       {showHotVolume ? (
         <Row className="gap-0.5">
           <TrendingUpIcon className="h-5 w-5" /> {formatMoney(volume24Hours)}
         </Row>
       ) : showTime === 'close-date' ? (
-        <Row className="gap-0.5">
+        <Row className="gap-0.5 whitespace-nowrap">
           <ClockIcon className="h-5 w-5" />
           {(closeTime || 0) < Date.now() ? 'Closed' : 'Closes'}{' '}
           {fromNow(closeTime || 0)}