Adjust cube viewer sizing and axis scaling

ttuff · ttuff · commit 1ae65308f9bf · 2026-01-09T14:11:05.000-07:00
diff --git a/src/cubedynamics/plotting/axis_rig.py b/src/cubedynamics/plotting/axis_rig.py
@@ -301,17 +301,17 @@ def axis_rig_css(spec: AxisRigSpec) -> str:
       transform-style: preserve-3d;
       pointer-events: none;
       color: var(--cd-axis-color);
-      font-size: var(--cube-axis-font-size, 13px);
+      font-size: var(--cd-axis-font, var(--cube-axis-font-size, 13px));
       letter-spacing: 0.04em;
       /* Axis rig lives in cube-local coords; out-z anchors to front face, Y labels shift left for legibility. */
       --cd-axis-color: rgba(25, 25, 25, 0.9);
       --cd-axis-out-x: 16px;
       --cd-axis-out-y: 14px;
       --cd-axis-front-z: calc(0.5 * var(--cd-cube-size, var(--cube-size)));
       --cd-axis-out-z: calc(var(--cd-axis-front-z) + 6px);
-      --cd-axis-line-w: 2px;
-      --cd-axis-tick-w: 1px;
-      --cd-axis-tick-l: 8px;
+      --cd-axis-line-w: var(--cd-axis-stroke, 2px);
+      --cd-axis-tick-w: var(--cd-axis-stroke, 1px);
+      --cd-axis-tick-l: var(--cd-axis-tick-l, 8px);
       --cd-axis-label-gap: 16px;
       --cd-axis-end-nudge: 6px;
       --cd-axis-x-name-drop: 18px;
@@ -369,6 +369,7 @@ def axis_rig_css(spec: AxisRigSpec) -> str:
 
     .cd-axis-label-face {
       display: inline-block;
+      padding: var(--cd-axis-pill-px, 0px);
       transform-style: preserve-3d;
       transform: rotateX(var(--cd-bb-rot-x)) rotateY(var(--cd-bb-rot-y));
     }
diff --git a/src/cubedynamics/plotting/cube_viewer.py b/src/cubedynamics/plotting/cube_viewer.py
@@ -282,17 +282,27 @@ def _render_cube_html(
     axis_rig_data_attr = " data-axis-rig=\"true\"" if axis_rig_spec else ""
 
     cube_size_css = (
-        f"{size_px}px" if size_px is not None else "clamp(320px, min(70vh, 70vw), 760px)"
+        f"{size_px}px" if size_px is not None else "clamp(300px, min(58vh, 58vw), 640px)"
     )
     html = f"""
 <!DOCTYPE html>
 <html lang=\"en\">
 <head>
   <meta charset=\"UTF-8\" />
-  <style>
+    <style>
     :root {{
+      /* Viewer override hooks:
+         --cd-cube-size
+         --cd-axis-font
+         --cd-axis-tick-l
+         --cd-axis-stroke
+      */
       --cd-cube-size: {cube_size_css};
       --cube-size: var(--cd-cube-size);
+      --cd-axis-font: clamp(11px, calc(var(--cd-cube-size) * 0.045), 18px);
+      --cd-axis-pill-px: clamp(4px, calc(var(--cd-cube-size) * 0.010), 8px);
+      --cd-axis-stroke: clamp(2px, calc(var(--cd-cube-size) * 0.006), 4px);
+      --cd-axis-tick-l: clamp(10px, calc(var(--cd-cube-size) * 0.035), 18px);
       {css_vars}
     }}
     * {{ box-sizing: border-box; }}
@@ -311,7 +321,10 @@ def _render_cube_html(
       user-select: none;
     }}
     .cube-figure {{
-      width: min(1180px, 100%);
+      width: 100%;
+      max-width: 1100px;
+      margin: 0 auto;
+      padding: 0 24px;
       display: flex;
       flex-direction: column;
       align-items: center;
