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;
}