Create viewer.css

viewer.css

@@ -0,0 +1,51 @@
+/* Only loaded by the model viewer; the loading screen keeps normal page flow. */
+[data-testid="stMainBlockContainer"] {
+    padding: 3rem 1.5rem .5rem;
+    max-width: none;
+}
+[data-testid="stMain"] { overflow: hidden; }
+.st-key-chart_pane {
+    position: fixed;
+    top: 6.5rem;
+    left: 1.5rem;
+    right: 1.5rem;
+    width: auto !important;
+    height: calc(50dvh - 4rem) !important;
+    min-height: 140px;
+    overflow: hidden;
+    padding: .25rem;
+}
+.st-key-controls_pane {
+    position: fixed;
+    top: calc(50dvh + 3rem);
+    bottom: .75rem;
+    left: 1.5rem;
+    right: 1.5rem;
+    width: auto !important;
+    height: auto !important;
+    min-height: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-gutter: stable;
+    padding: .75rem 1rem;
+    border-top: 1px solid rgba(128, 128, 128, .25);
+}
+.st-key-controls_pane [data-testid="stSubheader"] { padding-top: 0; }
+.st-key-controls_pane [data-testid="stMetricValue"] { font-size: 1.5rem; }
+@media (min-width: 851px) and (max-width: 1250px) {
+    .st-key-control_columns > [data-testid="stLayoutWrapper"] > [data-testid="stHorizontalBlock"] { flex-wrap: wrap; }
+    .st-key-control_columns > [data-testid="stLayoutWrapper"] > [data-testid="stHorizontalBlock"] > [data-testid="stColumn"] {
+        width: calc(50% - 1rem) !important;
+        flex: 1 1 calc(50% - 1rem) !important;
+    }
+}
+@media (max-width: 850px) {
+    [data-testid="stMainBlockContainer"] { padding-left: .5rem; padding-right: .5rem; }
+    .st-key-chart_pane, .st-key-controls_pane { left: .5rem; right: .5rem; }
+    .st-key-control_columns > [data-testid="stLayoutWrapper"] > [data-testid="stHorizontalBlock"] { flex-direction: column; }
+    .st-key-control_columns > [data-testid="stLayoutWrapper"] > [data-testid="stHorizontalBlock"] > [data-testid="stColumn"] {
+        width: 100% !important;
+        flex: 1 1 auto !important;
+    }
+}