From b37a12bf71c174c2e839b4194870ff0efa43829f Mon Sep 17 00:00:00 2001
From: ekzyis <ek@stacker.news>
Date: Tue, 7 Jan 2025 00:22:56 +0100
Subject: [PATCH] Use sats / ccs format in item details (#1805)

* Use sats / ccs format in item details

* Use row-gap and line-height
---
 components/item-info.js    | 18 ++++++------------
 components/item.module.css |  2 ++
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/components/item-info.js b/components/item-info.js
index b98500cd8..f73017893 100644
--- a/components/item-info.js
+++ b/components/item-info.js
@@ -252,20 +252,14 @@ function InfoDropdownItem ({ item }) {
           <div>{item.createdAt}</div>
           <div>cost</div>
           <div>{item.cost}</div>
-          <div>sats</div>
-          <div>{item.sats - item.credits}</div>
-          <div>CCs</div>
-          <div>{item.credits}</div>
-          <div>comment sats</div>
-          <div>{item.commentSats - item.commentCredits}</div>
-          <div>comment CCs</div>
-          <div>{item.commentCredits}</div>
+          <div>stacked</div>
+          <div>{item.sats - item.credits} sats / {item.credits} ccs</div>
+          <div>stacked (comments)</div>
+          <div>{item.commentSats - item.commentCredits} sats / {item.commentCredits} ccs</div>
           {me && (
             <>
-              <div>sats from me</div>
-              <div>{item.meSats - item.meCredits}</div>
-              <div>CCs from me</div>
-              <div>{item.meCredits}</div>
+              <div>from me</div>
+              <div>{item.meSats - item.meCredits} sats / {item.meCredits} ccs</div>
               <div>downsats from me</div>
               <div>{item.meDontLikeSats}</div>
             </>
diff --git a/components/item.module.css b/components/item.module.css
index b577e7978..8800900e5 100644
--- a/components/item.module.css
+++ b/components/item.module.css
@@ -164,6 +164,8 @@ a.link:visited {
     display: grid;
     grid-template-columns: auto auto;
     column-gap: 1rem;
+    line-height: 1.25;
+    row-gap: 0.75rem;
 }
 
 /* .itemJob .hunk {