From d73ed8fe7c11174366146bc6dd7f6923d11b7282 Mon Sep 17 00:00:00 2001
From: Uku Taht <Uku.taht@gmail.com>
Date: Wed, 31 Jul 2024 15:19:11 +0300
Subject: [PATCH] Goal detail tweaks (#4410)

* Always show details modal for goal conversions

* Make metrics smaller in breakdown table

So that revenue metrics fit

* So that revenue metrics fit

* Add more space for dimension value in breakdown modal
---
 assets/js/dashboard/stats/behaviours/conversions.js | 1 -
 assets/js/dashboard/stats/modals/breakdown-modal.js | 8 ++++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/assets/js/dashboard/stats/behaviours/conversions.js b/assets/js/dashboard/stats/behaviours/conversions.js
index 42856f8fe..ece322322 100644
--- a/assets/js/dashboard/stats/behaviours/conversions.js
+++ b/assets/js/dashboard/stats/behaviours/conversions.js
@@ -42,7 +42,6 @@ export default function Conversions({ afterFetchData, onGoalFilterClick }) {
       onClick={onGoalFilterClick}
       metrics={chooseMetrics()}
       detailsLink={url.sitePath('conversions')}
-      maybeHideDetails={true}
       color="bg-red-50"
       colMinWidth={90}
     />
diff --git a/assets/js/dashboard/stats/modals/breakdown-modal.js b/assets/js/dashboard/stats/modals/breakdown-modal.js
index 86f786838..99e94d39e 100644
--- a/assets/js/dashboard/stats/modals/breakdown-modal.js
+++ b/assets/js/dashboard/stats/modals/breakdown-modal.js
@@ -156,7 +156,7 @@ export default function BreakdownModal({
   function renderRow(item) {
     return (
       <tr className="text-sm dark:text-gray-200" key={item.name}>
-        <td className="w-48 md:w-64 break-all p-2 flex items-center">
+        <td className="w-48 md:w-80 break-all p-2 flex items-center">
           {maybeRenderIcon(item)}
           <FilterLink
             pathname={`/${encodeURIComponent(site.domain)}`}
@@ -168,7 +168,7 @@ export default function BreakdownModal({
         </td>
         {metrics.map((metric) => {
           return (
-            <td key={metric.key} className="p-2 w-32 font-medium" align="right">
+            <td key={metric.key} className="p-2 w-24 font-medium" align="right">
               {metric.renderValue(item[metric.key])}
             </td>
           )
@@ -229,7 +229,7 @@ export default function BreakdownModal({
             <thead>
               <tr>
                 <th
-                  className="p-2 w-48 md:w-64 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400"
+                  className="p-2 w-48 md:w-80 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400"
                   align="left"
                 >
                   {reportInfo.dimensionLabel}
@@ -237,7 +237,7 @@ export default function BreakdownModal({
 
                 {metrics.map((metric) => {
                   return (
-                    <th key={metric.key} className="p-2 w-32 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="right">
+                    <th key={metric.key} className="p-2 w-24 text-xs tracking-wide font-bold text-gray-500 dark:text-gray-400" align="right">
                       {metric.renderLabel(query)}
                     </th>
                   )