more tidying

assets/10-theme.css

@@ -307,4 +307,12 @@ input:focus-visible {
         grid-column: 1 / -1;
         grid-row: 2;
     }
+}
+
+.polymer-section > h3,
+.results-panel > h3 {
+    font-size: 22px !important;
+    line-height: 1.3 !important;
+    margin-top: 0 !important;
+    margin-bottom: 10px !important;
 }

figure.py

@@ -273,9 +273,8 @@ def build_figure(dataframe: pd.DataFrame, mc_option="absolute") -> go.Figure:
             b=20
         ),
 
-        autosize=False,
+        autosize=True,
         height=600,
-        width=800,
     )
 
     fig.update_xaxes(

main_layout.py

@@ -104,6 +104,7 @@ def build_placeholder_figure():
 
 def build_polymer_section():
     return html.Div(
+        className="polymer-section",
         children=[
             section_header("Polymer component"),
 
@@ -460,21 +461,42 @@ def build_monte_carlo_section():
 # ============================================================
 
 def build_results_panel(placeholder_fig):
-    return html.Section(
+    return html.Div(
+
         className="results-panel",
+
+        style={
+            "flex": "1",
+            "minWidth": 0,
+            "boxSizing": "border-box",
+            "border": "1px solid #D5DADF",
+            "borderRadius": "4px",
+            "backgroundColor": "#FFFFFF",
+            "padding": "16px",
+            "paddingTop": "12px",
+        },
         children=[
-            html.H2("Results", className="panel-title"),
+
+            section_header("Results"),
 
             dcc.Loading(
                 id="mm0_loading",
-                type="circle",
-                color="#17649a",
-                parent_style={"width": "100%"},
+                type="default",
+                color="#D60036",
+                parent_style={
+                    "position": "relative",
+                    "width": "100%",
+                    "minWidth": 0,
+                },
                 children=dcc.Graph(
                     id="mm0_chart",
                     figure=placeholder_fig,
+                    responsive=True,
                     config={"displayModeBar": False},
-                    style={"width": "800px", "height": "600px"},
+                    style={
+                        "width": "100%",
+                        "height": "600px",
+                    },
                 ),
             ),
 
@@ -488,13 +510,14 @@ def build_results_panel(placeholder_fig):
                     "and in vivo scenarios. ",
                     "For additional information, please "
                     "refer to the ",
-                    dcc.Link(
-                        "quick start guide",
-                        href="/instructions",
-                    ),
+                    dcc.Link("quick start guide", href="/instructions"),
                     ".",
                 ],
-                className="results-description",
+                style={
+                    "margin": "1.25rem 0 0",
+                    "lineHeight": "1.4",
+                    "color": "#555",
+                },
             ),
         ],
     )