Stabilize plot hover labels

app.py

@@ -653,7 +653,16 @@ def figure_layout(
         font=dict(family="Arial, Helvetica, sans-serif", size=13, color=TEXT_COLOR),
         title=dict(font=dict(size=16, color=TEXT_COLOR), x=0.01, xanchor="left"),
         legend=legend,
-        hoverlabel=dict(font=dict(family="Arial, Helvetica, sans-serif", size=12)),
+        hoverlabel=dict(
+            align="left",
+            bgcolor="#FFFFFF",
+            bordercolor="#607080",
+            font=dict(
+                family="Arial, Helvetica, sans-serif",
+                size=12,
+                color=TEXT_COLOR,
+            ),
+        ),
     )
     fig.update_xaxes(
         showgrid=True,
@@ -2062,7 +2071,7 @@ app.layout = html.Div(
                                     title="Manuscript link will be added on release.",
                                 ),
                                 html.Span(
-                                    ["Submit a model", html.Small("planned")],
+                                    ["Submit a model", html.Small("coming soon")],
                                     className="nav-placeholder",
                                     title="A model-submission workflow is planned.",
                                 ),

assets/styles.css

@@ -477,12 +477,18 @@ h2 {
 
 .graph-box {
   min-width: 0;
-  overflow: hidden;
+  overflow: visible;
   border: 1px solid #e3e9ed;
   border-radius: 9px;
   background: #ffffff;
 }
 
+.js-plotly-plot .plotly .hoverlayer,
+.js-plotly-plot .plotly .hoverlayer * {
+  pointer-events: none !important;
+  transition: none !important;
+}
+
 .graph-box + .graph-box,
 .chart-grid + .graph-box,
 .graph-box + .chart-grid {