From 78f4f1e52701893259bbd714c072c1d7588417be Mon Sep 17 00:00:00 2001
From: PhatPhuckDave <david.majdandzic@hotmail.com>
Date: Tue, 8 Jul 2025 13:14:27 +0200
Subject: [PATCH] Refactor PriceDisplay component layout

- Adjusted grid layout for price display to improve readability.
- Consolidated break-even price display into a more compact format.
- Enhanced styling for better visual alignment of price information.
---
 src/components/JobCardDetails.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/JobCardDetails.tsx b/src/components/JobCardDetails.tsx
index 9cb5800..2e35a16 100644
--- a/src/components/JobCardDetails.tsx
+++ b/src/components/JobCardDetails.tsx
@@ -251,12 +251,17 @@ const PriceDisplay: React.FC<PriceDisplayProps> = ({ job }) => {
   const taxSuffix = salesTax > 0 ? ` (+${(salesTax * 100).toFixed(1)}% tax)` : '';
 
   return (
-    <div className="grid gap-x-4 gap-y-2 text-sm" style={{ gridTemplateColumns: '1fr 1fr 1fr 1fr' }}>
-      <div className="col-span-2 flex items-center gap-2 text-gray-400">
+    <div className="grid gap-x-4 gap-y-2 text-sm" style={{ gridTemplateColumns: '1fr 1fr' }}>
+      <div className="flex items-center gap-2 text-gray-400">
         <Factory className="w-4 h-4" />
         <span>Target Price{taxSuffix}:</span>
       </div>
-      <div className="col-span-2 flex items-center gap-1">
+      <div className="flex items-center gap-2 text-gray-400">
+        <DollarSign className="w-4 h-4" />
+        <span>Break-even{taxSuffix}:</span>
+      </div>
+      
+      <div className="flex items-center gap-1 text-lg">
         <span
           className="cursor-pointer hover:text-blue-400 transition-colors inline-flex items-center gap-1 text-white"
           onClick={handleCopyTargetPrice}
@@ -267,12 +272,7 @@ const PriceDisplay: React.FC<PriceDisplayProps> = ({ job }) => {
           {copying === 'targetPrice' && <Copy className="w-3 h-3 text-green-400" />}
         </span>
       </div>
-      
-      <div className="col-span-2 flex items-center gap-2 text-gray-400">
-        <DollarSign className="w-4 h-4" />
-        <span>Break-even{taxSuffix}:</span>
-      </div>
-      <div className="col-span-2 flex items-center gap-1">
+      <div className="flex items-center gap-1 text-lg">
         <span
           className="cursor-pointer hover:text-yellow-400 transition-colors inline-flex items-center gap-1 text-white"
           onClick={handleCopyBreakEvenPrice}