From b2a6c01cdfaa1f927ec98c4ed78d4923630812aa Mon Sep 17 00:00:00 2001
From: James Morris <moreofmorris@users.noreply.github.com>
Date: Tue, 17 May 2022 12:50:56 +0100
Subject: [PATCH] Working out the Safari layout issue when changing dropdowns
 on new Dashboard

refs: https://github.com/TryGhost/Team/issues/1531
---
 .../components/dashboard/charts/paid-mix.hbs  |  4 +--
 .../components/dashboard/charts/paid-mix.js   | 13 +++++++--
 ghost/admin/app/styles/layouts/dashboard.css  | 28 +++++++++----------
 3 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/ghost/admin/app/components/dashboard/charts/paid-mix.hbs b/ghost/admin/app/components/dashboard/charts/paid-mix.hbs
index cc4648e2cb..be4b0e862b 100644
--- a/ghost/admin/app/components/dashboard/charts/paid-mix.hbs
+++ b/ghost/admin/app/components/dashboard/charts/paid-mix.hbs
@@ -1,4 +1,4 @@
-<div class="gh-dashboard-minichart gh-dashboard-mix {{if this.isChartTiers 'is-tiers'}}">
+<div class="gh-dashboard-minichart gh-dashboard-mix {{if this.isChartCadence 'is-cadence'}}">
     <div class="gh-dashboard-content">
         <div class="gh-dashboard-data">
             <Dashboard::Parts::Metric
@@ -11,7 +11,7 @@
                 </div>
             {{/if}}
         </div>
-        <div class="gh-dashboard-chart {{if this.isChartCadence "narrow"}}" {{did-insert this.loadCharts}}>
+        <div class="gh-dashboard-chart" {{did-insert this.loadCharts}}>
             {{#if this.loading}}
                 <div class="gh-dashboard-chart-loading">
                     <div class="gh-loading-spinner"></div>
diff --git a/ghost/admin/app/components/dashboard/charts/paid-mix.js b/ghost/admin/app/components/dashboard/charts/paid-mix.js
index c8e863f257..065bde67aa 100644
--- a/ghost/admin/app/components/dashboard/charts/paid-mix.js
+++ b/ghost/admin/app/components/dashboard/charts/paid-mix.js
@@ -448,8 +448,17 @@ export default class PaidMix extends Component {
                     }
 
                     let offsetX = 0;
-                    if (tooltip.x > chartWidth - tooltipWidth) {
-                        offsetX = tooltipWidth - 10;
+
+                    if (that.mode === 'cadence') {
+                        // these adjustments should match the special width and margin values in css
+                        if (tooltip.x > (chartWidth * 0.69) - tooltipWidth) {
+                            offsetX = tooltipWidth - 10;
+                        }
+                        offsetX -= (chartWidth * 0.30);
+                    } else {
+                        if (tooltip.x > chartWidth - tooltipWidth) {
+                            offsetX = tooltipWidth - 10;
+                        } 
                     }
 
                     // update tooltip styles
diff --git a/ghost/admin/app/styles/layouts/dashboard.css b/ghost/admin/app/styles/layouts/dashboard.css
index cecc16193c..c96a5b63f0 100644
--- a/ghost/admin/app/styles/layouts/dashboard.css
+++ b/ghost/admin/app/styles/layouts/dashboard.css
@@ -263,6 +263,16 @@ Dashboard v5 Layout */
     width: 100%;
 }
 
+.gh-dashboard-minicharts .gh-dashboard-mix .gh-dashboard-chart {
+    padding-left: 0;
+}
+
+.gh-dashboard-minicharts .gh-dashboard-mix.is-cadence .gh-dashboard-chart-box {
+    /* remember to match these to the tooltip offsets */
+    width: 69%;
+    margin-left: 30%;
+}
+
 @media screen and (max-width: 1400px) {
     .gh-dashboard-minicharts .gh-dashboard-chart {
         padding-left: 50%;
@@ -294,14 +304,6 @@ Dashboard v5 Layout */
     padding-right: 0;
 }
 
-.gh-dashboard-minichart.is-tiers {
-    flex-direction: column;
-}
-
-.gh-dashboard-minichart.is-tiers .gh-dashboard-chart {
-    padding: 0;
-}
-
 .gh-dashboard-minichart .gh-dashboard-chart-box {
     height: 88px;
 }
@@ -551,9 +553,9 @@ Dashboard v5 Chart */
     left: 24px;
 }
 
-.gh-dashboard-mix .gh-dashboard-chart.narrow {
-    /* margin-left: -80px; */
-    padding-left: 30%;
+.gh-dashboard-mix .gh-dashboard-chart-box {
+    width: 99%;
+    margin: 0;
 }
 
 
@@ -1976,10 +1978,6 @@ Dashboard v5 Tooltips */
         left: 0;
     }
 
-    .gh-dashboard-mix .gh-dashboard-chart.narrow {
-        padding: 0;
-    }
-
     .gh-dashboard-mix .gh-dashboard-metric {
         margin-top: 0;
     }